資訊專欄INFORMATION COLUMN
摘要：最近在學做動畫，于是就寫個轉盤練下手。設置中獎區間為度設置固定角度會讓動畫有點難看停止循環中獎操作記錄轉過的角度繪制圖形最后現在這個轉盤比較大的問題就是，如果中獎區間比較小，那減速后轉動的時間就長一些，最低速度轉很久才停下。
最近在學canvas做動畫，于是就寫個轉盤練下手。
上個簡陋的成果圖（中間那個是轉的指針，外面的圈是圖片，懶得寫了哈哈哈）
代碼很簡單，都注釋了，直接上代碼吧，嚶嚶嚶
htmlcss js
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//設定畫布和寬
canvas.width=140;
canvas.height=140;
var then = Date.now();
var now;//利用時間差來控制轉盤最小轉動時間
var first_deg=0;//用來記錄轉動的角度
var rotate_deg=0;//每次轉動的角度，用來實現變速運動
var end_deg =85;//中獎角度
var speedUp = true;//判斷是否在加速階段
var f;
// 因為canvas的rotate函數是根據左上角坐標（0,0）來旋轉的，所以移動畫布
context.translate(70,70);
function draw(){
context.clearRect(-70, -70, 70, 70);
context.beginPath();
context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
context.moveTo(-50,0);
context.lineTo(50,0);
context.lineTo(0,-70);
context.rotate(rotate_deg*Math.PI/180);
context.closePath();
context.fillStyle="red";
context.fill();
}
// 將運動分為3段，加速，勻速，減速
function loop(){
//循環調用，產生動畫效果
f = window.requestAnimationFrame(loop);
now = Date.now();
//開始加速轉動，轉到速度為20就不加速了，至于為什么是20，看起來舒服而已
if(rotate_deg<=20&&speedUp){
rotate_deg +=1;
};
//2s后開始減速（即最小轉動時間），減速是為了視覺上的美觀
if(now - then > 2000){
//如果下面設置的是固定角度，那這里的最小速度建議為1，因為每次轉動角度過大，一圈很可能錯過中獎的角度，導致轉很多圈。
if(rotate_deg>=2){
speedUp = false;
rotate_deg -=1;
}
//設置中獎區間為+-5度（設置固定角度會讓動畫有點難看）
if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){
window.cancelAnimationFrame(f);//停止循環
//中獎操作
}
};
first_deg += rotate_deg;//記錄轉過的角度
draw();//繪制圖形
}
loop();
最后
現在這個轉盤比較大的問題就是，如果中獎區間比較小，那減速后轉動的時間就長一些，最低速度轉很久才停下。當區間大的時候一下子就停下了，減速效果不明顯，視覺上看起來很奇怪。有大佬講下怎么實現轉動時長都一樣嗎？
代碼寫得很粗糙，實現方法也是自己剛想了就擼了，可能很多地方沒考慮好，望諒解。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52801.html
摘要：最近在學做動畫，于是就寫個轉盤練下手。設置中獎區間為度設置固定角度會讓動畫有點難看停止循環中獎操作記錄轉過的角度繪制圖形最后現在這個轉盤比較大的問題就是，如果中獎區間比較小，那減速后轉動的時間就長一些，最低速度轉很久才停下。 最近在學canvas做動畫，于是就寫個轉盤練下手。上個簡陋的成果圖（中間那個是轉的指針，外面的圈是圖片，懶得寫了哈哈哈）showImg(https://segme...
摘要：最近在學做動畫，于是就寫個轉盤練下手。設置中獎區間為度設置固定角度會讓動畫有點難看停止循環中獎操作記錄轉過的角度繪制圖形最后現在這個轉盤比較大的問題就是，如果中獎區間比較小，那減速后轉動的時間就長一些，最低速度轉很久才停下。 最近在學canvas做動畫，于是就寫個轉盤練下手。上個簡陋的成果圖（中間那個是轉的指針，外面的圈是圖片，懶得寫了哈哈哈）showImg(https://segme...
摘要：圓盤抽獎應用頁面圓盤抽獎應用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤抽獎應用DEMO html頁面 HTML5 Canvas圓盤抽獎應用DEMO演示 抱歉！瀏覽器不支持。 抱歉！瀏覽器不支持。 抱歉！瀏覽器...
閱讀 2574·2021-10-08 10:04
閱讀 2735·2021-09-06 15:02
閱讀 792·2019-08-30 13:50
閱讀 1547·2019-08-30 13:21
閱讀 2586·2019-08-30 11:15
閱讀 2113·2019-08-29 17:19
閱讀 1574·2019-08-26 13:55
閱讀 1261·2019-08-26 10:15
