分享一個即插即用的私藏緩動動畫JS小算法

二、即插即用的緩動小算法

原理如下:

假設要從數值A變化到數值B,如果是線性運動,則每次移動距離是一樣;如果是緩動,每次移動距離不一樣。那如何才能不一樣呢?很簡單,按比例移動就可以。

例如:每次移動剩餘距離的一半。

對吧,超容易理解的。

比方說:你和初戀之間距離是64,每秒移動一半,則,你們之間的距離下一秒就是32, 再下一秒就是16,然後8,然後4,然後2,然後1,然後……你們就在一起了。你們在一起的這個過程就是一個典型的先快後慢的緩動運動過程,如下示意圖:

位置移動標註示意圖

用一個簡單的公式表示就是:

A = A + (B - A) / 2

翻譯一下就是:

我下一秒的位置 = 現在位置 + 現在和初戀之間距離的一半

是不是很好理解。

原文鏈接:http://www.zhangxinxu.com/wordpress/2017/01/share-a-animation-algorithm-js/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章