Let's make
Spin the wheel!
幸運輪盤動畫製作
Divide and Conquer
- Draw
- Find the displacement via the fortune
- Find position per second
- Using setInterval or setTimeout or requestAnimationFrame to trigger the animation
Using Canvas to draw
- Canvas arc
- ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
- Angle = 2*Pi / 360 * index
- Canvas rotate
- Canvas save and restore
Find position per second
- Animation =
- The displacement of the object changes with time
- Deceleration
Constant Velocity Motion
// T = 總時間
// S = 總位移
// t = 每一時刻, s = 位移量
// 速度公式 => s = v * t
s = v * t
= S / T * t
= S * (t / T)
= S * p // p = progression
Deceleration
// T = 總時間
// S = 總位移
// a = 等減速度
// t = 每一時刻, s = 位移量
// 速度公式 => s = v0t - 1/2at^2
S = 1/2 * a * T^2
// 得
a = 2S / T^2
v0 = aT = 2S / T^2 * T = 2S / T
s = v0 * t - 1/2 * a * t^2
= (2S / T) * t - 1/2 * (2S / T^2) * t^2
= 2S * (t / T) - S * (t^2 / T^2)
= 2S * p - S * p^2
= S * p * (2 - p)
Demo
Spin The Wheel Animation
By Stanney Yen
