|
|
瀏覽器中的動畫效果主要依靠js來動態(tài)改變Dom元素外觀來形成。不過據(jù)說css正在修煉這方面的能力哦。(拭目以待^_^)
我們需要周期性的改變dom元素的外觀，這個周期性就要依靠setTimeout()和setInterval()來完成。
它們2個哪一個更好點呢 見這里 (是jquery的作者寫的一個文章)
我個人比較偏向setInterval，setTimeout需要用遞歸調(diào)用而且在線程很忙的情況下會延時,這會影響流暢性。
通常我們會利用node.style的屬性動態(tài)賦值，來更新頁面表現(xiàn)，大家都知道每次的調(diào)用頁面都會重繪。
還有一種同時改變多個屬性的情況如下:
.......
node.style.height = 'value1',
node.style.width = 'value2',
node.style.top = value3"
......
這種情況下，
一個動畫物體在每一格的運(yùn)動中，頁面會重繪3次，當(dāng)屬性越多每次重繪越多。
在ff,chrome中沒有問題，但在ie中無可避免的出現(xiàn)閃爍現(xiàn)象。
如果可以把每一格動畫，作為一次重繪就會好很多。
在ff下我們可以setAtrribute("style",objStyle);一次跟新多個屬性。
但在ie下style是只讀的，任何試圖賦值都會讓ie很生氣并且，完全不鳥你。
這時候有個所有瀏覽器都支持的屬性cssText就可以解決這個問題，
style.cssText接受內(nèi)嵌格式的style的字符串，并且可以高效的同時重繪多個屬性。
所以，我們可以把動畫元素的多個屬性利用cssText同時跟新，而不是用style.prop一個個的跟新。
如： node.cssText = "heigth:100px;width:100px;top:100px";
當(dāng)然，動畫的流暢還有以下注意點：
1.setInterval的實踐證明，10是極限值，未來不一定，但現(xiàn)在一定不要設(shè)置小于10，不然瀏覽器會累死的。
2.把動畫路徑的所有值全部求出后，在用setInterval去定時更新，重繪元素的過程中不要有復(fù)雜計算。
3.還有就是完成一個動畫一共有多少步，要和setInterval的時間參數(shù)，相互調(diào)節(jié)到最佳狀態(tài)；
4.關(guān)于有多少步的算法，flash中有成熟的tween算法，google一下就有了，當(dāng)然也可以自己實現(xiàn)。
最后,我覺得如果對js動畫效果很感興趣話，還猶豫什么,去動手一步步實現(xiàn)一個自己的"影片"吧，樂趣就在其中哦。
當(dāng)遇到實現(xiàn)問題的時候，再去看看js流行框架是如何做到的。這就是生活嘛....
JavaScript技術(shù)：javascript 流暢動畫實現(xiàn)原理，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
