-
Notifications
You must be signed in to change notification settings - Fork 141
100_012_Animation_Easing
Previous Chapter Previous Page Next Page Next Chapter Table of content
This chapter provides some explanations on how animation works and on how to produce special animations.
- some explanations on animation
- some explanations on Easing Functions
-
Animation_combination
- animationYAxis
- animationRadius
- animationRotate
- animationEasing
- animationYAxisEasing
- animationRadiusEasing
-
animationRotateEasing
- Animation_on_specific_data
How is the animation of the charts generated ? It is no so difficult : lot of charts are generated and displayed each after the others. The display is so quick between each of those charts and the differences between two successive charts so small that it looks like it is animate.
An animation variable is managed by the application. The value of this variable varies from 0 to 1; When the value is 0, nothing of the chart is displayed; when the value is 0.5, the half of the chart is displayed, when the value is 1, the full chart is displayed.
By default, the value increase from 0 to 1 so that the chart is not displayed at the beginning and it evoluates to the full display at the end of the animation.
As explained before, the animation variable evoluates from 0 to 1. According the animation variable, a portion of the chart is displayed. I wrote before that when the value of the animation variable is 0.5, the half of the chart is displayed. In reality, it is not 100 % true.... This is true for a linear evolution of the chart animation. But a linear animation is not the most beautifull animation you could have. You could for instance want that the animation starts slowly and ends quickly (=default animation for the line and bar charts). Another possibility is that the animation ends with a rebounding effects (=default animation for the Pie/Dougnut charts).
To produce such effects, "easing" functions are provided. Easing functions are functions that receives the animation variable as input and returns a new 'animation' value also between 0 and 1. Those easing functions produce a more beautifull animation.
Lot of easing functions are profided with ChartNew.js (they have all been "picked" up from Chart.js). We will not explain each of them. Just try them !
List of easing functions : Linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
Easing functions bring a nice effect to the charts, but ... you can do more with ChartNew.js
If you want to have a blinking effect at the end of the animation (charts completely disappears and reappears several times), you would have to write your own easing function.
Another request could be that the chart is completely displayed at the beginning and slowly disappears (<=> reverse animation).
Perhaps it is not difficult for you to write an new easing function to produce such effects, but it is not necessary with ChartNew.js. ChartNew.js provides a solution for such requests.
In chartNew.js, you can give a table of values through an option. We will call such a table the "Animation Triplet". The "Animation Triplet" will be interpreted as explained here.
[a1,a2,a3,b1,b2,b3,c1,c2,c3, .... ,m1, m2, m3, n1, n2, n3]
Restrictions :
- each value in the table must be a value between 0 and 1.
- a1+b1+c1+...+m1+n1 must be equal to 1;
Example 1 : [0.799,0,1,0.04,0,0,0.04,1,1,0.04,0,0,0.04,1,1,0.04,0,0,0.001,1,1]
This example will produce a blinking effect at the end of the animation.
How to interpret this table :
When the animation value is between 0 and a1, the real animation value will evoluate between a2 and a3. When the animation value is between a1 and a1+b1, the real animation value will evoluate between b2 and b3. When the animation value is between a1+b1 and a1+b1+c1, the real animation value will evoluate between c2 and c3. ... When the animation value is between a1+b1+c1+...+m1 and a1+b1+c1+...+m1+n1, the real animation value will evoluate between n2 and n3.
In our sample, nothing is displayed when the animation value is 0 (a2=0) and the chart is fully displayed (a3=1) when the animation value is 0.799 (a1=0.799) When the animation value is between 0.799 (=a1) and 0.839 (=a1+b1), nothing is displayed (b2=b3=0); When the animation value is between 0.839 (=a1+b1) and 0.879 (=a1+b1+c1), the chart is fully displayed (c2=c3=1). Then again, nothing is displayed when the animation value is between 0.879 and 0.919. Then again, the chart is fully displayed when the animation value is between 0.919 and 0.959. Then again, nothing is displayed when the animation value is between 0.959 and 0.999. At last, the chart is fully displayed when the animation value is between 0.999 and 1.
Example 2 : [1,1,0]
This will produce a reverse animation : When the animation value is 0, the chart is fully displayed (a2=1) and when the animation value is 1 (a1=1), nothing is displayed (a3=0).
Example 3 : [0.33,0,1,0.33,1,0,0.34,0,1]
This will produce an animation where the chart evoluates from nothing to a full display, then a reverse animation is played and again a full animation.
Once again, each of the range of animation (each triplet) can be associated to an easing function. In our last sample, you could specify that the first part of the animation is displayed according the "easeOutQuart" function; the reverse animation is "linear", and the last animation uses the "easeOutBounce" easing function.
How to specify ? Simply associates ["easeOutQuad","linear","easeOutBounce"] to the ad-hoc option.
Example : http://fvancop.github.io/ChartNew.js/Samples/animationEasing.html
Here after, we list the options that can be defined for the animation.
Description : Specify the Animation Triplet for the animation of the chart.
Chart types : Line, Bubble, Bar, StackedBar, HorizontalBar, HorizontalStackedBar, Radar
Values : An Animation triplet as defined at the beginning of this documentation.
Default value : [1,0,1]
Sample : [0.799,0,1,0.04,0,0,0.04,1,1,0.04,0,0,0.04,1,1,0.04,0,0,0.001,1,1]
See also :
Description : Specify the Animation Triplet for the radius animation of the chart.
Chart types : PolarArea, Pie, Doughnut
Values : An Animation triplet as defined at the beginning of this documentation.
Default value : [1,1,1]
Sample : [1,0,1]
See also : responsiveScaleContent
Description : Specify the Animation Triplet for the rotation animation of the chart.
Chart types : PolarArea, Pie, Doughnut
Values : An Animation triplet as defined at the beginning of this documentation.
Default value : [1,0,1]
Sample : [1,0,1]
See also :
Description : The animationEasing is the default animation value for the options animationYAxisEasing, animationRadiusEasing and animationRotateEasing.
Chart types : All
Values : any easing function.
Default value :
For Pie/Doughnut/polarArea : "easeOutBounce"
For the other charts : "easeOutQuart"
Sample : animationEasing : "linear"
See also :
Description : The table with the easing functions associated to the animationYAxis Animation Triplet.
Chart types : Line, Bubble, Bar, StackedBar, HorizontalBar, HorizontalStackedBar, Radar
Values : a table with easing functions.
Default value : [<easingFunction option>]
Sample : animationYAxisEasing : ["easeOutQuad","linear"]
See also :
Description : The table with the easing functions associated to the animationRadius Animation Triplet.
Chart types : Pie, Doughnut, PolarArea
Values : a table with easing functions.
Default value : [<easingFunction option>]
Sample : animationYAxisEasing : ["easeOutQuad","linear"]
See also :
Description : The table with the easing functions associated to the animationRotate Animation Triplet.
Chart types : Pie, Doughnut, PolarArea
Values : a table with easing functions.
Default value : [<easingFunction option>]
Sample : animationRotateEasing : ["easeOutQuad","linear"]
See also :
What you specify for the full chart, you can specify for each single piece of the chart. You could for instance specify another easing function for the last bar of the chart, define a blinking effect for the last bar of the chart, display each part of the chart randomly, etc...
The 6 options that can be defined globally for the chart, can be defined for each piece of chart and for each piece you can specify other values.
How to specify the values of a piece of chart ? Specify the options for the piece of chart in the data section.
Example where the last piece of chart will appear with a binking effect at the end :
var mydata2 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointstrokeColor : "yellow",
data : [95,53,99,,73,27,82],
animationYAxis : [,,,,,,[0.4,0,0,0.35,0,1,0.04,1,1,0.04,0,0,0.04,1,1,0.04,0,0,0.04,1,1,0.04,0,0,0.01,1,1]],
title : "2014"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "green",
pointstrokeColor : "yellow",
data : [35,43,59,,31,50,66],
animationYAxis : [,,,,,,[0.4,0,0,0.35,0,1,0.04,1,1,0.04,0,0,0.04,1,1,0.04,0,0,0.04,1,1,0.04,0,0,0.01,1,1]],
title : "2013"
}
]
}
Example : http://fvancop.github.io/ChartNew.js/Samples/animationEasingStarEffect.html
Previous Chapter Previous Page Next Page Next Chapter Top of Page