javascript 流暢動畫實現原理
2024-05-06 14:14:04
供稿：網友
當然考慮到瀏覽器(特別指IE)糟糕的js執行能力，動畫效果又要受到影響。
瀏覽器中的動畫效果主要依靠js來動態改變Dom元素外觀來形成。不過據說css正在修煉這方面的能力哦。(拭目以待^_^)
我們需要周期性的改變dom元素的外觀，這個周期性就要依靠setTimeout()和setInterval()來完成。
它們2個哪一個更好點呢 見這里 (是jquery的作者寫的一個文章)
我個人比較偏向setInterval，setTimeout需要用遞歸調用而且在線程很忙的情況下會延時,這會影響流暢性。
通常我們會利用node.style的屬性動態賦值，來更新頁面表現，大家都知道每次的調用頁面都會重繪。
還有一種同時改變多個屬性的情況如下:
.......
node.style.height = 'value1',
node.style.width = 'value2',
node.style.top = value3"
......
這種情況下，
一個動畫物體在每一格的運動中，頁面會重繪3次，當屬性越多每次重繪越多。
在ff,chrome中沒有問題，但在ie中無可避免的出現閃爍現象。
如果可以把每一格動畫，作為一次重繪就會好很多。
在ff下我們可以setAtrribute("style",objStyle);一次跟新多個屬性。
但在ie下style是只讀的，任何試圖賦值都會讓ie很生氣并且，完全不鳥你。
這時候有個所有瀏覽器都支持的屬性cssText就可以解決這個問題，
style.cssText接受內嵌格式的style的字符串，并且可以高效的同時重繪多個屬性。
所以，我們可以把動畫元素的多個屬性利用cssText同時跟新，而不是用style.prop一個個的跟新。
如： node.cssText = "heigth:100px;width:100px;top:100px";
當然，動畫的流暢還有以下注意點：
1.setInterval的實踐證明，10是極限值，未來不一定，但現在一定不要設置小于10，不然瀏覽器會累死的。
2.把動畫路徑的所有值全部求出后，在用setInterval去定時更新，重繪元素的過程中不要有復雜計算。
3.還有就是完成一個動畫一共有多少步，要和setInterval的時間參數，相互調節到最佳狀態；
4.關于有多少步的算法，flash中有成熟的tween算法，google一下就有了，當然也可以自己實現。
最后,我覺得如果對js動畫效果很感興趣話，還猶豫什么,去動手一步步實現一個自己的"影片"吧，樂趣就在其中哦。
當遇到實現問題的時候，再去看看js流行框架是如何做到的。這就是生活嘛....
