Unity—smooth frame animation

old way

If you directly switch image resources every frame in update, the animation display will be very stiff.

achieve effect

Resource handling

1. Import the 8*4 png image into the project, and set the Texture Type to Editor GUI and Legacy GUI or Sprite .
2. Create a new shader ball and set the Shader to Legacy Shaders/Particles/Additive or Mobile/Particles/Additive
   

UI components

1. Create a new Image component under Cavnas
2. Change the Material of the target Image component to the new material
3. 

component code

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class LoopTings : MonoBehaviour
{
    
    
    Image _img;
    Material _material;

    float startTime;

    [Header("X轴图片数量")]
    public int countX = 8;
    [Header("Y轴图片数量")]
    public int countY = 8;

    public float _speed = 26f;

#if UNITY_EDITOR
    private void OnValidate()
    {
    
    
        _material = transform.GetComponent<Image>().material;
		// 设置平铺和偏移
        Vector2 inital = new Vector2((1f / countX), (1f / countY));
        _material.mainTextureScale = inital;
        _material.mainTextureOffset = inital;
    }
#endif

    // Start is called before the first frame update
    void Start()
    {
    
    
        _img = transform.GetComponent<Image>();
        _material = _img.material;
        startTime = Time.time;
    }

    // Update is called once per frame
    void Update()
    {
    
    
        updateOffset();
    }

    void updateOffset()
    {
    
    
        float index = (Time.time - startTime) * _speed;
        if ((index <= (countX * countY)))
        {
    
    
            index = index % (countX * countY);
            Debug.Log(">>" + index);
            if (index == (countX * countY))
            {
    
    
                startTime = Time.time;
                index = 0;
            }
			// 小图尺寸
            Vector2 size = new Vector2(1.0f / countX, 1.0f / countY);
			// 计算索引
            float uIndex = Mathf.Floor(index % countX);
            float vIndex = Mathf.Floor(index / countX);
			// 计算偏移值
            Vector2 offset = new Vector2(uIndex * size.x, 1.0f - size.y - vIndex * size.y);
			// 设置偏移
            _material.SetTextureOffset("_MainTex", offset);
        }
        else
        {
    
    
        	// 重置
            startTime = Time.time;
        }
    }
}

Setup component

Throw the code to the target Image and set the corresponding value according to the image size.

Because the picture is composed of 8*4 small pictures. So the X-axis quantity is set to 8, and the Y-axis quantity is set to 4. The same applies to 3x3 or 8x8 images.
Just change the speed yourself and you will see the effect.

Remark

Free video to GIF URL