SwiftUI Animations: Recreating the Roomba vacuum animation
After prying my Roomba from under the bed, I pulled out my phone to send my robot back down the hallway. I noticed a delightful animation that showed my Roomba moving across the floor as it was cleaning. Let’s recreate that animation in SwiftUI.
SwiftUI animations interpolate a view’s values between a start and end value over a period of time. We will use this fact to create a shape that changes its self in respect to time. At different points in time, the shape will look appropriately different by placing the lines at different positions. When put together, this will form the moving tiles of our animation. To form the Roomba, we will use a filled circle with a shadow. This circle remains in the same location throughout its animation.
Our scene will consist of the shape and the circle stacked together in a ZStack, placing our Roomba on the floor.
To simulate the Roomba moving across the tiles, we will add horizontal lines to our shape. The y-position of the lines will be in proportion to a value between 0 and 1. When interpolated over the animation time, it will make the lines appear like they are moving.
We will add @State to our ContentView that holds the value the shape uses to animate. We will use a linear animation that repeats forever to do the heavy lifting of replaying our animation. Given the placement of the tile lines above, the animation appears almost seemless.
To finish up, let’s add a gradient to the top and bottom of our shape so the horizons of our scene fade away.
Our final result will require further tweaking to get exactly right, but I think it looks pretty good!
Full source: https://github.com/patmalt/RoombaAnimation