Name: Parenting in GIF Loop Coder
Uploaded: 2016-06-05T07:53:18-05:00
Description: In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree.

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

In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree. 

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

[00:00] Creating shape objects and animating their properties in GIF loop coder, it's very easy to make some really nice animations. But let's start looking into some more advanced techniques. First technique we'll look at is called parenting, this is a way of setting up a parent-child relationship between different objects. 

[00:16] By default, each shape object is completely independent from all others, but you can assign one shape object as a parent of another, then any transformations you make to the parent translations, scaling, rotation, will also be applied to the child object in addition to any of its own animations. This can be quite powerful. To see this in action I've created a circle object centered on the canvas, with a radius of 150. I'll set stroke to true and fill to false, and we see the circle. 

[00:46] Now we'll create a rectangle, position 00width and height 40, and you see that rectangle appears in the upper left corner as you'd expect. Now let's make the circle the parent of the rectangle. To do that we'll need a reference to the circle itself. It turns out that all of the renderless add functions do return a reference to the newly created shape object, so we can just save that in a variable, var circle equals. Now in the rectangle we can say parent circle. Now this rectangle is positioned at 00not of the canvas, but of the transformed location of the circle. 

[01:26] If I change directs X to 150, it's now on the edge of the circle. Now let's add some rotation to the circle making it go from 0to 360. See how the rectangle rotates along with it. And you can add additional animations to the rectangle. Here I'll make its width go from 0to 100. Parenting can be used to make some very complex animations. You can have any number of objects attached to apparent object, and you can nest objects many levels deep. 

[01:57] Here I'll add a ray. This is essentially a line, but rather than being defined by two points, it's defined by a point position, a length, and an angle. I'll put it at 0in the x axis, and height divided by 2 on the y. It will be 100 pixels long, and the angle will animate between -60 and +60 degrees, and you can see what this gives us. I've saved this in a variable ray1. Now I can copy this and make it ray2. I'll assign ray1 as its parent, and change x to 100 and y to 0This will position it right on the end of ray1. 

[02:39] Now you can see ray2 moving along as ray1 rotates, but it's also rotating itself. I'll copy that and make it ray3, with its parent being ray2, even more complex. Now I'll change the angles in ray2, making them 120, -120. That's an interesting effect, like some kind of mechanical arm. Sometimes you might want to use one object as a parent but not have that parent object be visible. Jumping back to something similar to the first example, say I wanted to have an object, say text, moving around in a circle. 

[03:24] Here I've created a circle and used that circle as the parent of a text object. The text is moving around in a circle now, which is what I want, but I don't want to see the circle. I could use various tricks to make the circle not render. For example, I could just make sure both fill and stroke are set to false. But if that's what you want, the better solution is the container object. 

[03:47] This is simply a shape that does not render. I'll replace addCircle with addContainer, and remove the extraneous properties, leaving only position and rotation, and that's just what I wanted. 

Parenting in GIF Loop Coder

Share this video with your friends

Course

GIF Loop Coder for Creating Animation