div盒子的緩動函式封裝

1.2.  緩動動畫

動畫公式

leader = leader + step

勻速動畫公式

step = 定值

leader = leader + step

緩動動畫公式

step = ( target - leader ) / 10

leader = leader + step

緩動動畫的好處

他的移動是有盡頭的。不像基礎勻速運動那樣無限移動。

有非常逼真的緩動效果，實現的動畫效果更細膩。

如果不清除定時器，物體永遠跟著目標leader在移動。

@體驗緩動動畫

@緩動動畫改進

多次點選按鈕重複開啟定時器

永遠無法真正到達目標

到達目標後清理定時器

@緩動函式封裝

需求：能夠讓任意物件移動到指定位置

@筋斗雲案例

@獲取計算後樣式的方法

工作中我們經常需要獲取乙個盒子的最終樣式

比如 就要獲取未加定位的盒子的left屬性值

那麼如何到計算後的樣式屬性值呢：

w3cwindow.getcomputedstyle(元素,偽元素)["left"]

iediv.currentstyle.left或 div.current["left"]

第二個引數是偽元素，我們傳入null即可

@封裝獲採樣式屬性值的相容方法

需求：獲取任意物件的計算後的任意屬性

@封裝緩動框架（任意數值屬性）

@手風琴特效

@開機動畫

w3c

opacity:x;

x為0-1

ie 8

filter:alpha(opacity=x);

x為0-100

**如下：

1

doctype html
>
2<
html
>
3<
head 
lang
="en"
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style
>
7#demo 
14#demo2 
20style
>
21head
>
22<
body
>
23<
button 
id="btn"
>按鈕300
button
>
24<
div 
id="demo"
>
div>
25<
div 
id="demo2"
>
div>
26<
script
>
27var
btn 
=document.getelementbyid(
"btn");
28var
demo 
=document.getelementbyid(
"demo");
29btn.onclick 
=function
());
35//
animate(demo,);
36animate(demo,);37}
38varo =
43var
json =47
48//
想讓當前的函式，改變元素的任意多個屬性     width: 500  height 500
49function
animate(obj,json,fn)
else
if(key =="
zindex")
else
86if
(leader 
!=target)89}
90if
(flag)95}
96},15)
97}9899
//此函式可以獲得物件的任意屬性
100function
getstyle(obj,attr)
else
107}
108script
>
109body
>
110html
>

封裝緩動框架

function animate obj,json,fn else var step target leader 10 step step 0?math.ceil step math.floor step leader leader step 我們要給傳遞過來的屬性賦值 if k opacity e...

緩動函式與動畫

搬運 緩動函式,主要用在控制動畫上,它是乙個區間函式 用它來做動畫,實際上就是將這個函式離散化 比如在x軸上取100個點,計算得到f x 值 就是得到了這個動畫在這100步的變化過程 緩動函式需要四個引數 b 函式開始值 c 函式結束值 d 結束時間 實際上這裡並不是真正意義上的時間,而是離散時的取...

常見動畫的緩動函式

大多時候，我們的動畫都是線性變化的。例如，乙個點從0運動到1，假如中間有8個點，那就應該是0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8。但有的時候，我們需要一種非線性的變化。例如我們做一架飛機起飛，它的變化應該是從慢到快的。又比如乙個小球落地，它的軌跡應該是拋物線，而且還會彈起。要...