canvas,css3,svg缓动效果

没有加速度的线性运动

数学公式为

f(x)=x

js实现如下

AnimationTimer.makeLinear = function () { return function (percentComplete) {return percentComplete; };};

逐渐加速的缓入运动

数学公式为

f(x)=x2

js实现如下

AnimationTimer.makeEaseIn = function (strength) { return function (percentComplete) {return Math.pow(percentComplete, strength*2); };};

逐渐减速的缓出运动

数学公式为

f(x)=1-(1-x)2

js实现如下

AnimationTimer.makeEaseOut = function (strength) { return function (percentComplete) {return 1 - Math.pow(1 - percentComplete, strength*2); };};

缓入缓出运动

数学公式为

f(x)=x-sin(x*2π)/(2π)

js实现如下

AnimationTimer.makeEaseInOut = function () { return function (percentComplete) {return percentComplete - Math.sin(percentComplete*2*Math.PI) / (2*Math.PI); };};

弹簧运动

数学公式为

f(x)=(1-cos(x*Npasses * π) * (1-π))+x

Npassed表示运动物体穿越中轴的次数。

js实现如下

AnimationTimer.makeElastic = function (passes) { passes = passes || 3; return function (percentComplete) { return ((1-Math.cos(percentComplete * Math.PI * passes)) * (1 - percentComplete)) + percentComplete; };};

弹跳运动

Nbounces表示运动物体被弹起的总次数，

弹起的次数为偶数的时候，数学公式为：

f(x)=(1=cos(x * Nbounces* π) * (1-π))+x

弹起的次数为奇数的时候，数学公式为：

f(x)=2-(((1-cos(x * π * Nbounces)) * (1-x)+x)

js实现如下

AnimationTimer.makeBounce = function (bounces) { var fn = AnimationTimer.makeElastic(bounces); return function (percentComplete) {percentComplete = fn(percentComplete);return percentComplete <= 1 ? percentComplete : 2-percentComplete; }; };

css3缓动效果

css3默认提供了几种缓动效果，分别是linear,ease,ease-in,ease-out,ease-in-out。

JS Bin

除了上面的几种效果，可以通过transform和animation扩展自己需要的效果。animate.css提供了更多的效果支持，比如弹跳运动的实现如下

@keyframes bounce {0%, 20%, 53%, 80%, 100% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}40%, 43% {-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -30px, 0);transform: translate3d(0, -30px, 0);}70% {-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);}90% {-webkit-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0);}}.bounce {-webkit-animation-name: bounce;animation-name: bounce;-webkit-transform-origin: center bottom;-ms-transform-origin: center bottom;transform-origin: center bottom;}

专业的网站建设公司，深正互联，如您有网站营销需求，请您关注我们，或者致电13828884598