單元素的動畫
1 .傳入animation對象這個參數(shù)瞄桨,作為動畫的開始參數(shù)
animation屬性
1 .所有和動畫有關(guān)的樣式都可以操作
動畫基本參數(shù)術(shù)語說明
1 .width:100 從當(dāng)前元素的大小變化為100px
2 .maxWidth:100 元素當(dāng)前最大寬度到100px
3 .minWidth:100 元素當(dāng)前最小寬度到100px
4 .maxHeight,height
5 .opacity:0 元素當(dāng)前透明度到0
6 .top: 元素當(dāng)前頂部距離到100px,需要配合position:relative|absolute
7 .marginTop:100 元素當(dāng)前頂部外邊距到100px
8 .color:#fff 元素當(dāng)前文字顏色到白色
9 .backgroundColor:#fff 元素當(dāng)前背景顏色到白色
10 .borderWidth:5 元素當(dāng)前邊框?qū)挾鹊?px
11 .borderColor:#fff 元素當(dāng)前邊框顏色變成白色
12 .boxShadow: 元素當(dāng)前陰影變?yōu)檫@樣
13 .borderRadius:5 當(dāng)前元素圓角變?yōu)?px,可以左右上下使用
14 .textShadow: 當(dāng)前文字影音變?yōu)檫@個樣子
15 .##一些transform的變化規(guī)則
16 .x:10 :x的位置移動10px.注意這是最簡單的寫法
17 .y:10 :y的位置上移動10px.
18 .z:10 :z的位置上移動10px.
19 .rotate:10 以transformOrigin的中心點旋轉(zhuǎn)10deg
20 .rotateX:10 以中心點向x方向旋轉(zhuǎn)
21 .rotateY:10
22 .scale:
23 .scaleX
24 .scaleY
25 .transformOrigin:'50px 50px'元素當(dāng)前中心點到50px 50px
26 .還有一些和filter有關(guān)的參數(shù)
27 .blur:'20px' 模糊到20px
以上是animate的變化參數(shù)芯侥,還有一些是屬性參數(shù),可以定義動畫的屬性
1 .type:動畫播放的方向
2 .duration:動畫持續(xù)的時間
幀動畫
1 .animate傳入一個數(shù)組廓俭,每一個數(shù)組代表一個幀唉工。
2 .為什么官方的例子里面一開始的值沒有放在state里面,而是直接放在了全局里面淋硝,那這樣怎么修改動畫的狀態(tài)啊。
3 .這個改變動畫的方法有點奇怪谣膳,還是把所有的幀都放在一個數(shù)組里面,然后每一次拿出其中的一項變成這個animation的參數(shù)仰楚,傳到里面犬庇,實時渲染,下一次重復(fù)這個動作臭挽,這個傳是檢測不到兩個前后數(shù)據(jù)的不一樣的地方,僅僅做的是每次粗暴的替換全體葬荷。
4 .