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

2021-09-20 14:56:20 字數 376 閱讀 8251

原理如下:

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

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

對吧,超容易理解的。

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

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

a = a + (b - a) / 2
翻譯一下就是:

我下一秒的位置 = 現在位置 + 現在和初戀之間距離的一半
是不是很好理解。

如何用js寫乙個有滑動動畫的切換table

在不久前有個h5專案上遇見乙個需求需要寫乙個tab底部條下劃線滑動效果的功能,特在此記錄一下。其實原理非常簡單,底部紅線和父級相對定位,改變紅線的left值就能做到了。要動畫效果的話底部紅線的css樣式加上transition動畫就可以了。下面我們上 css部分 body,html tab tab ...

乙個聖誕動畫的實現

看下面的例子 test.c include main char str i like linux i advices you jion in the linux world printf s n str exit 0 使用gcc編譯 輸入gcc c test.c得到目標檔案test.o。c命令表示對...

WPF乙個下雪的動畫

wpf乙個下雪的動畫,呼叫startsnowing方法,傳canvas面板會在指定面板內展示動畫,目前缺點就是滑鼠會一直處於載入中狀態。直接貼 三種雪花樣式,下降加旋轉動畫 void startsnowing canvas panel break case 1 pack new packiconma...