So lets start off with a basic canvas example of an animation that is just that of a ball moving from side to side in the canvas. To do this I just need to have a canvas element, and then gain a reference to that canvas element. Once I have my canvas element reference I can then use the get context method of the canvas reference to get the 2d drawing context of that canvas element.
So one of the most basic ways to go about making a simple canvas animation of a ball bouncing back and forth might be to just have an x variable and a delta x variable. In a loop function the x variable is changed by the delta x variable on each tick, and conditional statements can be used to change the delta x variable when it reaches one of the sides of the canvas.
This might be a good starting point for making canvas animations, but there are a few issues of concern with this kind of approach with animation. The first of which is that I am just stepping the x value for each frame, but I am not taking into account that the abut of time it will take might vary a little from system to system. Even if the ball moves back and forth at the same speed across different platforms, at what speed? It might be better to have some kind pixels per second value, and the delta value is determined by the amount of time that has elapsed sense the last frame update and that pixels per second value.
Another thought that comes to mind is the nature of the animation that I am making here, this is a kind of animation that just loops over and over again. So in other words it is an animation that can be expressed as a collections of static frames, rather than a state that changes as a result of user input, or some kind of randomization factor. So lets look at some more examples that do the same thing more or less, but in very different ways.
So then there is making the same animation but now with a pixels per second value. Now I have a clear speed at which I would like the ball to move at, and I am using the Date constructor to create a last time value that can be used to know the amount of time that has elapsed sense the last frame tick inside the body of an update method.
In this example I am moving the ball in relation to a current frame index value relative to a set number of max frames for the animation. This is an approach that I take when working out any kind of canvas powered animation that is going to be a fixed set of frames, rather than something that is subject to user input, or any kind of variation or randomization factor.
The basic idea of this at least is simple, I have a variable that represents the current frame index, and another that represents the total number of frames. I can then use those to values to find the current value for all kinds of other values that are used to set the position, size, position, rotation, color, and so forth for display object, lines, and any thing else that might be used to render the current frame of an animation.
Although this might not be the best example of it, this style of canvas animation can also be thought of maybe as a kind of functional style of animation. This is of course if implemented differently where the animation is a pure function where the only arguments that are given to the function is a frame index, and max frame index value. If so the same set of arguments should return the same state every time to be in line with the rules of functional programing.
There are ways of exporting these frames, and then from that point forward it is just a matter of setting a frame rate at which the animation is to be played back at.
So now that I have covered the basic elements of animation and canvas, in this section I will be going over a basic example of a for frame centered style canvas animation module. What I mean by this is having a module where I pass and options object that contains a method that will be called on a per frame basis for all possible frame index values between zero and a max frame value. What is then returned is a function that when passed a frame index value will return an object that is the state of the animation for that frame index value relative to the max frame value that can also be set via a second argument.
So this is a basic example more or less of what I have in mind for this for frame style of canvas animation. When I call this FF function it it will return an inner function that I can then use to change the state of the animation that I define using a for frame method that I pass as an option to it.
Inside the FF function I have a helper method that will set a percent done value as a number in the range of zero to one that reflects the stage of completion of the animation as it progresses from frame zero to the last frame. This method also sets what I have come to call a bias value that is a number that goes from zero to on half and then back down to zero depending on the stage of completion of the animation. These are two general properties that come to mind that I will want to work with when it comes to working out some logic for an animation via a for frame method.
Now for a Basic example of my for frame method in action. This will be just a basic test that has to do with a simple box object that moves from one side of the canvas to the other. So I worked out just a very basic draw module that will render a background, and another that will just draw a box object. After that I get a reference to a canvas element and a 2d drawing context just like any other canvas example.
After I have my draw module worked out and my canvas element to work with I create an instance of that inner function that is returned by the FF function. However first I need to work out an options object that contains my for frame method that defines the nature of the animation. Inside the body of that for frame method I create an object that will be the box, and append it to my ani object of the api. I then use the api.per, and api.bias values to work out expressions that will change the moment of the canvas animation of a box moving.
So then once I have my options object together with the for frame method that I want to use for the animation then I just need to pass that to the FF main method that will return my animation method that can be used to set the animation to any frame that is a given index value relative to a max frame index value. I can then use that main method of the animation in a loop that will step a frame index value and loop back over to zero again when the max frame index value is reached. In the main app loop I just draw the current state of the animation, and step the frame index value.
So then this results in a looping animation where everything is updated by way of a frame index value relative to a ma set of frames. It is just a simple box moving down to the bottom of the canvas, and then back up again, but the basic idea here is that I can directly set the animation to any frame index also. I could design this whole thing differently where instead of looping over all frames I can just quickly jump to any frame in the animation. A user interface could be made to jump to any frame, increase the number of frames, loop backward and so forth.
This might be just a simple moving box animation, but this is a post on the basics of animation. In a read project the state of the animation object would contain not just one box, but a collection of box objects, points, and so forth and a way more complex for frame method, or even a collection of such methods. In any case this is the kind of thing I like to do when it comes to working out any kind of looping canvas animation rather than something that would respond to user input.