If you increase the number, the speed will increase. You can also change the speed of rotation by changing the number which you multiply the difference between the current time and the previous time the function executed.įor example, (currentTimeParam - prevTimeArg) * 0.004. Note that you can make the image move in an anticlockwise function by making the top style negative. We use s() multiplied by 150 to achieve the same radius. The same is done for the horizontal radius by setting the left style value. Setting the top with this value makes sure the image is maintained within its radius. We then assign the value to the top style. The vertical radius of our circle is computed using Math.sin() and multiplied by 150. This angle is used to compute the current position of our image. We store a counter for the current angle of the animation and increment it every time the animate() function is called.
This ensures that the motion of the image is stable because if we increased the angle of rotation by a fixed amount, the motion would not be smooth in case a heavy task is running in the machine. The speed at which the angle changes is dependent on the difference between the current timestamp and the last timestamp the function fired.
#CODING SIMPLE MATH EQUATION TO REVERSE ANIMATION TIMELINE UPDATE#
We continuously update its top and left styles to move it along the circle’s circumference. The image is placed at a 90 ∘ angle( π/2). RequestAnimationFrame( currentTime => animate( currentTime)) Setting the previous time to the time the function currently fires variable to store the previous time the animate funuction last firedĪngle += ( currentTimeParam - prevTimeArg) * 0.004 We will use these two functions to rotate an image in our animation. Using the basic trigonometric formulas, we see that sin θ = (y/r) and cos θ = (x/r).īased on these, it’s clear that given a circle of radius r at an angle of θ, the coordinates of the point (x, y) are found using: These two functions play a great role in defining the x and y coordinates of a circle. PrerequisitesĪ brief look at the sin and cos functions in creating a circle Where the line shows the path the image follows. We will be creating an animation to show a simple rotating system so that we can see how the functions are applied. In this article, we will look at how Javascript’s built-in functions such as s() and Math.sin() can be applied to create the animations. Animations are a great way to catch a user’s attention and enhance the look of your website.
0 kommentar(er)
