<code id="ymukc"><xmp id="ymukc">

JavaScript動畫 —— 彈動動畫

ScaNIV的頭像 ScaNIV 0 2016-03-04 14:52 1

 基本信息

× 1   

瀏覽數: 25445

分享時間: 2 年 前

1

緩動和彈動都是那對象從已有位置移動到目標位置的方法。但是緩動是指物體滑動到目標點就停下來;而彈動是指物體來回反彈一段時間后,最終停在目標點的運動。

彈動,大多數時候,物體的加速度與它到目標點的距離是成比例的。

來看一個在現實中彈動的例子:在橡皮筋的一頭系上一個小球,另一頭固定起來。小球的目標點就是它初始靜止懸空的那個位置點。將小球拉開一小段距離然后松開,剛松手那一瞬間,它的速度為0,但是橡皮筋給它施加了外力,把它拉向目標點;如果小球盡可能地拉遠,橡皮筋對它施加的外力就會變得越大。松手后,小球會急速飛過目標點。但是,當它飛過目標點以后,橡皮筋又把它往回拉,使其加速度減小,它飛得越遠,橡皮筋施加的力就越大;最終,它的速度降為0,又掉頭往回飛。由于受到摩擦力的影響,反復幾次后,小球的運動逐漸慢下來,停在目標點上。

一. 一維坐標上的彈動

1 . 首先需要一個變量存儲彈性比例系數,取值為0~1,較大的彈性比例常熟會表現出較硬的彈簧效果。

var spring = 0.1,
    targetX = canvas.width / 2,
    vx = 0;

2 . 接下來,計算小球到目標點的距離

var dx = targetX - ball.x;

3 . 計算加速度。在這個例子中,我們設置小球的加速度與距離成正比,即加速度 = 小球到目標點的距離 × 彈性比例系數。

var ax = dx * spring;

4 . 把加速度累加到速度上,然后把速度累加到小球的當前位置上:

vx += ax;
ball.x += vx;

在開始寫代碼前,先模擬一下整個過程,假設ball.x = 0,初速度vx = 0,目標點的位置targetX = 100,彈性比例系數spring = 0.1。下面是執行過程:

(1) 第一輪,加速度ax = (100 - 0) * 0.1 = 10,把ax加載vx上得速度vx = 10,把vx加在小球的當前位置上得到ball.x = 10;

(2) 第二輪,加速度ax = (100 - ball.x) * 0.1 = 9,由此得到vx = 10 + 9 = 19,ball.x = 10 + 19 = 29;

(3) 第三輪,ax = 7.1, vx = 26.1,ball.x = 55.1;

(4) 第四輪, ax = 4.49,vx = 30.59,ball.x = 85.69;

(5) 第五輪, ax = 1.431,vx = 44.9,ball.x = 130.69:

(6) 第六輪,ax = -3.069,vx = 41.831,ball.x = 88.859;

... ...

隨著小球一幀一幀地靠近目標,加速度變得越來越小,但是速度一直在增加;

五輪過后,小球越過了目標點后,加速度變成反向加速度,并且逐漸增加,導致速度逐漸減小,最終速度為0后,反向加速度達到極大值。此時速度將變成反向速度。

HTML代碼如下:

<canvas id="canvas" width="600" height="100"></canvas>

JavaScript代碼如下:

// requestAnimationFrame的兼容性寫法
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
})();

// cancelAnimationFrame的兼容性寫法
window.cancelAnimationFrame = (function () {
    return window.cancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.mozCancelAnimationFrame ||
            window.oCancelAnimationFrame ||
            function (timer) {
                window.clearTimeout(timer);
            };
})();

// 創建畫球函數
function Ball() {
    this.x = 0;
    this.y = 0;
    this.radius = 10;
    this.fillStyle = "#f85455";
    this.draw = function(cxt) {
        cxt.fillStyle = this.fillStyle;
        cxt.beginPath();
        cxt.arc(this.x, this.y, this.radius,  0, 2 * Math.PI, true);
        cxt.closePath();
        cxt.fill();
    }
}

var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        ball = new Ball(),
        spring = 0.1,
        targetX = canvas.width / 2,
        vx = 0;
ball.x = 20;
ball.y = 20;

// 緩動動畫函數
var animRequest = null;
(function drawFrame() {
    animRequest = window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 小球當前位置與目標點的距離
    var dx = targetX - ball.x;
    // 小球的加速度
    var ax = dx * spring;
    // 小球的速度
    vx += ax;
    // 計算出小球當前的位置
    ball.x += vx;
    ball.draw(context);
})();

實現的效果如下:

See the Pen <a _>EVNWqL</a> by dengzhirong (<a _>@dengzhirong</a>) on <a _>CodePen</a>.

但是!但是,問題是小球永遠都不會停下來,因為小球的擺動幅度不變。而我們希望實現的例子中,小球的彈動會越來越慢,直到停止下來。在實際生活中,小球的彈動勢能大多是由于摩擦力的存在而轉化成內能,最后使小球停下。所以,在這里,我們也模擬摩擦力,創建摩擦力系數friction,取值范圍為0~1。

var friction = 0.95;

然后把vx * friction,得到當前的速度vx。

vx * = friction;

最終效果如下:

See the Pen <a _>GpNmRR</a> by dengzhirong (<a _>@dengzhirong</a>) on <a _>CodePen</a>.

【備注:請按F5刷新,或者點擊“Result”面板上懸浮的"Return"按鈕后查看效果】

二. 二維坐標上的彈動

上面一個例子是讓小球在x軸上運動。如果我們想讓小球同時在x軸和y軸上運動,就需要引入二維坐標上的彈動。事實上很簡單,只需要把目標點、速度和加速度擴展到二維坐標系上即可。

代碼與上面例子雷同不再重復,直接上效果:

See the Pen <a _>ojYWgm</a> by dengzhirong (<a _>@dengzhirong</a>) on <a _>CodePen</a>.

【備注:請按F5刷新,或者點擊“Result”面板上懸浮的"Return"按鈕后查看效果】

與前一個例子唯一不同的是增加了一條y軸。但是現在小球看起來仍然像是一維運動,雖然小球同時在x軸和y軸上運動,但它仍然是一條直線。原因是它的初速度為0,也僅受一個把它拉向目標點的外力,所以它沿著直線運動。為了動畫更豐富一點,可以嘗試修改vx、vy或者不同x、y軸的friction值。自己嘗試一下吧。

三. 目標點移動的彈動

目標點移動,我們很容易就想到把鼠標當成目標點。在上一篇介紹緩動動畫時,有一個小球跟隨鼠標的緩動動畫。讓小球跟隨鼠標彈動同樣很簡單,只要把targetX和targetY替換為當前坐標即可。效果很炫酷,但是代碼基本沒變。只要在前面的例子中改動如下兩行:

var dx = targetX - ball.x;
var dy = targetY - ball.y;

修改為:

var dx = mouse.x - ball.x;
var dy = mouse.y - ball.y;

當然,我們還需要寫一個獲得當前鼠標位置的函數,可以參考我寫的博文《JavaScript動畫詳解(一) —— 循環與事件監聽

完整代碼如下:

HTML代碼:

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript代碼:

// requestAnimationFrame的兼容性寫法
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
})();

// cancelAnimationFrame的兼容性寫法
window.cancelAnimationFrame = (function () {
    return window.cancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.mozCancelAnimationFrame ||
            window.oCancelAnimationFrame ||
            function (timer) {
                window.clearTimeout(timer);
            };
})();

// 獲得當前鼠標位置
function getMouse(ev) {
    var mouse = {
        x: 0,
        y: 0
    };
    var event = ev || window.event;
    if(event.pageX || event.pageY) {
        x = event.x;
        y = event.y;
    }else {
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        x = event.clientX + scrollLeft;
        y = event.clientY + scrollTop;
    }
    mouse.x = x;
    mouse.y = y;

    return mouse;
}

// 創建畫球函數
function Ball() {
    this.x = 0;
    this.y = 0;
    this.radius = 10;
    this.fillStyle = "#f85455";
    this.draw = function(cxt) {
        cxt.fillStyle = this.fillStyle;
        cxt.beginPath();
        cxt.arc(this.x, this.y, this.radius,  0, 2 * Math.PI, true);
        cxt.closePath();
        cxt.fill();
    }
}

var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        ball = new Ball(),
        spring = 0.05,
        vx = 0,
        vy = 0,
        targetX = 0,
        targetY = 0,
        friction = 0.95;
ball.x = 20;
ball.y = 20;
var mouse = {x: 0, y: 0};

canvas.addEventListener("mousemove", function(ev) {
    mouse = getMouse(ev);
    targetX = mouse.x;
    targetY = mouse.y;
    console.log(targetX + " , " + targetY);
}, false);
// 緩動動畫函數
var animRequest = null;
(function drawFrame() {
    animRequest = window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 小球當前位置與目標點的距離
    var dx = targetX - ball.x;
    var dy = targetY - ball.y;
    // 小球的加速度
    var ax = dx * spring;
    var ay = dy * spring;
    // 小球的速度
    vx += ax;
    vy += ay;
    vx *= friction;
    vy *= friction;
    // 計算出小球當前的位置
    ball.x += vx;
    ball.y += vy;
    ball.draw(context);
})();

效果如下:

See the Pen <a _>LpbyGq</a> by dengzhirong (<a _>@dengzhirong</a>) on <a _>CodePen</a>.

【備注:把鼠標移上去試試~】

好吧,上面這個例子不夠帶勁兒,希望使小球看起來像是栓在橡皮筋上,此時只要在上面的基礎上再小球圓心與當前鼠標位置畫線即可。

context.beginPath();
context.strokeStyle = "#71A4AD";
context.moveTo(ball.x, ball.y);
context.lineTo(mouse.x, mouse.y);
context.stroke();

效果如下:

See the Pen <a _>NGbjRd</a> by dengzhirong (<a _>@dengzhirong</a>) on <a _>CodePen</a>.

四. 總結

彈動和緩動非常類似,都是使用循環函數逐幀繪制從當前位置到目標位置的運動效果。不同的是緩動是指速度與距離成比例,而彈動是加速度與距離成比例關系。但是要模擬出更加真實的彈動,可能需要加入類似摩擦力系數的因子,把速度逐漸降下,直到停止運動。

相關文章:

1 . 《JavaScript動畫詳解(二) —— 緩動動畫

2 . 《JavaScript動畫詳解(一) —— 循環與事件監聽


12 [下一頁]

  • zft_2501的頭像 zft_2501 2016-09-14 16:24 代碼數:0

    get

  • cixexey的頭像 cixexey 2018-05-21 17:42 代碼數:0

    I really appreciate the kind of topics you post here. Thanks for sharing us a great information that is actually helpful. Good day! Colorado SEO services

  • cixexey的頭像 cixexey 2018-05-22 18:20 代碼數:0

    You know your projects stand out of the herd. There is something special about them. It seems to me all of them are really brilliant! Read more

  • banjue的頭像 banjue 2017-04-28 16:49 代碼數:0

    學到了

  • cixexey的頭像 cixexey 2018-05-23 18:49 代碼數:0

    Thanks for your insight for your fantastic posting. I’m glad I have taken the time to see this.

    moving companies

  • cixexey的頭像 cixexey 2018-05-23 20:10 代碼數:0

    I learn some new stuff from it too, thanks for sharing your information.Woodworking Sanders

  • lisa0221的頭像 lisa0221 2017-05-17 15:10 代碼數:0

    get!!

  • cixexey的頭像 cixexey 2018-05-26 20:44 代碼數:0

    The post is written in very a good manner and it contains many useful information for me.

    invisalign near me

  • cixexey的頭像 cixexey 2018-05-26 22:54 代碼數:0

    The post is written in very a good manner and it contains many useful information for me.

    invisalign near me

  • cixexey的頭像 cixexey 2018-05-26 22:57 代碼數:0

    The post is written in very a good manner and it contains many useful information for me.

    invisalign near me

您的評論:

  
六合特码资料
<code id="ymukc"><xmp id="ymukc">
<code id="ymukc"><xmp id="ymukc">