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