Breathing Button Animation
Let me give you the easiest possible breathing button with clear explanations.
The Complete Code
using UnityEngine;
public class BreathingButton : MonoBehaviour
{
public float breathSpeed = 1f;
public float breathAmount = 0.1f;
private Vector3 startSize;
private float timer = 0f;
void Start()
{
startSize = transform.localScale;
}
void Update()
{
timer += Time.deltaTime * breathSpeed;
float breathe = Mathf.Sin(timer);
float scaleChange = breathe * breathAmount;
transform.localScale = startSize + new Vector3(scaleChange, scaleChange, scaleChange);
}
}
Step-by-Step Explanation
1. The Variables
public float breathSpeed = 1f;
public float breathAmount = 0.1f;
What they do:
breathSpeed= How FAST the button breathes (1 = normal speed, 2 = twice as fast)breathAmount= How MUCH the button grows/shrinks (0.1 = it gets 10% bigger and smaller)
Why public?
- You can change these values in Unity Inspector without editing code
2. Private Variables
private Vector3 startSize;
private float timer = 0f;
What they do:
startSize= Remembers the button's original size (so we can return to it)timer= Counts time passing (used to create the breathing rhythm)
Why private?
- These are only used inside this script, no need to expose them
3. Start Method
void Start()
{
startSize = transform.localScale;
}
What happens:
- Runs ONCE when the game starts
- Saves the button's current size into
startSize - Like taking a "before" photo
Why?
- We need to know the original size so we can make the button bigger/smaller compared to it
4. Update Method - The Magic Part
void Update()
{
timer += Time.deltaTime * breathSpeed;
What happens:
- Runs EVERY FRAME (60+ times per second)
Time.deltaTime= Time since last frame (usually 0.016 seconds)- We add this to
timer, so timer keeps increasing: 0.1, 0.2, 0.3, 0.4... breathSpeedmakes it count faster or slower
Think of it like:
- A stopwatch that keeps ticking up
float breathe = Mathf.Sin(timer);
What happens:
Mathf.Sin()is a mathematical function that creates a wave pattern- When
timeris 0 → Sin gives 0 - When
timeris 1.57 → Sin gives 1 (maximum) - When
timeris 3.14 → Sin gives 0 (back to middle) - When
timeris 4.71 → Sin gives -1 (minimum) - When
timeris 6.28 → Sin gives 0 (back to start, then repeats)
Visual representation:
1 ←peak
| /\ /\
| / \ / \
breathe / \ / \
| / \/ \
-1 ←valley
This creates the smooth up-and-down breathing motion!
float scaleChange = breathe * breathAmount;
What happens:
- Takes the wave value (between -1 and 1)
- Multiplies it by
breathAmount(0.1)
Example math:
- If
breathe= 1 (peak), thenscaleChange= 1 × 0.1 = 0.1 (grow by 10%) - If
breathe= 0 (middle), thenscaleChange= 0 × 0.1 = 0 (normal size) - If
breathe= -1 (valley), thenscaleChange= -1 × 0.1 = -0.1 (shrink by 10%)
transform.localScale = startSize + new Vector3(scaleChange, scaleChange, scaleChange);
}
What happens:
- Takes the original size (
startSize) - Adds the scale change to X, Y, and Z equally
- Applies it to the button
Example:
-
Original size: (1, 1, 1)
-
Scale change at peak: 0.1
-
New size: (1.1, 1.1, 1.1) ← Button is bigger!
-
Original size: (1, 1, 1)
-
Scale change at valley: -0.1
-
New size: (0.9, 0.9, 0.9) ← Button is smaller!
How to Use It
Step 1: Setup
- Create a Button in Unity (Right-click Hierarchy → UI → Button)
- Select the button in Hierarchy
Step 2: Add Script
- In Inspector, click Add Component
- Type "BreathingButton" and select your script
- (Or drag the script file onto the button)
Step 3: Adjust Settings
In the Inspector you'll see:
- Breath Speed: Try values between 0.5 (slow) and 3 (fast)
- Breath Amount: Try values between 0.05 (subtle) and 0.2 (dramatic)
Step 4: Press Play!
Your button should now breathe!
Visual Timeline
Here's what happens over time:
Time timer Sin(timer) scaleChange Button Size
0.0s 0.0 0.0 0.0 1.0 (normal)
0.4s 0.4 0.39 0.039 1.039 (growing)
0.8s 0.8 0.72 0.072 1.072 (bigger)
1.6s 1.57 1.0 0.1 1.1 (biggest!)
2.4s 2.4 0.68 0.068 1.068 (shrinking)
3.1s 3.14 0.0 0.0 1.0 (normal)
3.9s 3.9 -0.68 -0.068 0.932 (smaller)
4.7s 4.71 -1.0 -0.1 0.9 (smallest!)
6.3s 6.28 0.0 0.0 1.0 (back to start!)
Then it repeats forever!
Troubleshooting
Button not breathing?
- Make sure the script is attached to the button GameObject
- Check that Breath Amount is not 0
Breathing too fast?
- Lower Breath Speed to 0.5 or 0.3
Breathing too subtle?
- Increase Breath Amount to 0.15 or 0.2
Button grows but doesn't shrink back?
- This shouldn't happen with this code, but make sure you didn't modify it
Why This Works
The key is Mathf.Sin():
- It naturally creates a smooth wave
- Goes up and down automatically
- Repeats forever
- Perfect for breathing effects!
The rest of the code just:
- Keeps time passing (
timer) - Converts time into wave (
Mathf.Sin) - Scales the wave to our desired amount
- Applies it to the button size
That's it! This is the simplest, most straightforward way to make a breathing button in Unity.
Comments