Core Animation Object - Sine Wave
This example shows the radius of a circle, and its cx values being changed, following the sine wave. Both full and half sine wave, plus continous, is demonstrated.
Animation Settings:
1. Smoothness
50 frames per second
2. Duration
2000/Continous - runtime in ms
3. from
50 start circle radius
4. to
50 end circle radius
5. Output Equation
function
sine(p){return Math.sin(p*Math.PI)}
6. Application Output
myCircle.r/cx.baseVal.value
Continous:
:Stop
Half Sine Wave
Full Sine Wave
SVG Source:
Javascript:
OK in:IE11/CH32/FF23