Monday 21 April 2014

Lesson 10: Multiple animations (part 2)

Sequential animations

While simultaneous animations are easily produced by placing them together in an attribute, the sequential animation is more complicated. Basically one animation, often an abstract custom attribute, is begun as normal, usually by an onClick formula, while the others are controlled by accessing the value of the first.

As an example, let's elaborate the opening doors we created in Lesson 9. In castles, the main doors were often secured by sliding a wooden beam across when closed so we shall add this to the twin doors. Our animation will consist of the two doors closing and then, once the doors are closed, the drawbar will slide across.

First duplicate the two door component we created in "DC5" and rename it as "DC6". Within the component, create a rectangle named "Drawbar" and position it in the final, closed position as below. Add the X attribute to the Drawbar and make a note of its value.

 Next we need to move the elements to their 'start' postion, so change the Doors' "RotZ" values so they are both open (remembering that we are changing the custom attributes "LeftAngle" and "RightAngle", not the RotZ directly). Then change the Drawbar's X position so that it is drawn back as shown below.


The first animation is straightforward, keeping the existing "onClick" to rotate the doors. The second animation involves the Drawbar sliding across by changing the object's X position. But we don't want this to happen until the doors are closed so how do we accomplish this? One technique is to create a custom attribute which will have a timeline and the animations are based on this, determining their values from this attribute. In this case, because the doors start at the same time as we click it, we can leave them as they are, but the moving of the Drawbar will need to controlled by this.

Before we create anything though, we need to get out a pen and paper (or spreadsheet) and work out some timings. The doors use the Animate function which occurs over half a second so let's say the Drawbar animation will start at 0.6 seconds (to allow a more realistic slight pause between the actions). The Drawbar animation can also take half a second so the total length of the full animation is 0.5 + 0.1 + 0.5 = 1.1 seconds.

In my model, the X position of the Drawbar is -210 when withdrawn and -5 when closed so, putting these together in a table:

Time 0 secs 0.6 secs 1.1 secs
Drawbar X -210 -210 -5
Timeline -456 -210 -5

Now comes the complicated part of working out a formula. I worked out the Timeline figures so that the Drawbar X position matches the Timeline but, obviously we don't want the Drawbar to move until the Timeline reaches -210 so we need to add an IF formula which says (in English):

If Timeline is less than -210, Drawbar position is -210, else Drawbar position is equal to Timeline.

As a SketchUp formula, it is (notice no quote marks around the attribute names:

=IF(Timeline<-210,-210,Timeline)

Finally we simply link the Drawbar position to the Timeline.

The final formulas are shown below:

You may have noticed the CUSTOMANIMATION that controls the Timeline animation. Because we want an odd number, 1.1 seconds, we can't use the standard ANIMATION types so have to use a CUSTOMANIMATION. The parameters for this formula are, compared to the normal ANIMATION:

ANIMATION(attribute, state1, state2 ...)

CUSTOMANIMATION(attribute, time, easein, easeout, state1, state2 ...)

The only thing that might be puzzling is the easein and easeout. These determine the acceleration of the animation with 0 being the fastest and 100 being slowest. The default easein and easeout for an animation is 0 and 100 which means the animation starts fast and slows down, rather like a ball being thrown in the air. Values of 100 and 0 would mean it starts slowly and speeds up (like a rocket taking off).

The details we enter are:

ANIMATECUSTOM("Timeline",1.1,0,100,0,-456,-5,-456)

which means the Timeline value changes over 1.1 seconds, starting quickly and slowing down, going from -456 to -5 on the first click, then back to -456 on the second click.
If you click on the component now, you should see doors open and then, after a pause, the drawbar slide across.

The reverse  animation doesn't work properly with the doors opening before the Drawbar has slid back but, to have the animation working both ways requires a more complicated arrangement. For this to work, you would have to link the animations of both the Drawbar and the two doors to the position of the Timeline which is much more complicated. Maybe you can think about how to achieve this. I shall show my method in the next lesson.


The completed component is available on 3D Warehouse at https://3dwarehouse.sketchup.com/model.html?id=ud59967fd-643b-4621-aeb5-d1cbbbc9fb19

1 comment:

  1. Thank you for posting this! The way you went about it step by step was very helpful!

    ReplyDelete