Re: [問題] 對於用js做小動畫的疑問
※ 引述《despair96 (.)》之銘言：
: 剛開始接觸一點jQuery
: 之前一直在找怎樣用js做一些簡單的動態效果
: 主要有一些像是
: 怎樣持續執行同一個動作
: 跟控制動作開始執行的時間的問題
: 從別人的例子看到好像是用 window.setTimeout() 來做
: 這是我嘗試做的一個雲在飄的動態效果
: http://desbear.ctzbook.com/cloud/
: 看起來好像就是會動了
: 但是有一些問題
: 三朵雲CPU使用率就飆高了
: 放這這頁不管..大概20分鐘左右瀏覽器會當掉...(測試每個瀏覽器都是)
: 所以我的寫法是不是大大有問題...
你被包裝好的東西給蒙蔽了，
首先 setTimeout 這類元件的成本是很高的，盡量是一次呼叫中進行多個動作。
其次，animate 本身你給他的時間區間短，
他又是一個漸進的效果，他會造成大量的計算，
你又同時間內進行多次animate，難怪cpu會吃重。
最後也最重要的是，你在tran~tran3 的function 內，給的經過時間太短了。
window.setTimeout('tran()',0);
幾乎接近是無窮迴圈了，這更造成先前所述的animate 操作的問題。
另外其實還有一個在你這個case看不出來的隱性因素，
dom物件越多，重新計算呈現結果就越慢，
在很肥很多物件的頁面上，這類的慢速移動是很奢侈的。
: 另外有做一個更多物件的
: 但是其實問題都一樣
: 另外就是IE7.8對於png只要有透明度就是會有黑色背景的狀況有解嗎？
用 png 8
: 還有setTimeout的毫秒數設定是不是因為jQuery我設定跑的時間很長
: 也會影響要出場的setTimeout的時間
語焉不詳。@_@
: 我另外設定一些jQuery裡面動畫時間較短的出場時間都設的好長時間才正確
: 最後就是 比如說
: $('.cloud2').animate({left:"500px"},{queue:false,duration:36000})
: .animate({opacity: "0.7"},2000);
: queue:false 讓後面一個動作能同時執行
: 但是如果我又設定一個 .animate({opacity: "0"},2000);
: 希望他在前一個跑的動畫結束後執行讓雲消失
: 可是運作起來
: 他是沒有管第一個跑的動作執行完
: 就會跟著前一個透明度執行完直接開始執行嗎?
: 如果我先執行透明度淡入再開始移動再做淡出雖然就正常了
: 但是這時候對雲做的上下運動就只動了一次就結束了
: 雖然我之後想要做看看怎樣能飄到一邊再飄回來左右飄動(用改變box的寬度移動嗎?)
這段描述很混亂...可能時間晚了看不太懂...XD
: 但是想說先解決以上的問題
: 可能問題很蠢但是麻煩幫我解惑一下
: 感謝各位
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.133.218.161
※ 編輯: TonyQ 來自: 220.133.218.161 (04/29 01:06)
討論串 (同標題文章)