An动画优化之传统引导层动画

简介: An动画优化之传统引导层动画

在这里插入图片描述

一、制作引导层动画

(1)打开素材

先打开上次做的毛毛虫的“影片剪辑动画”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OmS15ZCv-1659366648985)(D:\Typora图片\image-20220801090430709.png)]

将不必要的帧删掉。(留第一帧)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gItrvfRa-1659366648985)(D:\Typora图片\image-20220801090855110.png)]

这一次,咱们来做一个毛毛虫的引导动画。

(2)添加引导层

点击“合成”图层,右键“添加引导层”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eqH88UFg-1659366648986)(D:\Typora图片\image-20220801090604496.png)]

(3)画弧线

在“引导层”图层,我们用【直线工具】画一条直线。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2fwZfpI4-1659366648986)(D:\Typora图片\image-20220801091019368.png)]

然后用【选择工具】调节直线,变成有弧度的“山坡”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HDafzTf-1659366648987)(D:\Typora图片\image-20220801091403391.png)]

(4)调整毛毛虫

将毛毛虫缩小一点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rc0kWsnA-1659366648989)(D:\Typora图片\image-20220801091536089.png)]

将它的中心点移到下方。(用任意变形工具就可以调出中心点啦)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FegQa0W3-1659366648990)(D:\Typora图片\image-20220801091643555.png)]

(5)插入帧

在“合成”图层,第30帧,按F6插入关键帧。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0vCT6G6-1659366648990)(D:\Typora图片\image-20220801091841658.png)]

在“引导层”图层,第30帧,按F5插入帧。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zfCWF8s-1659366648995)(D:\Typora图片\image-20220801091931302.png)]

(6)吸附中心点

在“合成”图层,第1帧,将毛毛虫的中心点,与线条重合(吸附上去)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4f7wY9JI-1659366648996)(D:\Typora图片\image-20220801092211407.png)]

然后是第30帧,将毛毛虫中心点,吸附到最后的线条上。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dag2XN6Z-1659366648997)(D:\Typora图片\image-20220801092324655.png)]

(7)创建传统补间

在第0帧-30帧,右键“创建传统补间”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u5cDtQv7-1659366648998)(D:\Typora图片\image-20220801092447269.png)]

(8)效果

看了一下效果,有点快,可以增加帧数。(在区间内,按F5添加帧)

记得是将上下图层同时选中,同时增加帧数!

来看一下效果:(若没有达到效果,可以重新吸附一下)
请添加图片描述

二、优化

刚才做了一个毛毛虫引导动画。

但是,这里要做一个优化,比如近大远小,又比如近的时候速度快,远的时候速度慢。

(1)近大远小

1)山顶

在第一个山顶,按F6创建关键帧。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LAiXzBYG-1659366648999)(D:\Typora图片\image-20220801093413960.png)]

按住Shift键,将毛毛虫缩小一点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JMjM1qPw-1659366648999)(D:\Typora图片\image-20220801093513944.png)]

其他山顶同理调整大小。

2)山谷

在山谷位置,可以将它放大一点。

找到在山谷位置,按F6创建关键帧。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1EBVFFL-1659366649000)(D:\Typora图片\image-20220801093727868.png)]

将毛毛虫用【变形工具】放大。(按住Shift键)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUSxg1vP-1659366649000)(D:\Typora图片\image-20220801093819368.png)]

其他山谷同理调整大小。

3)效果

全部做完之后,按Ctrl+Enter看一下效果:

请添加图片描述

(2)近快远慢

1)缓和帧

先在前后添加一些帧缓和。

上下全部选中,鼠标按住不动,往后拖拽。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bD2B6hj-1659366649001)(D:\Typora图片\image-20220801094816363.png)]

引导层直接挪过去就行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7QvrgLk-1659366649001)(D:\Typora图片\image-20220801094940150.png)]

合成层,在第18帧按Ctrl+C复制,然后到第1帧Ctrl+Shift+V原地复制。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qjnwnRbm-1659366649002)(D:\Typora图片\image-20220801095059723.png)]

后边直接按F5添加帧即可。(记得两个图层都要选中)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nVF6KerT-1659366649002)(D:\Typora图片\image-20220801095205285.png)]

2)调节上下坡

找到山坡上的那一帧,然后点击这个帧。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tbOjGcE9-1659366649002)(D:\Typora图片\image-20220801100615407.png)]

找到右边“补间”效果--->“CE”。

点击铅笔,调出“缓动”。

①上坡的时候,应该是先快后慢

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wpOUOd56-1659366649003)(D:\Typora图片\image-20220801100734738.png)]

在山顶处,再稍微慢一点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLfNB37h-1659366649003)(D:\Typora图片\image-20220801101010897.png)]

②下坡的时候,加速。是从慢到快。比如这里。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rb573yB0-1659366649004)(D:\Typora图片\image-20220801101342779.png)]

其他位置同理,自行调节。

这里就不再演示了。

在这里插入图片描述

相关文章
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
1991 0
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
|
3月前
|
图形学 开发者
U3D开发进阶:精细调整Collider与优化碰撞检测性能
【7月更文第11天】在Unity 3D(简称U3D)开发过程中,精确控制Collider(碰撞器)的设置与合理利用Layer Collision Matrix(层级碰撞矩阵)对于提升游戏性能、优化物理模拟至关重要。本文将深入探讨这两项技术的应用,通过实际案例和代码示例,帮助开发者构建更加高效、流畅的游戏体验。
272 2
|
3月前
|
监控 数据可视化 图形学
重构U3D动画系统:运用Animator Controller层叠状态机优化游戏表现
【7月更文第11天】随着Unity 3D(简称U3D)游戏开发的不断深入,高效且流畅的动画系统成为了提升玩家体验的关键因素。本文将深入探讨如何通过重构U3D项目的动画系统,利用Animator Controller的层叠状态机(Layered State Machine)特性,显著提高动画的处理效率与游戏的流畅度。我们将通过一个实战示例,展示如何设置和优化状态机,进而实现角色动画的细腻控制与高效切换。
73 0
|
11月前
|
编解码 前端开发 容器
ECharts力导向布局图增加滚动条
ECharts力导向布局图增加滚动条
An动画优化之补间形状与传统补间的优化
An动画优化之补间形状与传统补间的优化
827 0
An动画优化之补间形状与传统补间的优化
An动画基础之按钮动画与基础代码相结合
An动画基础之按钮动画与基础代码相结合
739 0
An动画基础之按钮动画与基础代码相结合
|
数据采集 JavaScript UED
一个简易的预渲染自动骨架屏方案
一个简易的预渲染自动骨架屏方案
850 0
一个简易的预渲染自动骨架屏方案
|
前端开发 Android开发 开发者
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 自定义控件过渡绘制 | 布局文件层次深 | GPU 过渡绘制调试工具 | 背景过度绘制 )(一)
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 自定义控件过渡绘制 | 布局文件层次深 | GPU 过渡绘制调试工具 | 背景过度绘制 )(一)
368 0
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 自定义控件过渡绘制 | 布局文件层次深 | GPU 过渡绘制调试工具 | 背景过度绘制 )(一)
|
XML 存储 Android开发
【Android 性能优化】布局渲染优化 ( CPU 与 GPU 架构分析 | 安卓布局显示流程 | 视觉与帧率分析 | 渲染超时卡顿分析 | 渲染过程与优化 )
【Android 性能优化】布局渲染优化 ( CPU 与 GPU 架构分析 | 安卓布局显示流程 | 视觉与帧率分析 | 渲染超时卡顿分析 | 渲染过程与优化 )
454 0
【Android 性能优化】布局渲染优化 ( CPU 与 GPU 架构分析 | 安卓布局显示流程 | 视觉与帧率分析 | 渲染超时卡顿分析 | 渲染过程与优化 )
|
编解码
一加8系列最新渲染图,比前代更克制也更精细
国产手机经过2010年到2016年的野蛮生长之后,渐渐形成了“华米OV”为首的四强格局,但唯一例外的就是作为小厂的一加。
153 0
一加8系列最新渲染图,比前代更克制也更精细