一、理解tween.js
如果看到上面的已經(jīng)理解了,可以跳過(guò)下面的部分.下面為對(duì)Tween.js的解釋 下面就介紹如何使用這個(gè)Tween了，首先b、c、d三個(gè)參數(shù)（即初始值，變化量，持續(xù)時(shí)間）在緩動(dòng)開(kāi)始前，是需要先確定好的。 首先引入一個(gè)概念就補(bǔ)間動(dòng)畫(huà) Flash做動(dòng)畫(huà)時(shí)會(huì)用到Tween類(lèi)，利用它可以做很多動(dòng)畫(huà)效果，例如緩動(dòng)、彈簧等等。 tween.js在Flash中可以解釋為補(bǔ)間動(dòng)畫(huà). 那么問(wèn)題來(lái)了,什么是補(bǔ)間動(dòng)畫(huà)呢?
相信學(xué)過(guò)Flash的都知道補(bǔ)間動(dòng)畫(huà)是flash主要的非常重要的表現(xiàn)手段之一.補(bǔ)間動(dòng)畫(huà)有動(dòng)作補(bǔ)間動(dòng)畫(huà)與形狀補(bǔ)間動(dòng)畫(huà)兩種,但是在js中卻不需要了解這么多. 好了,廢話不多說(shuō),先看看百度百科關(guān)于補(bǔ)間動(dòng)畫(huà)給出的定義: 補(bǔ)間動(dòng)畫(huà)：做flash動(dòng)畫(huà)時(shí)，在兩個(gè)關(guān)鍵幀中間需要做“補(bǔ)間動(dòng)畫(huà)”，才能實(shí)現(xiàn)圖畫(huà)的運(yùn)動(dòng)； 插入補(bǔ)間動(dòng)畫(huà)后兩個(gè)關(guān)鍵幀之間的插補(bǔ)幀是由計(jì)算機(jī)自動(dòng)運(yùn)算而得到的
那么什么是關(guān)鍵幀呢? 舉個(gè)栗子: 先科普一下,平常所看的電影,動(dòng)畫(huà)都是24幀的,24幀為一秒.在人眼可以捕捉的范圍內(nèi).可以想象兩個(gè)點(diǎn)之間有有22個(gè)點(diǎn),形成一條直線或者曲線.而每一個(gè)點(diǎn)就代表一幀,幀——就是動(dòng)畫(huà)中最小單位的單幅影像畫(huà)面,而單幅影像畫(huà)面就可以看做是一個(gè)對(duì)象(一切皆對(duì)象,除去值類(lèi)型)了.而這條線就代表對(duì)象的運(yùn)動(dòng)軌跡.
二、四個(gè)參數(shù)
tween.js的使用 1.下載 2.引入 3.使用tween.js語(yǔ)法
Tween.緩動(dòng)函數(shù)名.緩動(dòng)效果名(t,b,c,d);
注意:當(dāng)開(kāi)始步數(shù)增加到與結(jié)束步數(shù)相等時(shí),整個(gè)運(yùn)動(dòng)結(jié)束. 注注意:只有當(dāng)t增加到與d相等時(shí)才會(huì)結(jié)束運(yùn)動(dòng);如果不等,運(yùn)動(dòng)不會(huì)停止.
三、tween文件代碼
/* * Tween.js * t: current time（當(dāng)前時(shí)間）； * b: beginning value（初始值）； * c: change in value（變化量）； * d: duration（持續(xù)時(shí)間）。*/var Tween = { Linear: function(t, b, c, d) { //勻速 return c * t / d + b; }, Quad: { //二次方緩動(dòng)效果 easeIn: function(t, b, c, d) { return c * (t /= d) * t + b; }, easeOut: function(t, b, c, d) { return -c *(t /= d)*(t-2) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t-2) - 1) + b; } }, Cubic: { //三次方緩動(dòng)效果 easeIn: function(t, b, c, d) { return c * (t /= d) * t * t + b; }, easeOut: function(t, b, c, d) { return c * ((t = t/d - 1) * t * t + 1) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t*t + b; return c / 2*((t -= 2) * t * t + 2) + b; } }, Quart: { //四次方緩動(dòng)效果 easeIn: function(t, b, c, d) { return c * (t /= d) * t * t*t + b; }, easeOut: function(t, b, c, d) { return -c * ((t = t/d - 1) * t * t*t - 1) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t*t - 2) + b; } }, Quint: { //五次方緩動(dòng)效果 easeIn: function(t, b, c, d) { return c * (t /= d) * t * t * t * t + b; }, easeOut: function(t, b, c, d) { return c * ((t = t/d - 1) * t * t * t * t + 1) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; return c / 2*((t -= 2) * t * t * t * t + 2) + b; } }, Sine: { //正弦緩動(dòng)效果 easeIn: function(t, b, c, d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t, b, c, d) { return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b; } }, Expo: { //指數(shù)緩動(dòng)效果 easeIn: function(t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOut: function(t, b, c, d) { return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOut: function(t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { //圓形緩動(dòng)函數(shù) easeIn: function(t, b, c, d) { return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; }, easeOut: function(t, b, c, d) { return c * Math.sqrt(1 - (t = t/d - 1) * t) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; } }, Elastic: { //指數(shù)衰減正弦曲線緩動(dòng)函數(shù) easeIn: function(t, b, c, d, a, p) { //加速 var s; if (t==0) return b; if ((t /= d) == 1) return b + c; if (typeof p == "undefined") p = d * .3; if (!a || a < Math.abs(c)) { s = p / 4; a = c; } else { s = p / (2 * Math.PI) * Math.asin(c / a); } return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; }, easeOut: function(t, b, c, d, a, p) { //減速 var s; if (t==0) return b; if ((t /= d) == 1) return b + c; if (typeof p == "undefined") p = d * .3; if (!a || a < Math.abs(c)) { a = c; s = p / 4; } else { s = p/(2*Math.PI) * Math.asin(c/a); } return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); }, easeInOut: function(t, b, c, d, a, p) { //先加速后減速 var s; if (t==0) return b; if ((t /= d / 2) == 2) return b+c; if (typeof p == "undefined") p = d * (.3 * 1.5); if (!a || a < Math.abs(c)) { a = c; s = p / 4; } else { s = p / (2 *Math.PI) * Math.asin(c / a); } if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b; } }, Back: { //超過(guò)范圍的三次方的緩動(dòng)函數(shù) easeIn: function(t, b, c, d, s) { if (typeof s == "undefined") s = 1.70158; return c * (t /= d) * t * ((s + 1) * t - s) + b; }, easeOut: function(t, b, c, d, s) { if (typeof s == "undefined") s = 1.70158; return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b; }, easeInOut: function(t, b, c, d, s) { if (typeof s == "undefined") s = 1.70158; if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; } }, Bounce: { //指數(shù)衰減的反彈曲線緩動(dòng)函數(shù) easeIn: function(t, b, c, d) { return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t, b, c, d) { if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; } }, easeInOut: function(t, b, c, d) { if (t < d / 2) { return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b; } else { return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; } } }}Math.tween = Tween;四、舉個(gè)栗子
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="Tween/tween.js"></script> <style> *{margin: 0;padding: 0;} .out{width: 800px;height: 500px;background: #e5e5e5;position: relative;padding: 20px;text-align: center;} .inner{width: 50px;height: 50px;border-radius: 50%;background: #FF0000; position: absolute;left: 50px;top: 50px;} </style> </head> <body> <div id="app" class="out"> <div class="inner" id="ball"></div> <button id="start" @click="start()">start</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { t: 0, b: 50, c: 500, d: 1500, }, methods:{ start(){ var t = this.t; const b = this.b; const c = this.c; const d = this.d; const setInt = setInterval(()=>{ t++; console.log(t) if(t==300){clearInterval(setInt)} console.log(t); const ballLeft = Tween.Linear(t,b,c,d)+"px"; ball.style.left = ballLeft; },20) } } }) </script></html>五、個(gè)人體會(huì)
tween的優(yōu)勢(shì)在于tween實(shí)現(xiàn)效果是依據(jù)算法，不是某種語(yǔ)言的語(yǔ)法，因此可以運(yùn)用的地方很廣泛，一次學(xué)習(xí)終身受益。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
