動畫就是以一定的頻率去改變元素的屬性,使之運動起來,最普通的動畫就是勻速的動畫,每次增加固定的值。緩動就是用來修改每次增加的值,讓其按照不規(guī)律的方式增加,實現(xiàn)動畫的變化。
程序?qū)崿F(xiàn)緩動
沒有加速度的線性運動
數(shù)學(xué)公式為:f(x)=x, 代碼如下:
AnimationTimer.makeLinear = function () {
return function (percentComplete) {
return percentComplete;
};
};````
逐漸加速的緩入運動
數(shù)學(xué)公式為:f(x)=x^2, 代碼如下:
AnimationTimer.makeEaseIn = function (strength) {
return function (percentComplete) {
return Math.pow(percentComplete, strength*2);
};
};````
逐漸減速的緩出運動
數(shù)學(xué)公式為:f(x)=1-(1-x)^2, 代碼如下:
AnimationTimer.makeEaseOut = function (strength) {
return function (percentComplete) {
return 1 - Math.pow(1 - percentComplete, strength*2);
};
};````
緩入緩出運動
數(shù)學(xué)公式為:f(x)=x-sin(x*2π)/(2π), 代碼如下:
AnimationTimer.makeEaseInOut = function () {
return function (percentComplete) {
return percentComplete - Math.sin(percentComplete2Math.PI) / (2*Math.PI);
};
};````
彈簧運動
數(shù)學(xué)公式為:f(x)=(1-cos(x*Npasses * π) * (1-π))+x, Npassed表示運動物體穿越中軸的次數(shù)。 代碼如下:
AnimationTimer.makeElastic = function (passes) {
passes = passes || 3;
return function (percentComplete) {
return ((1-Math.cos(percentComplete * Math.PI * passes)) *
(1 - percentComplete)) + percentComplete;
};
};
彈跳運動
Nbounces表示運動物體被彈起的總次數(shù),彈起的次數(shù)為偶數(shù)的時候,數(shù)學(xué)公式為:
f(x)=(1=cos(x Nbounces π) * (1-π))+x
彈起的次數(shù)為奇數(shù)的時候,數(shù)學(xué)公式為:
f(x)=2-(((1-cos(x π Nbounces)) * (1-x)+x)
代碼如下:
AnimationTimer.makeBounce = function (bounces) {
var fn = AnimationTimer.makeElastic(bounces);
return function (percentComplete) {
percentComplete = fn(percentComplete);
return percentComplete <= 1 ? percentComplete : 2-percentComplete;
};
};
```