Re: [問題] 對於用js做小動畫的疑問
※ 引述《TonyQ (沉默是金。)》之銘言：
: ※ 引述《despair96 (.)》之銘言：
: : 剛開始接觸一點jQuery
: : 之前一直在找怎樣用js做一些簡單的動態效果
: : 主要有一些像是
: : 怎樣持續執行同一個動作
: : 跟控制動作開始執行的時間的問題
: : 從別人的例子看到好像是用 window.setTimeout() 來做
: : 這是我嘗試做的一個雲在飄的動態效果
: : http://desbear.ctzbook.com/cloud/
: : 看起來好像就是會動了
: : 但是有一些問題
: : 三朵雲CPU使用率就飆高了
: : 放這這頁不管..大概20分鐘左右瀏覽器會當掉...(測試每個瀏覽器都是)
: : 所以我的寫法是不是大大有問題...
: 你被包裝好的東西給蒙蔽了，
: 首先 setTimeout 這類元件的成本是很高的，盡量是一次呼叫中進行多個動作。
: 其次，animate 本身你給他的時間區間短，
: 他又是一個漸進的效果，他會造成大量的計算，
: 你又同時間內進行多次animate，難怪cpu會吃重。
: 最後也最重要的是，你在tran~tran3 的function 內，給的經過時間太短了。
: window.setTimeout('tran()',0);
: 幾乎接近是無窮迴圈了，這更造成先前所述的animate 操作的問題。
嗯嗯了解了
所以像這種狀況最好是執行完需要的動作就讓他停止會比較好嗎 clearTimeout( )
要讓雲持續抖動的代價就是一定會CPU飆高
gif可以乾脆做成會動的
如果png有影子的圖..是否有其他方式能做到又不會太吃資源的呢
: 另外其實還有一個在你這個case看不出來的隱性因素，
: dom物件越多，重新計算呈現結果就越慢，
: 在很肥很多物件的頁面上，這類的慢速移動是很奢侈的。
: : 另外有做一個更多物件的
: : 但是其實問題都一樣
: : 另外就是IE7.8對於png只要有透明度就是會有黑色背景的狀況有解嗎？
: 用 png 8
png8好像不能支援到多層透明度
之前看到有資料說對於沒有套png背景的外層容器做動態效果
能解決
之前測試過會變成直接閃現動態會怪怪的
所以似乎同時有多層透明度就還是不要對他做動態 是嗎
: : 還有setTimeout的毫秒數設定是不是因為jQuery我設定跑的時間很長
: : 也會影響要出場的setTimeout的時間
: 語焉不詳。@_@
抱歉我表達的越來越亂=.=b
http://kidedu.wct.org.tw/html/
有點不好意思貼這個因為這是更糟糕的那個...而且還沒處理ie的問題
在animate.js裡
看到後面很可怕的一大串setTimeout...他們的出場時間懸殊很大
數據短的,都是有執行走很久的動態,幾萬毫秒的那些
只是我有點搞不清楚 他實際上要怎樣去算時間才正確
: : 我另外設定一些jQuery裡面動畫時間較短的出場時間都設的好長時間才正確
: : 最後就是 比如說
: : $('.cloud2').animate({left:"500px"},{queue:false,duration:36000})
: : .animate({opacity: "0.7"},2000);
: : queue:false 讓後面一個動作能同時執行
: : 但是如果我又設定一個 .animate({opacity: "0"},2000);
: : 希望他在前一個跑的動畫結束後執行讓雲消失
: : 可是運作起來
: : 他是沒有管第一個跑的動作執行完
: : 就會跟著前一個透明度執行完直接開始執行嗎?
: : 如果我先執行透明度淡入再開始移動再做淡出雖然就正常了
: : 但是這時候對雲做的上下運動就只動了一次就結束了
: : 雖然我之後想要做看看怎樣能飄到一邊再飄回來左右飄動(用改變box的寬度移動嗎?)
: 這段描述很混亂...可能時間晚了看不太懂...XD
就是如果我把讓雲浮現先寫.再讓雲移動完.再執行雲消失這樣是理想的
但是另外設定的上下抖動的function就失效了
function tran5(){
$('.cloud2').animate({opacity: "0.7"},{queue:false,duration:2000})
.animate({left:"500px"},36000).animate({opacity: "0.4"},2000);
}
^^^^先浮現,後面開始運動同時執行,執行完才執行消失
最後....
好像這樣子真的不太適合用js做
我承認我因為不會flash
然後最近摸一點點jQuery 然後又很初學..
才笨笨的想試試看T_T
: : 但是想說先解決以上的問題
: : 可能問題很蠢但是麻煩幫我解惑一下
: : 感謝各位
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.136.178.30
→
04/29 03:34, , 1F
04/29 03:34, 1F
推
04/29 09:09, , 2F
04/29 09:09, 2F
→
04/29 10:56, , 3F
04/29 10:56, 3F
討論串 (同標題文章)