Name: GIF Loop Coder Single Mode
Uploaded: 2016-06-05T07:54:50-05:00
Description: We'll take a look at Single Mode animations and strategies for making this type of animation smoothly loop.

GIF Loop Coder - Introduction

GIF Loop Coder - Animating with Arrays

GIF Loop Coder - Interpolation

GIF Loop Coder - Animation Functions

Colors in GIF Loop Coder

Shape Objects in GIF Loop Coder

Parenting in GIF Loop Coder

GIF Loop Coder Single Mode

The Phase Property in GIF Loop Coder

Outputting Animations from GIF Loop Coder

Custom Drawing in GIF Loop Coder

GIF Loop Coder for Creating Animation

We'll take a look at Single Mode animations and strategies for making this type of animation smoothly loop.

https://app.egghead.io/api/v1/lessons/javascript-gif-loop-coder-single-mode/subtitles

[00:01] GIF Loop Coder's animations are done by incrementing a variable called T from 0to 1, and interpolating any animated values based on that T. The default mode is called bounce, which means that the T value goes from 0to 1 and back to 0again, over and over. Thus, if you animate an object's X position like I've done here, you can see that it goes from the first value 50 at the start of the animation T = 0to 350 at the midpoint of the animation when T = 1, and then back down to 50 again at the end of the animation where T = 0again. 

[00:38] This allows you to create perfect, seamlessly animating loops with no effort at all. But there's another mode called single mode which allows for a very different type of animation. As you can see here by switching over to single mode, the object goes from 50 at the start of the animation to X = 350 at the end. This is because the internal T value is going straight from to 0to 1. If we run this, you see that it goes across the canvas and then jumps back to the starting point, so we've lost our automatic smooth animation. 

[01:10] In single mode you need to do a bit more manual work to get smooth looping, but it's not that difficult once you get that concept. The key to it all is making the canvas look exactly the same at the end of the animations at the beginning of the animation. There are a number of ways to do this. One is to simply have the object start and end off the screen. First I'm going to set single mode here in the code, so I don't have to keep changing the drop down. 

[01:34] Now if I change the animation to -50, 450, we're back at what seems to be a smooth animation. In fact it's jumping, but it's doing that jump off screen. Another way to do this is with multiple object, where the ending state of one object, is the same as the starting state of another. I'll change this animation to run from -50 to 300, and I'll move it up on the y-axis. Now the shape is coming smoothly on the left, but blinking out of sight mid-screen. 

[02:03] What we can do is add another object and position it at that exact point where the first object is disappearing, 300,100. Actually we'll animate this one on the y-axis from 100 to 450 so it ends up off screen too. Now we have two objects, one going from left to right and disappearing, one going from top to bottom and disappearing off screen. But, because they look the same and their start and end points coincide, it looks like a single object with a more complex path. 

[02:39] Let's try an even more complex example. I'll create a star object and have it go from 100,100 to 300,100, and there it is. I'll switch this over to single mode, of course. Now I'll copy that star and have this one go from 300,100 to 200,300, and we see what that looks like. Then we'll make one more from 200,300 back up to 100,100. Now we have three stars seemingly following each other around a triangular path. Let's throw in some more challenges. 

[03:22] The first star I'll rotate from 0to 180, and I'll animate the number of points from 5 to 6, and while I'm at it, why not animate the fill style as well from yellow to red. As you can see this breaks the illusion because it's obviously not the same star anymore. To fix it the second star needs to start out exactly as the first star ends. So we'll rotate from 180 back to say, 60. Points we'll animate from 6 to 8, and the color will go from red to green. 

[03:58] OK, that transition looks better, but the third star is now out of place. We'll have that go from 60 back to 0degrees rotation, from 8 points to 5, and from green back to yellow. Now we have what seems to be three objects continuously changing as they move around a single path, even though each one is just doing a single animation along a straight path. Single mode is a powerful tool once you get the hang of it. 

GIF Loop Coder Single Mode

Share this video with your friends

Course

GIF Loop Coder for Creating Animation