請教前端前輩們一個問題

javascript lucky-wheel html css canvas

hihi 2022-08-10 15:22:51 ‧ 1327 瀏覽

大家好

請教一個前端的問題目前有個轉盤需求

使用的是套件 lucky-canvas，https://100px.net/

問題:

目前使用的是轉盤的方式，看套件內轉盤的示範好像沒有辦法達成我要的，漸變慢速(例如轉盤轉10秒，轉動的速度會由一開始的速度10，每秒持續遞減)

故想請教前輩們，有沒有其他辦法可以達成我的需求

這裡附上簡單codepen讓前輩們可以參考，希望各位可以指點一下，或者有其他推薦的套件，
十分感謝!!

qpalzm iT邦研究生 5 級 ‧ 2022-08-10 15:55:31 檢舉

有點不懂輪盤跟轉盤的差別,但如果是改成10秒結束,
setTimeout(() => {
myLucky.stop();
}, 3000);
改成:
setTimeout(() => {
myLucky.stop();
}, 10000);
不知道我的理解有沒有錯

hihi iT邦新手 5 級 ‧ 2022-08-10 16:19:49 檢舉

@kekeke大，不好意思沒有表達清楚

我的需求是假設10秒轉盤停止轉動
我想要讓一開始設定的速度從10 > 9 > 8 > 7 隨著秒數倒數持續遞減

hihi iT邦新手 5 級 ‧ 2022-08-10 16:28:56 檢舉

詳細可以參考這裡
https://100px.net/demo/more.html
我使用的是轉盤的方式，可以看到它轉動的速度都是定時定速的
但我想要達成的效果是使用轉盤的方式
可以做到旁邊九宮格的方式(一開始跑很快，然後越來越慢)

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

小哈片刻

iT邦研究生 4 級 ‧ 2022-09-08 22:05:54

你可以在new LuckyCanvas.LuckyWheel的時候，把defaultConfig裏面的decelerationTime改成7500(毫秒)
setTimeout那邊改成2500毫秒

他預設的accelerationTime(加速時間)是2500毫秒，所以你在2500毫秒後讓他執行stop()，他就會在7500毫秒後停止，這樣加起來就剛好10秒。

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

IT邦幫忙