web 動畫實現方式
這這裏，總結了一些 我知道的不用框架來實現動畫的方式，總的來說有兩種，第一種是用css的transition或keyframes+animation，第二種用js來實現
首先看基本結構
<style>
div {
position: relative;
background: #999;
width: 50px;
height: 50px;
}
.ani {
}
</style>
<body>
<div class="ani"></div>
</body>
一 css
1) transition
transition是漸變的意思，就是某個屬性 從一個值逐漸變成另一個值，比如width：從50px，到200px
基本表達式 transition: transition-property transition-duration transition-timing-function transition-delay
- transition-property ：需要做緩動的屬性，默認值為all，就表示所有可以緩動的屬性都做緩動動畫
- transition-duration : 整個緩動動畫的持續時間，比如1s 就是1秒
- transition-timing-function ： 緩動動畫的呈現速度方式，默認值為ease，即 先慢再快再慢,還有linear（勻速）等其他方式
- transition-delay : 延遲執行動畫時間
舉例：
.ani {
transition: width 1s .4s linear;
}
.ani:hover {
width: 200px;
}
這個動畫呈現效果是：當鼠標移動到div上的時候，執行width 改變動畫
很多其他的一些屬性也可以，比如left，opacity 等等，這裏就不詳述了，感興趣的可以自己試試
2）keyframes
包含兩部分，第一個是使用animation屬性，第二部分是：[email protected]，
animation：
- animation-name ： 動畫名字，就是 @keyframes 定義的動畫名
- animation-duration： 動畫持續時間
- animation-timing-function： 動畫呈現的速度
- animation-delay： 延遲時間
- animation-iteration-count：動畫播放次數，默認值：１，值是一個數字或infinite（表示無限次，其他的就是直接用數字表示）
- animation-direction：當動畫播放到１００％的時候，是否需要反向播放，默認值：normal，如果需要方向播放則alternat
.ani {
animation: testAni 2s infinite alternate;
}
註：播放完一次的會後，你會發現動畫停留最開始的狀態，但是你想停止在100%時候的狀態，那怎麽辦呢？ 你可以使用nimation-fill-mode:forwards 的方式到達目的
keyframes
@keyframes testAni {
0% {
width:50px;
}
30% {
width：80px；
}
100% {
width: 200px;
}
}
0% 表示最開始，30%，表示整個動畫時間的30%， 100% 表示結束，
中括號裏面就是需要呈現動畫的屬性
註：動畫優化：1）因為動畫改變的太頻繁，所以我們最好用position：absolute或fixed的方式把元素脫離文檔流，避免頻繁重繪
2） 如果是定位屬性：比如left，top等等，可以用transform：translate（）的方式來替代，這樣性能更好
註：transition適合於一次性的呈現動畫，animation適合多次 或者需要控制中間過程的動畫
二 javascript
1) setTimeout
表達式：setTimeout（funcName，delayTime）
funcName：函數名字
delayTime： 延遲執行時間
window.onload = function(){
var divDom = document.querySelector(".ani");
var nowWidth = divDom.offsetWidth;
var speed = 2;
function showAni(){
nowWidth += speed;
if(nowWidth > 200){
nowWidth = 200;
speed *= -1;
}
else if(nowWidth < 50){
nowWidth = 50;
speed *= -1;
}
divDom.style.width = nowWidth + "px";
setTimeout(showAni, 20);
}
showAni();
}
停止方法：使用clearTimeout(id)
2） setInterval
表達式：setInterval（funcName，delayTime）
表示程序間隔多少時間就執行一次func，是持續的，如果不使用clearInterval的話就一直執行，不像setTimeout是執行一次
具體的動畫實現和setTimeout 的實現一樣，只是調用方式不一樣，
showAni改為：setInterval（showAni，40），然後showAni裏面 刪除 setTimeout那條語句
停止方法：使用clearInterval(id)
3) window.requestAnimationFrame()
window.onload = function(){
var divDom = document.querySelector(".ani");
var nowWidth = divDom.offsetWidth;
var speed = 4;
var lastTime = 0;
function showAni(nowTime){
if(nowTime-lastTime > 20){
lastTime = nowTime;
nowWidth += speed;
if(nowWidth > 200 || nowWidth < 50){
speed *= -1;
}
divDom.style.width = nowWidth + "px";
}
window.requestAnimationFrame(showAni)
}
window.requestAnimationFrame(showAni);
}
這個實現看起來 和setTimeout的方式差不多，但是因為瀏覽器針對requestAnimationFrame接口專門做了優化，簡而言之就是把所有更新集中到
渲染期的最後一起集中渲染，所以效率更高
停止方法：cancelAnimationFrame(id)
註：1）nowTime-lastTime > 20 這個表達式只是為了設置間隔時間，因為一般情況下，執行這個方法的間隔時間是16.7秒的樣子（60幀），
用這個表達式可以來控制真正的邏輯執行的間隔時間
2）用requestAnimationFrame加上canvas 可以實現一個動畫引擎，當然這個只是核心，還包括其他的一些技術，才能實現，而且一般
是在遊戲中才會用到那麽復雜的，所以這裏就不去詳述相關的東西
註：上面的所有停止方法裏面的id 都是調用相關方法的返回值，比如 id = setTimeout(showAni,20);
這裏只是列舉 實現動畫的方式，所有對每種方式沒去深究，拿requestAnimationFrame來說，就可以說一整篇幅，如果感興趣的，可以針對
每種方式再去深入研究，這篇就到此結束，歡迎拍磚
web 動畫實現方式