Summary
In this chapter, we created an ocean scene, with moving waves and a bobbing buoy with a flashing light, and added some sounds too.
More specially, you used the Shape protocol, the path
function, the animatableData
property, and curve variables to make the wave shape come alive. When working on the buoy, we looked at how to combine multiple types of animation to create unique effects, and how to turn different colors on and off to create a blinking effect.
The parameters in this project are highly customizable, so feel free to experiment further – maybe you want to create bigger waves or more of them, create the waves in landscape orientation, alter the shadow to create a horizon, or even replace the buoy with a boat!
Let’s keep going. In the next project, we will create a working elevator animation using timers and sound effects.