Applying the Principles of Animation to CSS3 Animations (Part 2)

Keep Your Mobile Learning Content Fresh

Tutorials Comments (0)

Last week I introduced the concept of applying the Principles of Animation to CSS3 Animations. I briefly discussed the origins of these 12 principles and how they can be used to add a great deal of life and interest to your organization’s mobile learning content.

Today, let’s continue our discussion and dive a little more in-depth with the next four Principles of Animation.

Principle #5: Follow Through and Overlapping Animation

This principle involves the termination of one animation, and how that termination effects the animation of related elements.

Lasseter, in his 1987 paper, used the example of an insect’s antenna. Because the antenna have a lighter mass, they may lag behind or move more quickly than the rest of the insect’s body much in the same way that a crash test dummy continues to move forward even as the cars forward momentum ceases. This forward momentum stops shortly as the seat belt does its job.

Think back to your junior high science class and you may remember Newton’s first law of motion: “an object in motion stays in motion unless acted upon by an opposing force.” That is essentially what we see in the following example.

click-to-play-POA5

Note that as the bug’s body begins to move back up after the bounce, the antenna are still continuing their downward motion. As the upward momentum “catches up” with the antenna, they reverse direction and catch up with the rest of the body at the top of its arc.

This is one of the more involved principles, simply because there is much to consider when creating an animation with several moving parts. Each part must move in a manner that feels believable for that individual part, while, at the same time, serving to enhance the believability of the overall animation.

As you can imagine, this means many offset keyframes and lots of subtle tweaking as demonstrated in the following code snippet:

.buganimate {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: top-property-animation, left-property-animation, scale-property-animation;
   -webkit-animation-timing-function: ease;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count:infinite;
}
.antennarightanimate {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: top-property-animation-antennaright, left-property-animation-antennaright, rotate-property-animation-antennaright;
   -webkit-animation-timing-function: ease;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count:infinite;
}
.antennaleftanimate {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: top-property-animation-antennaright, left-property-animation-antennaleft, rotate-property-animation-antennaleft;
   -webkit-animation-timing-function: ease;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes top-property-animation {
 0% { top: 120px; }
 50% { top: 200px; }
 100% { top: 120px; }
}
@-webkit-keyframes left-property-animation {
 0% { left: 40px; }
 100% { left: 40px; }
}
@-webkit-keyframes scale-property-animation {
 0% { -webkit-transform: scale(1,1); }
 35% { -webkit-transform: scale(1,1); }
 50% { -webkit-transform: scale(1.1,0.95); }
 65% { -webkit-transform: scale(1,1); }
 100% { -webkit-transform: scale(1,1); }
}
@-webkit-keyframes top-property-animation-antennaright {
 0% { top: -10px; }
 55% { top: 78px; }
 100% { top: -10px; }
}
@-webkit-keyframes left-property-animation-antennaright {
 0% { left: 75px; }
 55% { left: 75px; }
 100% { left: 75px; }
}
@-webkit-keyframes rotate-property-animation-antennaright {
 0% { -webkit-transform: rotate(0deg); }
 30% { -webkit-transform: rotate(0deg); }
 55% { -webkit-transform: rotate(30deg); }
 100% { webkit-transform: rotate(0deg); }
}
@-webkit-keyframes left-property-animation-antennaleft {
 0% { left: 125px; }
 60% { left: 129px; }
 100% { left: 125px; }
}
@-webkit-keyframes rotate-property-animation-antennaleft {
 0% { -webkit-transform: rotate(0deg); }
 30% { -webkit-transform: rotate(0deg); }
 63% { -webkit-transform: rotate(34deg); }
 100% { webkit-transform: rotate(0deg); }
}

 

An interesting aspect of this animation is how the antenna needed to be prepped in order to get the rotation at the base of the stalk just right.

Because CSS uses the center point of an element to determine the origin of an object’s rotation, the element needed to be prepped so that the stalk terminates near the center of the image. This means there is much unused space at the bottom of the image, but this is a quick and dirty way to give the antenna the freedom of movement required while appearing to be attached to the bug’s head.

antenna_centerpoint_example

The following links delve into greater detail about image preparation and how using sprites in your animations can increase efficiency and improve performance:

 

Principle #6: Frame-Based and Keyframing

To be honest, this principle (traditionally known as “Straight Ahead and Pose to Pose”) is a leftover from the days of hand-drawn, frame-by-frame animation. It can be somewhat difficult to translate into modern animation techniques, and even more difficult when those techniques usually involve creating animations in the form of written markup and code.

This principle contrasts two popular animation techniques that are usually employed to achieve specific results.

With Frame-Based animation, an animator creates an object and poses it as it should appear for each frame of an entire animation sequence. This technique is often time-consuming. However, it often results in spontaneous, organic animations that are surprising and feel natural.

With Pose to Pose Animation, the animator sets specific poses at key times within an animation. After these keys are set, the animation is then filled in (usually by the computer) as elements move from key to key. The results are usually animations with strong key poses, but these animations often feel stiff and artificial, and require careful tweaking of the sections between keys for best results. However, this need for refinement and careful consideration naturally leads to very professional results.

Because most CSS animation involves setting keyframes at specific times, we usually find ourselves using the second of the two techniques. In fact, the focus of this article is almost exclusively dedicated to Pose to Pose animations. That said, there are occasions where it makes sense to use a Frame-Based animation technique to achieve results that would be out of the reach of keyframe animations, such as in the example below of a bird flapping its wings.

bird

Much can be learned by studying the work of animators who regularly employ Straight Ahead animation techniques for traditional frame-based animations. For additional information on animating using image sequences, check out the following links.

Principle #7: Easing

Known traditionally as “Slow In and Out,” Easing deals with the gradual rate of change of an object as it transitions from one state to another.

This principle is especially important to pay attention to because computer animations can often feel very stiff and mechanical. Most software packages just don’t do a great job simulating Easing on their own. It takes a human eye to discern just how much – or how little – Easing is required in order for a move to feel convincing.

click-to-play-POA7

In the above example, the ball on the right utilizes no easing. Because of this, its movements are stiff and unnatural.

The ball on the left, however, eases into its keyframes, giving it a very natural, convincing feel.

The resulting illusion is that as the ball enters the apex of its movement, the force of its upward momentum is gradually overcome by the pull of gravity, and then drops back to the ground.

In CSS, this principle is controlled by adding the easing function to the animation-timing-function property.

In the example above, the ball on the right has its easing function set to “linear,” while the ball on the left required careful adjustment to ensure its movements feel natural. Because of this, the default easing function was not appropriate and a custom easing function needed to be tailored for this specific animation.

To make this job easier, Matthew Lein has created a tool called Ceaser, taking much of the guesswork out of the process.

.ballanimate1 {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: top-property-animation, left-property-animation1, scale-property-animation;
   -webkit-animation-timing-function: cubic-bezier(0.620, 0.000, 0.325, 1.000);
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count:infinite;
}
.ballanimate2 {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: top-property-animation, left-property-animation2, scale-property-animation;
   -webkit-animation-timing-function: linear;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count:infinite;
}

Principle #8: Arcs

This principle focuses on the physical path an object takes for natural movement. Most objects require time and distance to change directions. The resulting path of this movement often resembles an arc.

click-to-play-POA8

Creating a convincing trajectory for an object can be one of the more subtle, and thus, difficult effects to achieve in CSS animations.

To achieve the smooth, natural arc seen in the example above, an element containing the ball’s vertical movement was nested inside an element containing the ball’s horizontal movement.  Without this, the ball would move through the air in a more angular, less convincing manner.

The details of how this was achieved are displayed in the code snippet below:

.ballanimate {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: top-property-animation;
   -webkit-animation-timing-function: cubic-bezier(0.475, 0.010, 0.480, 1.000);
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count:infinite;
}
.ballmove {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: left-property-animation;
   -webkit-animation-timing-function: linear;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes top-property-animation {
 0% { top: 500px; }
 50% { top: 80px; }
 100% { top: 500px; }
}
@-webkit-keyframes left-property-animation {
 0% { left: -150px; }
 100% { left: 450px; }
}

More Next Week

Join me next week as we conclude our exploration of the 12 Principles of Animation.

We will discuss how including complexity and exaggeration the motion of your animation can add to the visual interest, as well as the important role that strong appeal and good visual quality plays in portraying your mobile learning content in the best manner possible.

Follow Float

» Tutorials » Applying the Principles of Animation...
On June 24, 2013
By
, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

« »