For brevity, I split this into two parts. This part addresses the theoretical aspects before diving into the code. However, if you would like to skip and head to the code directly, access part 2 here.
Animations bring life to Android apps, making them feel smooth, dynamic, and engaging. However, they aren’t just about moving objects. They’re about timing, curves, and natural motion. Sine waves are particularly useful for simulating periodic, smooth motions, ideal for bouncing or floating effects. In this example, we’ll build a WhatsApp-status-inspired animation where hearts bounce up from the bottom of the screen as shown below:
Before proceeding, let's take some time to analyze the movements of the bouncing hearts briefly.
Analysis of the heart movements
We have five hearts. All of them start by gradually fading in, increasing in size, and fading out while reducing in size.
- Heart 1 moves left → right
- Heart 2 moves left → right → left
- Heart 3 moves right → left
- Heart 4 moves right → left → right
- Heart 5 moves left → right
You can clearly see that they move with different bouncing directions, speeds, and occupy different spaces from the screen ends. We will base the sine wave plotting of these movements.
A primer on wave properties
At the very basic level, waves have three properties:
- Amplitude is the height of the wave and controls how high it bounces, meaning a larger amplitude means bigger bounces.
- Wavelength is the distance between repeating peaks, affecting the spacing of motion and dictating how stretched the bouncing movement is.
- Frequency is how fast the wave oscillates, controlling the speed of the bounce.
We also have the phase, which specifies the wave’s horizontal shift relative to a reference point. It lets you control the position from which the wave starts bouncing. Using the phase, you can shift the wave left or right. From our analysis, hearts 1, 2, and 5 will have a different phase shift from hearts 3 and 4.
Alternatively, instead of using phase shifts, you can decide to use Cosine waves. As you can see from the illustration below, they have different phase shifts. More precisely, they are 90° out of phase. For simplicity, though, we will use only sine waves and change the phase shifts.
Image source: Wikipedia
The Sine wave formula
This is the general sine wave formula quoted from Wikipedia:
y(t) = A sin(ωt + φ) = A sin(2πft + φ)
Where:
- A is the amplitude, the peak deviation of the function from zero.
- t is the real independent variable, usually representing time in seconds.
- ω is the angular frequency, the rate of change of the function argument in units of radians per second.
- f is the ordinary frequency, the number of oscillations (cycles) that occur each second of time.
-
φ is the phase, specifying (in radians) where in its cycle the oscillation is at t = 0.
- When φ is non-zero, the entire waveform appears to be shifted backwards in time by the amount φ/ω seconds. A negative value represents a delay, and a positive value represents an advance.
- Adding or subtracting 2π(one cycle) to the phase results in an equivalent wave.
In my case, I based the sine calculations on this part: A sin(2πft + φ). However, instead of adding the phase, I discovered that multiplying worked.
A sin(2πft × φ)
But of course, you are free to play around with the values to achieve what you would like.
Proceed to part 2, where we get into drawing and animating the hearts.
Top comments (0)