canvas,css3,svg缓动效果

2017-03-06 12:32:00 3886 6 编辑:深圳网站建设 来源:互联网

没有加速度的线性运动

数学公式为

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

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通