Rethink declarative animation
- Introduction
- Real World Declartive Animation
- An Even Better Solution for declarative animation!
- End
Introduction
Today, beacuse of new trends like material design and motion design, the animation is become more and more important in web-development.
On the other hand, thanks for the standardized web-component and frameworks like angularjs, knockoutjs, reactjs and vuejs etc. building the view of application in declartive way is coming into popular .
So, what about declarative animation?
This article serves to demonstrate an even better solution for declarative animation. before diving into detail, let’s first check ‘Real World Declartive Animation’ .
Real World Declartive Animation
This section will introduce the exsited approaches to implement declarative animation
Angular
angular is the most popular framework that have nearly 27000 stars on github now.
in angularjs, animation support is based on the module ngAnimate
. The directives that support animation automatically are: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass.
you need to define the appropriate CSS classes or to register a JavaScript animation via the module.animation() function.
Example
when the Expression
is evaluated to true
, the classng-enter
is added first to prepares initial state, then ng-enter-active
is added at nextReflow(similar with setTimeout(0)
).
Anijs
Anijs: Declarative handling library for CSS animations.
anijs’s main objective is to provide an eloquent, easy to translate, and quick to develop environment based on css animations.
Example
the exmpale above means:
when DOMContentLoaded
triggered on document, addClass swing
animated
, then hold them after animationend(or transitionend).
It is dead simple and intuitive. the only requirement is to include a 8kb jsfile(minified, no gzip).
Vuejs
vuejs’s animation-support is very lightweight. just like angular, it hooks the element’s lifecycle at enter
and leave
(based on directive, e.g. v-if
). you can use three directive to customize your animation
v-animation
animation based on class and animationv-transition
: animation based on class and transitionv-effect
: custom animation extension.
example
use animation
or transition
use custom effect
To be honest, I don’t know why vuejs make distinguish between these three cases.
React
React’s animation support is based on the low-level API: ReactTransitionGroup
. you can check the introduction of ReactCSSTransitionGroup
(High-level API) on its animation page
Example
The element that wrapped by ReactCSSTransitionGroup
can animate when it is injected to or leave from the component. it will get the example-enter
CSS class and the example-enter-active
CSS class added in the next tick (similar with angular). This is a convention based on the transitionName prop.
Summary
compare with the JavaScript-Based Animation
(e.g. Velocity.js or jquery), the declarative animation
that introduced above is obviously less flexible. for example:
- only works in given environment .(e.g. when element
enter
orleave
) - can not chainable
- can not combine with other elements’s animation
- developer know nothing about the phase of the animation. (image that you need do some work in javascript when the animation is done)
An Even Better Solution for declarative animation!
The solution introduced later that has been implemented in regularjs yet. and it can be full-supported by any framework that is data-driven(e.g. angularjs, vuejs, ractivejs..).
the solution is based on single directive: r-animation
.
Syntax
The following sections will raise several questions and solve them later by r-animation
.
please be a patience man until compelete the rest of the page, you will find the power of
r-animation
!
the examples will depend on awesome animate.css for some css-related animation.
Question 1: When the animation start
There are two types of Command: 1. trigger
2. step
.
trigger
is used to trigger a animation sequence. and step
is used to define a single animation.
Command on (trigger): when specified event is triggered , starting the animation.
this example means:
- when the element is clicked, trigged the animations.
- Command
class
will addclassanimated swing
(maybe trigger animation) to element, when theanimationend
(ortransitionend
) triggered, remove the class. - animation done
however, how to hook the enter
and leave
time on element?
regularjs emit the mock enter
and leave
event for hooking the element’s lifycle, you can also use on
to handle it;
it is valid that defining multiply trigger
on single r-animation
. every trigger
will create new animtion sequence.
Is there any other trigger?
now , we can take advantage of the data-driven framework to implement a more flexible command than on
.
Command when (trigger): when the specifed Expression is evaluated to true, starting the animation.
when the test === true
is computed to true, the animation will start.
Question 2: How to make the animation chainable?
r-animation
is born to support chainable animation,you can simply sepecify multiply steps
after one trigger
.
Example
now, you will see the steps animate one by one.
Question 3: How to animation two element step by step?
Thanks for the data-driven system. you can use the call
command for evaluating a Expression. after evaluating, the digest phase(regularjs is also based on dirty-check) will be automately triggered, it can trigger other animation (work with when
).
Command call: evaluted a Expression, then enter the component’s digest phase. finaly step to next animation.
Example
steps as follow:
- when
test
is computed to true, start box1’s animation - swing then call
otherSwing = true
; - box2’s
otherSwing
is evaluted totrue
. - box2 shakes, meanwhile box1 shakes;
- done.
thanks for call
and data-driven system, we can staying competitive with javascript based animation
on control.
Question 4: Is there any other buildin command?
wait
: delay for next animationexample
the example means: after clicking, swing then waiting 2000ms, finally shake.
style
: set style and waiting thetransitionend
(if the style trigger thetransition
)example
add transition
to make color fading effect work.
example means: after clicking, swing then set style.color=#333
(trigger transition)…
you can also extend custom command by your self.
Question 5: How to extend Custom Command?
you can extend javascript-based Animation via Component.animation(name, handle)
.
for example, we need fading animation.
describe in template
the only thing you need to do is that: when your animation is compelete, call the function done
.
you can also check the builtin’s sourcecode on github. it is realy dead simple!
Question 6: Need An compeletely Example?
let’s create a infinite animation for joke.
just as the logic described by the template. the sequence will never stopped.
End
if the post is helpful to you, gives regularjs a star