Clicking the Start Animation button will begin the animation. The stop animation will stop the motion. Or you can go to a frame by entering a frame numer and clicking Goto Frame. This animation consists of 24 frames running at 60 frames per second.
This animation demonstrates a rotary engine and wood propeller, commonly used in early 20th century aircraft. Unlike most engines, the crankshaft remained stationary and the rotary crankcase, as the name implies, rotated along with the propeller. Rotary engines common in World War I aircraft rotated in a counter clockwise rotation as is shown in the animation.
Navigate to previous or next portfolio item (Alt-p on Windows or Control Alt-p on a Mac for previous | Alt-n on Windows or Control Alt-n on a Mac for next):
While taking the WGD 235 Web Animation Course through DeVry University, students were tasked with creating a spritemap-based web animation. Spritemaps are used for animating images in which only a portion of the image changes and the rest of the image remains stationary. This limits the size and number of graphics which are required to load. For this animation I chose to draw and animate a rotary engine and aircraft propeller commonly seen on aircraft from the early 20th-century.
Project Specs
Category
Animation
HTML5 <canvas>
Interactive Design
Software Used
Adobe Illustrator CC
Audience
Aviation enthusiasts
Spritemap Image
A spritemap is a single image file which holds multiple frames of an image used to animate that image over time.
This animation uses a spritemap with 24 frames at 60 frames per second. The first 7 frames of the spritemap with the wood propeller rotated at 30 degrees for each image are shown below:
Solution to the Problem
I used Adobe Illustrator to create my spritemap. I set the artboard to 7500 x 300 pixels to match the spritemap. I then created vertical guides every 300 pixels to define my frames. I used the rotation function within Illustrator to rotate the propeller and rotary engine components 30 degrees each frame. In total the propeller rotates 4 times around in 24 frames.
The HTML <canvas> element contains the spritemap image of the propeller which has all of the 24 frames used to create the animation effect. The Sprite-Animate.js plugin is used to animate the spinning propeller.
Buttons were then added to start and stop the animation along with an input textbox allowing the user to enter a frame number (between 0 and 23) to see just that still frame image when clicking the Goto Frame button.
< previous
next >
