Animating An ePicturebook: Flapping Wings
April 8, 2017
In my last post I positioned a bird on a page to appear as if flying through an open window. Now it's time to make that bird flap its wings!
I did not try to recreate a super smooth wing motion involving tens of different positions here, but rather, to show the simple repeating up/down motion of a bird flapping its wings. So I drew one additional “wings down” pose to complement the “wings up” bird. That is all I needed to make a “sprite sheet” or single image that contains all the pictures in a vertical row that will make up an animation.
My sprite sheet is small, 78 pixels wide by 124 pixels high and consists of just two drawings of the bird, wings-up and wings-down, their body positions perfectly matched in two stacked drawings (called “sprites”), each drawing is 78 pixels wide by 62 pixels high. I’ve named it “birdflapping.png.” It’s essential that this single image, now 78px by 124px, appear equally divided into two identically positioned drawings of the bird to guarantee a smooth final animation.
Here’s the set-up. I replaced the still image of the flying bird (img.robin03) in the HTML with a div with class name birdflapping. For this div, I kept the same dimensions, the same position, and the red border of the previous image. The div may appear to be empty, but its content, the sprite sheet, has been inserted in the CSS as background: url(‘images/birdflapping.png’), positioned 0 pixels from the top of the div and 0 pixels from the left. It is a single background image that does not repeat.
HTML
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
<meta name="viewport" content="width=456, height=600" />
<meta content="text/html; charset=utf-8" />
<title>Henry's Rhymes From Walden Volume2</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="page03">
<img class="background" src="images/background_page03.jpg" alt="" />
<div class="robin">
<div class="birdflapping"></div>
</div>
</div>
</body>
</html>
I used the CSS timing-function called “steps()” for the animation. The syntax for CSS animations allows the following declarations in this order: Animation Name, Duration, Timing-Function, Delay, Direction, and Fill-Mode. The name of the animation, its duration, and whether or not its start is delayed are all self-evident and essential, while the direction of the animation (Normal, Reverse, Alternate, etc.) and what its final position will look like (Fill-Mode) are often left to their default values. The Timing-Function sets the speed curve of an animation: the time an animation uses to change from one set of CSS styles to another. For example, the change can start slowly and end slowly (ease-in-out), take place at a constant speed (linear), or it can be broken into segments like the ticking hand of a clock: steps().
CSS
.robin
{
position: absolute;
top: 120px;
left: 50px;
z-index: 1;
width: 78px;
height: 62px;
margin: 0;
border: 1px solid red;
}
.birdflapping {
width: 78px;
height: 62px;
background: url('../images/birdflapping.png') top center;
background-position: 0px 0px;
background-repeat: no-repeat;
-webkit-animation: birdFlapping .5s steps(2) infinite;
}
@-webkit-keyframes birdFlapping {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -124px;
}
}
Here’s how the animation works. Imagine that the red-bordered box I’ve drawn around the bird is a 78 pixel by 62 pixel “movie screen” or “projector gate.” The CSS steps timing-function breaks the animation into two steps or frames. Instead of sliding the background sprite sheet past in a continuous motion, it displays each sprite image as a discreet frame. The CSS markup moves the larger 2-step sprite sheet its full length vertically -124 pixels (a negative value is upwards) every .5 seconds for an infinite number of times, letting each bird flash quickly in the “div-box” to give the illusion of wings flapping up and down. You can see the CSS animation here.
I love that I can use drawings to experiment with all aspects of a CSS animation, and when the movement is exactly what I want, I use my sketches to create the final color art and simply swap out the two in my images folder. But this animation isn’t finished yet. Sure, the wings are flapping, but the bird’s not getting anywhere. Now I want it to “fly” through the window and land on the fireplace mantel. And that will be the subject of my next post. Happy flapping!
