码迷,mamicode.com
首页 > 编程语言 > 详细

tweenjs缓动算法使用小实例

时间:2018-04-22 14:00:07      阅读:439      评论:0      收藏:0      [点我收藏+]

标签:body   使用   运动   webkit   red   cos   ram   --   ati   

这里的tweenjs不是依托于createjs的tewwnjs,而是一系列缓动算法集合。因为本身是算法,可以用在各个业务场景中,这也正是总结学习它的价值所在。tweenjs代码详情:

  1 /*
  2  * Tween.js
  3  * t: current time(当前时间);
  4  * b: beginning value(初始值);
  5  * c: change in value(变化量);
  6  * d: duration(持续时间)。
  7  * you can visit ‘http://easings.net/zh-cn‘ to get effect
  8 */
  9 var Tween = {
 10     Linear: function(t, b, c, d) { 
 11         return c * t / d + b; 
 12     },
 13     Quad: {
 14         easeIn: function(t, b, c, d) {
 15             return c * (t /= d) * t + b;
 16         },
 17         easeOut: function(t, b, c, d) {
 18             return -c *(t /= d)*(t-2) + b;
 19         },
 20         easeInOut: function(t, b, c, d) {
 21             if ((t /= d / 2) < 1) return c / 2 * t * t + b;
 22             return -c / 2 * ((--t) * (t-2) - 1) + b;
 23         }
 24     },
 25     Cubic: {
 26         easeIn: function(t, b, c, d) {
 27             return c * (t /= d) * t * t + b;
 28         },
 29         easeOut: function(t, b, c, d) {
 30             return c * ((t = t/d - 1) * t * t + 1) + b;
 31         },
 32         easeInOut: function(t, b, c, d) {
 33             if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
 34             return c / 2*((t -= 2) * t * t + 2) + b;
 35         }
 36     },
 37     Quart: {
 38         easeIn: function(t, b, c, d) {
 39             return c * (t /= d) * t * t*t + b;
 40         },
 41         easeOut: function(t, b, c, d) {
 42             return -c * ((t = t/d - 1) * t * t*t - 1) + b;
 43         },
 44         easeInOut: function(t, b, c, d) {
 45             if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
 46             return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
 47         }
 48     },
 49     Quint: {
 50         easeIn: function(t, b, c, d) {
 51             return c * (t /= d) * t * t * t * t + b;
 52         },
 53         easeOut: function(t, b, c, d) {
 54             return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
 55         },
 56         easeInOut: function(t, b, c, d) {
 57             if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
 58             return c / 2*((t -= 2) * t * t * t * t + 2) + b;
 59         }
 60     },
 61     Sine: {
 62         easeIn: function(t, b, c, d) {
 63             return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 64         },
 65         easeOut: function(t, b, c, d) {
 66             return c * Math.sin(t/d * (Math.PI/2)) + b;
 67         },
 68         easeInOut: function(t, b, c, d) {
 69             return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
 70         }
 71     },
 72     Expo: {
 73         easeIn: function(t, b, c, d) {
 74             return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 75         },
 76         easeOut: function(t, b, c, d) {
 77             return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 78         },
 79         easeInOut: function(t, b, c, d) {
 80             if (t==0) return b;
 81             if (t==d) return b+c;
 82             if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
 83             return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
 84         }
 85     },
 86     Circ: {
 87         easeIn: function(t, b, c, d) {
 88             return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
 89         },
 90         easeOut: function(t, b, c, d) {
 91             return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
 92         },
 93         easeInOut: function(t, b, c, d) {
 94             if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
 95             return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
 96         }
 97     },
 98     Elastic: {
 99         easeIn: function(t, b, c, d, a, p) {
100             var s;
101             if (t==0) return b;
102             if ((t /= d) == 1) return b + c;
103             if (typeof p == "undefined") p = d * .3;
104             if (!a || a < Math.abs(c)) {
105                 s = p / 4;
106                 a = c;
107             } else {
108                 s = p / (2 * Math.PI) * Math.asin(c / a);
109             }
110             return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
111         },
112         easeOut: function(t, b, c, d, a, p) {
113             var s;
114             if (t==0) return b;
115             if ((t /= d) == 1) return b + c;
116             if (typeof p == "undefined") p = d * .3;
117             if (!a || a < Math.abs(c)) {
118                 a = c; 
119                 s = p / 4;
120             } else {
121                 s = p/(2*Math.PI) * Math.asin(c/a);
122             }
123             return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
124         },
125         easeInOut: function(t, b, c, d, a, p) {
126             var s;
127             if (t==0) return b;
128             if ((t /= d / 2) == 2) return b+c;
129             if (typeof p == "undefined") p = d * (.3 * 1.5);
130             if (!a || a < Math.abs(c)) {
131                 a = c; 
132                 s = p / 4;
133             } else {
134                 s = p / (2  *Math.PI) * Math.asin(c / a);
135             }
136             if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
137             return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
138         }
139     },
140     Back: {
141         easeIn: function(t, b, c, d, s) {
142             if (typeof s == "undefined") s = 1.70158;
143             return c * (t /= d) * t * ((s + 1) * t - s) + b;
144         },
145         easeOut: function(t, b, c, d, s) {
146             if (typeof s == "undefined") s = 1.70158;
147             return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
148         },
149         easeInOut: function(t, b, c, d, s) {
150             if (typeof s == "undefined") s = 1.70158; 
151             if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
152             return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
153         }
154     },
155     Bounce: {
156         easeIn: function(t, b, c, d) {
157             return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
158         },
159         easeOut: function(t, b, c, d) {
160             if ((t /= d) < (1 / 2.75)) {
161                 return c * (7.5625 * t * t) + b;
162             } else if (t < (2 / 2.75)) {
163                 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
164             } else if (t < (2.5 / 2.75)) {
165                 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
166             } else {
167                 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
168             }
169         },
170         easeInOut: function(t, b, c, d) {
171             if (t < d / 2) {
172                 return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
173             } else {
174                 return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
175             }
176         }
177     }
178 }
179 Math.tween = Tween;

具体每种算法的操作实例,可以看大神张鑫旭的博客实例:http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html

当然,以上这些算法仅仅是一个状态,需要配合时间上的变化,才能实现缓动,这里使用的是requestAnimationFrame,具体代码好吧,也是拿来主义

 1 (function() {
 2     var lastTime = 0;
 3     var vendors = [ms, moz, webkit, o];
 4     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 5         window.requestAnimationFrame = window[vendors[x]+RequestAnimationFrame];
 6         window.cancelAnimationFrame = window[vendors[x]+CancelAnimationFrame] 
 7                                    || window[vendors[x]+CancelRequestAnimationFrame];
 8     }
 9  
10     if (!window.requestAnimationFrame)
11         window.requestAnimationFrame = function(callback, element) {
12             var currTime = new Date().getTime();
13             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
14             var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
15               timeToCall);
16             lastTime = currTime + timeToCall;
17             return id;
18         };
19  
20     if (!window.cancelAnimationFrame)
21         window.cancelAnimationFrame = function(id) {
22             clearTimeout(id);
23         };
24 }());

最后是简单的实例应用,很简单,

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>使用tweenjs</title>
 7     <style type="text/css">
 8     div {
 9         width: 100px;
10         height: 100px;
11         border: 1px solid red;
12         text-align: center;
13         line-height: 100px;
14         position: absolute;
15     }
16     </style>
17 </head>
18 
19 <body>
20     <div id="test">
21         这是测试
22     </div>
23     <script type="text/javascript" src="RequestAnimationFrame.js"></script>
24     <script type="text/javascript" src="tween.js"></script>
25     <script type="text/javascript">
26         var DOM=document.getElementById("test");
27     var t = 0,//开始时间
28         b = 0,//开始位置
29         c = 1000,//变化值
30         d = 100;//持续时间
31     var step = function() {
32         var value = Tween.Bounce.easeOut(t, b, c, d);
33         DOM.style.left = value + px;
34        
35         t++;
36         if (t <= d) {
37             // 继续运动
38             requestAnimationFrame(step);
39         } else {
40             // 动画结束
41         }
42     };
43     step();
44     </script>
45 </body>
46 
47 </html>

具体使用中,需要参数以及控制好结束条件即可。

tweenjs缓动算法使用小实例

标签:body   使用   运动   webkit   red   cos   ram   --   ati   

原文地址:https://www.cnblogs.com/zhensg123/p/8872210.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!