A key frame is a marker on the timeline that shows you where a set of properties are established. For instance, if I move my play head up to two seconds and move my sphere, a key frame is going to get added for me. The large white bubble indicates a time to for the sphere, one or more properties are changing. I can click on the drop down to the left of the sphere to expand to see that I have added a render transform on the sphere. I can expand that and see that I have added a translation and expanding that will show specifically which properties.
The timeline that responds to the mouse wheel so I can move up or down in the timeline with the wheel to see which properties are being changed. Here you can see that now the x and y properties have been changed so they will have a new value, two seconds after the animation begins. So if I press play you will see that the ball moves over that time frame.
In some cases, we will set the play head to times zero and press this button, which records the key frame. In this case all of the properties that are animatable will now say “At time zero, I want to use the default state.” When I press the record key frame button, what I am stating is, at this time I want all the properties for my element to match what is displayed on the art board.
Now, as I move the play head around you will see that the ball will move to what I expect the properties to be at that time. I can change these properties just by changing the art board. So if I move the ellipse again, I am now stating that at time one I want the ellipse to be at this point. The small-dotted lines have also changed to show me the path that the ellipse is going to follow.
So, when I press play now, the animation should begin at time one because that is where the play head was when I press play. If the play head is at the very beginning or very end of the animation, pressing play will start it over at the beginning.
The x and y properties can be changed independently. If I wanted to, I could delete the x animation, leaving only an animation on the y property. It is useful to remember that a timeline is not just stating where the element will be at a given time, but it is in the entire set of properties that you can add or remove independently of each other.
Key frames can also be copied and pasted. Selecting a key frame, you can press Ctrl C to copy it then move the play head to the desired location and press Ctrl V to paste it.
Now, at time three the ellipse is going to have the same properties that had at time zero when I copied the key frame. For any individual property, I can right click on that property and the menu appears to allow me to edit the repeat count. When I choose this, I can type in any value for how many times I want the animation to repeat or I can press the infinity symbol to tell it to repeat that animation indefinitely.
The timing bar next to the y property extends now without an ending so when I press F5 to test my application you will see that the ball will continue to move up and down repeatedly.
Transcription by:
Scribe4you Transcription Services