canvas,css3,svg緩動效果

2017-03-06 1504 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

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾