IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 【Unity笔记】如何做好UI动画 -> 正文阅读

[游戏开发]【Unity笔记】如何做好UI动画

个人是比较喜欢做一些MG动画的,使用Unity做动画也做了不少了,有了一些感悟,打算写下来,希望能对大家有所帮助~


一、UI面板显示动画:

显示某个UI面板的时候,以动画的形式显示,效果图:请添加图片描述
实现步骤:
①在UI面板的主物体上挂载Animation组件
②按快捷键Ctrl+6打开动画窗口录制好关键帧
③将做好的动画clip拖放到Animation组件的Animation选项上,并且保证Play Automatically是勾选状态
在这里插入图片描述
隐藏再显示这个UI面板,你就会看到面板以动画的形式显示了。


二、UI面板显示动画 + 隐藏动画:

显示隐藏某个UI面板的时候,均以动画的形式表示,效果图:请添加图片描述

实现步骤
①写一个脚本,命名为:”AnimPlayer“,挂载到面板物体上,脚本内容如下:

using UnityEngine;

[RequireComponent(typeof(Animation))]
public class AnimPlayer : MonoBehaviour
{
    private Animation _anim;
    private Animation anim => _anim ?? (_anim = GetComponent<Animation>());

    [SerializeField] private string openAnim = "open";
    [SerializeField] private string closeAnim = "close";


    //播放“打开动画”
    public void _____Open()
    {
        PlayAnim(openAnim);
    }
    //播放“关闭动画”
    public void _____Close()
    {
        PlayAnim(closeAnim);
    }


    private void PlayAnim(string animName)
    {
        if (anim.isPlaying)
            anim.Stop();
        anim.Play(animName);
    }




    [ContextMenu("首帧状态")]
    public void _____First() => _____Reset(anim, openAnim);
    [ContextMenu("末尾帧状态")]
    public void _____End() => _____Reset(anim, openAnim, 1f);
    /// <summary>
    /// Animation回到首帧或尾帧状态
    /// </summary>
    /// <param name = "anim" > Aniamtion </ param >
    /// < param name="clipName">ClipName</param>
    /// <returns>结果</returns>
    public static bool _____Reset(Animation anim, string clipName, float normalTime = 0f)
    {
        normalTime = Mathf.Clamp01(normalTime);

        AnimationClip clip = anim.GetClip(clipName);
        if (!clip)
        {
            Debug.LogError("请检查ClipName!");
            return false;
        }
        clip.SampleAnimation(anim.gameObject, clip.length * normalTime);
        return true;
    }
}

②要达到和隐藏物体一样的效果,可以加个“CanvasGroup”组件,将Alpha改为0,取消勾选BlocksRaycasts。面板显示动画中,需要改动这两项。
在这里插入图片描述
③再做了一个面板隐藏动画,动画一定要把CanvasGroup组件中Alpha值改为0,BlocksRaycasts取消勾选,避免误触发。
在这里插入图片描述
④这样调用AnimPlayer脚本中的_____Open和_____Close函数就Ok了,注意脚本变量的名字要和动画clip的名字匹配。
⑥动画内容还可以做得更丰富一点,这是我做的效果:请添加图片描述


三、UI面板融合动画:

动画做衔接,一镜到底,效果图:
请添加图片描述
实现步骤概述:
①动画clip做到首尾呼应
②每个面板做两个动画,一个显示动画,一个隐藏。触发交互的时候,播放前一个面板的隐藏动画,同时播放下一面板的显示动画
③可以在结束动画加动画事件触发下一动画或者下一面板的开始动画先空出几帧,需要根据情况来
注意点:
①仅仅适合流程性的项目
②动画播放中的时候,应该是不可控的状态,也就是CanvasGroupBlocksRaycasts是未勾选状态
③制作动画过程很枯燥,看下我的关键帧你就明白了/(ㄒoㄒ)/~~,但这也是实现的核心步骤
在这里插入图片描述

四、UI对象动画:

独立的小精灵,重复播放自己的小动画,效果图:
请添加图片描述
图中的每个动态对象都是在重复播自己独立的动画,当然只有一个动画,如果有多个动画,像跑啊、跳啊,还需要自然转换,最好用Animator状态机实现。
实现步骤:
①clip的wrapMode改为loop,这样动画就会重复播放了
在这里插入图片描述
②保证Animation的Animation选项有动画片段、Play Automatically处于勾选状态,这样场景运行的时候,动画就自动播放了。
在这里插入图片描述


五、Unity动画编辑器使用技巧:

1.动画帧间距调整:
按Ctrl+A快捷键选中全部关键帧,拖动蓝色竖条即可请添加图片描述
2.动画帧反转:
按Ctrl+A快捷键选中全部关键帧,拖动左侧竖条到右侧竖条前方即可
请添加图片描述
3.打帧方式:
①点开录制按钮后,直接设置参数值
请添加图片描述
②右键点击参数,选择“Add Key”
请添加图片描述
4.补帧方式:
鼠标双击来补帧:
请添加图片描述
5.线性和非线性动画过渡:
如图:
请添加图片描述
从图中的动画可以看出,unity默认动画过渡不是线性的,而是开始加速,快结束时减速,可以从曲线中看出来,曲线一般用不到,就不多说了,动画过渡如果要改为线性,我一般使用的一个简单的的方法,就是选中关键帧,右键选择“Auto”就OK了,如图:
请添加图片描述

六、动画制作技巧:

1.微动画
指动画幅度不是很大的动画,使用微动画能提升用户观感体验,并且制作成本低
示例:
请添加图片描述
对比无动画:
请添加图片描述
2.跳动动画
指在动画结尾处做个缓冲,使参数值不直接达到目标值,而是先比目标值大些,再比目标值小点…最终达到目标值。使用跳动可以使动画效果更生动,常用在娱乐互动类项目中,例如在一些休闲游戏中,而在一些政务平台软件中使用较少。
示例:
较大幅度的跳动动画:

较小幅度的跳动动画:
请添加图片描述
无跳动的动画:
请添加图片描述
3.顺序出现动画
指UI元素依次出现动画,能提升视觉效果。
顺序动画一般还是用代码或Dotween插件实现比较好,因为UI元素数量可能是未知的。
如果元素个数比较少,并且是个数是固定不可扩展的,可以K帧来做临时实现。
几秒做好一个顺序动画:
请添加图片描述
效果图:
请添加图片描述
再叠加一个跳动效果会更佳:
请添加图片描述


更多顺序动画效果展示:
请添加图片描述
叠加跳动:
请添加图片描述


请添加图片描述
叠加跳动:
请添加图片描述


先写到这里啦,以后有新想法再补充,感谢观看~

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 13:29:43  更:2022-03-06 13:30:57 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/27 16:31:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码