pc端對製做網頁動畫一些心得

　　最近作了一些pc端的頁面，用了一些動畫效果，總的來講感受還不錯，大概記錄下一些體會

　　首先，咱們把pc端的動畫類型分三類：

• 　　javascript和jQuery直接控制dom屬性
• 　　css3的屬性transition
• 　　css3的animation

　　這三類是我目前主要使用的動畫效果製做來源

　　javascript和jQuery直接控制dom屬性

　　　　這種模式就是咱們傳統的js模式，或者在jquery上進行一些包裝。主要是直接變化dom節點的普通屬性，left，top，width，height之類的；

　　　　　　優勢：

　　　　　　　　兼容性高，使用jQuery能夠很方便兼容大多數瀏覽器。

　　　　　　缺點：

　　　　　　　　javascript的原生寫法比較複雜，複雜屢次變化的動畫效果實現不方便

　　　　　　tips:

　　　　　　　　jquery下能夠引用easing文件用來加強各類動畫效果的表現形式，豐富animate，fadeIn，fadeOut，slideDown，slideUp等動畫效果的表現形式

 

　　css3的屬性transition

　　　　這種模式也是基於css3模式，最好在chrome表現，適用於各類小型動畫，簡單的過渡切換

　　　　　　優勢：

　　　　　　　　使用方便，書寫簡單，代碼量很小能夠實現不俗的簡單動畫效果，適合作hover，active等簡單的體驗優化

　　　　　　缺點：

　　　　　　　　缺乏控制方式，變化形式比較單一，不能精細控制，不適合作複雜動畫　　

　　　　　　tips：

　　　　　　　　transition變化的必要幾個屬性（例子）：

　　　　　　　　　　普通變化：transition：all 2s ease-in-out 1s;

　　　　　　　　　　參數效果：all——全部屬性參與過渡切換　　

　　　　　　　　　　　　　　　2s——動畫效果持續兩秒

　　　　　　　　　　　　　　　ease-in-out——慢速開始慢速結束的過渡效果

　　　　　　　　　　　　　　　1s——從觸發動畫到實際開始動畫的延時

　　　　　　　　3d變化：添加3d屬性，後面提到；

　　

　　css3的animation

　　　　這種模式一樣基於css3，表現最好在chrome內，適用於各種新型較複雜的動畫效果

　　　　　　優勢：

　　　　　　　　使用方便，動畫實現邏輯比較好理解，適合作各種動畫效果

　　　　　　缺點：

　　　　　　　　關鍵幀要求比較高，若是動畫效果要求高，可能須要屢次調整關鍵幀設計

　　　　　　tips：

　　　　　　　　animation變化幾個必要和屬性（例子）：

　　　　　　　　　　普通變化：-webkit-transform: rotateX(0deg);

　　　　　　　　　　　　　　  -webkit-animation:doll_123 2s ease-in-out 1s;　　　　　　　　　　　　　　　　

@-webkit-keyframes doll_123 {
0% {
-webkit-transform: rotateX(90deg);
}
20% {
-webkit-transform: rotateX(-40deg);
}
40% {
-webkit-transform: rotateX(30deg);
}
60%{
-webkit-transform: rotateX(-20deg);
}
80%{
-webkit-transform: rotateX(+10deg);
}
90%{
-webkit-transform: rotateX(5deg);
}
100%{
-webkit-transform: rotateX(0deg);
}
}

　　　　　　　　　　參數效果：-webkit-transform: rotateX(0deg)——完成動畫以後的樣式（這個樣式必需要有，否則完成動畫以後樣式會回到初始狀態）

　　　　　　　　　　　　　　　doll_123——設置的變化函數設定

　　　　　　　　　　　　　　　2s——動畫效果持續時間（從0%——100%所用的時間）

　　　　　　　　　　　　　　　ease-in-out——動畫開始和結束緩慢，中間快速（還有一類變化是瞬時的，step-end，step(2)直接分解成對應的狀態，沒有過渡態，這樣的效果適合用於背景圖片的切換）

　　　　　　　　　　　　　　　1s——從觸發動畫到實際開始動畫的延遲時間

　　　　　　　　　　另：animation-iteration-count 用於設置動畫播放次數。animation-direction 用因而否輪流反響播放動畫 。animation-fill-mode用於設定播放完動畫最後一幀狀態（forwards 是最後一幀，backwards是第一幀）

　　　　　　　　　　

 

 

　　3d變化（注意要配合上述三種動畫實現纔會有動畫效果，否則只是變化不是動畫）

　　　　　ps：　css不能實現把二維圖片轉化成三維圖形，因此css3實現的3d效果只能是實現相似卡牌翻轉或者變化，真實3d結構顯示須要使用webGL，Three.js。

　　　　　　3d變化須要的必須屬性：

　　　　　　-webkit-transform：perspective(600px) rotateY(180deg)；

　　　　　　　　屬性說明：

　　　　　　perspective(600px)——用於設置視角位置，能夠大概理解爲對於3d變化元素的變形影響，值越小影響越大（值越小，視角越靠近屏幕，近大遠小的效果越明顯，相似現實生活的看書，眼鏡靠書很近的時候，靠近眼鏡的字看起來比遠的大，若是看書距離較遠，看起來的話字大小就差很少）

　　　　　  rotateY(180deg)——用於設置3d旋轉的角度，這個是按照Y軸轉動180度。

　　　　　　　　　　　

　　　　　　3d變化的額外屬性：

　　　　　   -webkit-transform-origin：100% 100% 0——用於設置3的旋轉的基點，變化座標系基點在dom節點的x方向100%位置，變化座標系基點在dom節點的y方向100%位置，z軸在0位置，（須要注意的是，改變的是座標系的位置，不是圖片位置，比較抽象，大概理解爲改變基點位置的x值會改變y軸變化效果，改變基點位置的y值會改變x軸變化效果）

　　　　　   -webkit-transform-style：preserve-3d——用於設置3d變化，可是實際上只要在transform設置了視點位置以後都是3d變化，2d變化是沒有視點的；不過加上這個屬性能夠明確顯示是3d變化。