iT邦幫忙

0

Canvas 動畫裡物件移動方式

  • 分享至 

  • xImage

參考網路上的作品,這部動畫主要是CSS跟Jquery配合的
出發以後會跑一段距離->有個點會原地踏步->後退->再前進
(可點擊進去youtube看此影片)
Yes
看他的程式碼是使用jquery的animate去操控,才能這麼順暢

但我想使用CANVAS去模擬這個運動
一直做不到像上面一樣
只能做到,一直往前+退後一點點,看起來很不順暢又沒有刺激性...
(可點擊進去youtube看此影片)
Yes

還請各位大大指點謝謝!

以下是皮卡丘動作的主要程式碼


<script>
    //初始位置
	var y1 = 330;   
    var x1 = 1760;

    var endline =0;
        if(x1>endline){  //x1是第一隻的x座標
         
		x1-= randommove(); 	
		
            if(x1<endline || x1==endline){
                //第一台到終點                
                x1=endline;    
                reachline(y1,"car1");           
            }
        }
        
         function randommove(){ //隨機產生出要加x座標還是減x座標
      
			var aaa=Math.random();
			if(aaa<0.5){
			
			return Math.floor(aaa*30*-1);
			}else if (aaa>0.5){
			
			return Math.floor(aaa*30);	
			}
		
    }
    
    if(countdownnumber>-1){ //倒數時間到的時候,比賽開始
			
				ctx.drawImage(imgsArr[0],x1,y1,150,107);
	}
</script>
froce iT邦大師 1 級 ‧ 2018-09-17 10:57:24 檢舉
要看你 requestAnimationFrame() 是用什麼方式去移動皮卡丘吧?
從這兩段好像看不出來。
rising iT邦新手 5 級 ‧ 2018-09-21 13:32:15 檢舉
https://easings.net/zh-tw
我想你要的是這個?選幾組函數去組合就能兜出你想要的賽跑效果了吧
@rising 謝謝你提供的資料...這個就是跟我最上面那個例子一樣是用animate讓他很順暢地移動,但是canvas裡找不到類似的方法....
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答