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