Animate Image UI with Sprite Sheet

Questions & Answers
1

I’ve been digging around for a while but don’t seem to be able to find a solution. Does Unity support this option? Seems like something that should be possible.

The method for making a basic 2D animating sprite does not show up in the UI when I attach it to a panel. I have also created an Image object and added an animator to it with no effect.

What am I missing?

2

You can animate the Image.sprite property of your UI Image with an animation.

  1. Select your Image in the hierarchy
  2. Open the Animation window
  3. Press the “Add property” button
  4. Save the animation clip with anything you want
  5. Add the Image.sprite property
  6. Add keyframes with the different sprites you want

This will automatically add an Animator component with everything configured to play that animation in an infinite loop.

4

Hey there!
I know this is old, but here is a script I have worked on that achieves what you want.

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
public class UISpritesAnimation : MonoBehaviour
{
    public float duration;

    [SerializeField] private Sprite[] sprites;
    
    private Image image;
    private int index = 0;
    private float timer = 0;

    void Start()
    {
        image = GetComponent<Image>();
    }
    private void Update()
    {
        if((timer+=Time.deltaTime) >= (duration / sprites.Length))
        {
            timer = 0;
            image.sprite = sprites[index];
            index = (index + 1) % sprites.Length;
        }
    }
}
3

For anyone else struggling, I had to make sure that I had a gameobject in my scene with an image component and to add a frame of my anim to it - to make it work:

The object you add to the scene doesnt need to be visible, you can just use the animator component of an object in your scene to switch between states but for some reason, the objects need to exist in the scene.

  1. Drag the multiple sliced frames into the scene view and make a new animation, name it something that makes sense
  2. Make sure the new gameobject has an image component
  3. Drag the first frame of your animation into the image component “source image” box
  4. Have one of the states in your animator use your newly created animation as its “motion”