国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

tween.js緩動(補間動畫)

chengjianhua / 1308人閱讀

摘要:首先引入一個概念就補間動畫做動畫時會用到類,利用它可以做很多動畫效果,例如緩動彈簧等等。代表的就是最后一幀減去初始值就是變化量,代表最后一幀的結束也是動畫的結束。

一、理解tween.js

如果看到上面的已經理解了,可以跳過下面的部分.下面為對Tween.js的解釋 下面就介紹如何使用這個Tween了,首先b、c、d三個參數(即初始值,變化量,持續時間)在緩動開始前,是需要先確定好的。 首先引入一個概念就補間動畫 Flash做動畫時會用到Tween類,利用它可以做很多動畫效果,例如緩動、彈簧等等。 tween.js在Flash中可以解釋為補間動畫. 那么問題來了,什么是補間動畫呢?

相信學過Flash的都知道補間動畫是flash主要的非常重要的表現手段之一.補間動畫有動作補間動畫與形狀補間動畫兩種,但是在js中卻不需要了解這么多. 好了,廢話不多說,先看看百度百科關于補間動畫給出的定義: 補間動畫:做flash動畫時,在兩個關鍵幀中間需要做“補間動畫”,才能實現圖畫的運動; 插入補間動畫后兩個關鍵幀之間的插補幀是由計算機自動運算而得到的

那么什么是關鍵幀呢? 舉個栗子: 先科普一下,平常所看的電影,動畫都是24幀的,24幀為一秒.在人眼可以捕捉的范圍內.可以想象兩個點之間有有22個點,形成一條直線或者曲線.而每一個點就代表一幀,幀——就是動畫中最小單位的單幅影像畫面,而單幅影像畫面就可以看做是一個對象(一切皆對象,除去值類型)了.而這條線就代表對象的運動軌跡.

二、四個參數

t: current time-->代表第一個點,也就是第一幀,也就是一個動畫開始的地方。

b: beginning value-->代表初始值,也就是開始量,我們看電影或者動畫一般都不會看序幕把,那么跳過開頭部分,選擇第一幀和最后一幀之間你要開始看位置,而此位置就是初始值。

c: change in value-->代表的就是最后一幀減去初始值就是變化量,

d: duration-->代表最后一幀,1s的結束,也是動畫的結束。

tween.js的使用 1.下載 2.引入 3.使用tween.js語法

Tween.緩動函數名.緩動效果名(t,b,c,d);

注意:當開始步數增加到與結束步數相等時,整個運動結束. 注注意:只有當t增加到與d相等時才會結束運動;如果不等,運動不會停止.

三、tween文件代碼
/*
 * Tween.js
 * t: current time(當前時間);
 * b: beginning value(初始值);
 * c: change in value(變化量);
 * d: duration(持續時間)。
*/
var Tween = {
    Linear: function(t, b, c, d) { //勻速
        return c * t / d + b; 
    },
    Quad: { //二次方緩動效果
        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: { //三次方緩動效果
        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: { //四次方緩動效果
        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: { //五次方緩動效果
        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: { //正弦緩動效果
        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: { //指數緩動效果
        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: { //圓形緩動函數
        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: { //指數衰減正弦曲線緩動函數
        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: { //超過范圍的三次方的緩動函數
        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: { //指數衰減的反彈曲線緩動函數
        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;
四、舉個栗子



    
        
        
        
        
        
    

    
        
五、個人體會

tween的優勢在于tween實現效果是依據算法,不是某種語言的語法,因此可以運用的地方很廣泛,一次學習終身受益。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107432.html

相關文章

  • 學習 PixiJS補間動畫

    摘要:方法的參數如下名稱默認值描述需要移動的精靈貝塞爾曲線的坐標點的數組補間需要的幀數,也就是動畫應該持續多長時間緩動類型用于確定精靈是否應在補間的起點和終點之間來回移動。 說明 補間動畫指的是,我們可以通過為精靈的位置、比例、透明度,等屬性,設置開始值和結束值,制作動畫,動畫中間需要的部分由軟件自動計算填充。 Pixi 沒有內置補間引擎,但是你可以使用很多很好的開源的補間庫,比如 Twee...

    levius 評論0 收藏0
  • JS動畫緩動tween.js

    摘要:動畫運動算法線性勻速運動效果二次方的緩動三次方的緩動四次方的緩動五次方的緩動正弦曲線的緩動指數曲線的緩動圓形曲線的緩動指數衰減的正弦曲線緩動超過范圍的三次方緩動指數衰減的反彈緩動。 requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnima...

    wangxinarhat 評論0 收藏0
  • JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現

    摘要:注意如果想得到連貫的逐幀動畫,函數中必須重新調用。如果你想做逐幀動畫的時候,你應該用這個方法。這個回調函數會收到一個參數,這個類型的參數指示當前時間距離開始觸發的回調的時間。 window.requestAnimationFrame 概述 window.requestAnimationFrame()這個方法是用來在頁面重繪之前,通知瀏覽器調用一個指定的函數,以滿足開發者操作動畫的需求。...

    Ilikewhite 評論0 收藏0
  • JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現

    摘要:注意如果想得到連貫的逐幀動畫,函數中必須重新調用。如果你想做逐幀動畫的時候,你應該用這個方法。這個回調函數會收到一個參數,這個類型的參數指示當前時間距離開始觸發的回調的時間。 window.requestAnimationFrame 概述 window.requestAnimationFrame()這個方法是用來在頁面重繪之前,通知瀏覽器調用一個指定的函數,以滿足開發者操作動畫的需求。...

    codergarden 評論0 收藏0
  • JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現

    摘要:注意如果想得到連貫的逐幀動畫,函數中必須重新調用。如果你想做逐幀動畫的時候,你應該用這個方法。這個回調函數會收到一個參數,這個類型的參數指示當前時間距離開始觸發的回調的時間。 window.requestAnimationFrame 概述 window.requestAnimationFrame()這個方法是用來在頁面重繪之前,通知瀏覽器調用一個指定的函數,以滿足開發者操作動畫的需求。...

    zorpan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<