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...
  • breathSpeed makes 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 timer is 0 → Sin gives 0
  • When timer is 1.57 → Sin gives 1 (maximum)
  • When timer is 3.14 → Sin gives 0 (back to middle)
  • When timer is 4.71 → Sin gives -1 (minimum)
  • When timer is 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), then scaleChange = 1 × 0.1 = 0.1 (grow by 10%)
  • If breathe = 0 (middle), then scaleChange = 0 × 0.1 = 0 (normal size)
  • If breathe = -1 (valley), then scaleChange = -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

  1. Create a Button in Unity (Right-click Hierarchy → UI → Button)
  2. Select the button in Hierarchy

Step 2: Add Script

  1. In Inspector, click Add Component
  2. Type "BreathingButton" and select your script
  3. (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:

  1. Keeps time passing (timer)
  2. Converts time into wave (Mathf.Sin)
  3. Scales the wave to our desired amount
  4. Applies it to the button size

That's it! This is the simplest, most straightforward way to make a breathing button in Unity.

Comments