制作UI图集帧动画
发表于2017-06-03
一个游戏项目中不可避免会用到很多动画，动画的实现方式很多，2D动画中有一种常用的播放模式就是逐帧播放一幅幅图片。这些图片可以放在一张图集中，然后通过脚本控制改变RawImage的UV Rect值来实现播放。本篇文章要介绍的是通过制作UI图集帧动画来实现，下面是具体的制作步骤。
1.首先，制作这样的图集，注意：每幅图片在图集中的Size一样大，关于图集格式的设置如下图
2.其次，在场景中创建一个RawImage对象，并把上述图集指定给它。特别注意：Width与Height值的设定，上述图集能一排放几幅图片，用1除以它便得到Width值；同理，图集一列放几幅图片，用1除以它便得到Height的值。
3.在上述RawImage对象上挂上下面的UIAnimation脚本，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;/* * Author:LuShang * 播放图集UI帧动画 */public class UIAnimation : MonoBehaviour { /// /// 动画播放速度 /// public float Speed = 1f; /// /// 是否开始播放动画 /// [HideInInspector] public bool isStarting = false; /// /// 是否循环播放 /// public bool isLoop = true; /// /// 不循环播放动画时，是停格在最后一帧true还是隐藏UI动画false /// public bool isEndstop = false; /// /// 记录动画播放的时间 /// [HideInInspector] public float timer = 0; /// /// 动画延迟播放时间 /// public float delay = 0; /// /// 贴图组件 /// private RawImage image; /// /// 临时保存Image的Rect属性当前的值 /// private Rect curImageRect = new Rect(); /// /// 播放UI帧动画 /// public void PlayUIAnimation() { isStarting = true; timer = 0; if (image != null) { curImageRect.x = 0; curImageRect.y = 1; curImageRect.width = image.uvRect.width; curImageRect.height = image.uvRect.height; //初始化image的UVRect属性 image.uvRect = curImageRect; } } // Use this for initialization void Awake() { //获取image组件对象 image = this.GetComponent(); } // Update is called once per frame void Update() { if (!isStarting) return; //开始计时 timer += Time.deltaTime * Speed; // process delay if (delay > 0) { delay -= timer; if (delay > 0)//延迟时间还未到 { timer = 0; return; } else//延迟时间结束 { timer += (delay * -1); delay = 0; } } if (timer >= 1f) { if (!isLoop) { timer = 0f; isStarting = false; if (!isEndstop) gameObject.SetActive(false); return; } else timer = timer % 1; } // 计算UV的x偏移值 int xOffset = (int)(((timer / image.uvRect.height) % 1) / image.uvRect.width); curImageRect.x = xOffset * image.uvRect.width; // 计算UV的y偏移值 int yOffset = (int)(timer / image.uvRect.height); yOffset = (Mathf.RoundToInt(1f / image.uvRect.height) - yOffset) - 1; curImageRect.y = yOffset * image.uvRect.height; curImageRect.width = image.uvRect.width; curImageRect.height = image.uvRect.height; image.uvRect = curImageRect; }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;/* * Author:LuShang * 测试UI帧动画 */public class Test3 : MonoBehaviour { /// /// UI动画 /// public UIAnimation uiAni; // Use this for initialization void Start () { uiAni.PlayUIAnimation(); } // Update is called once per frame void Update () { }} |