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实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
2262 0
|
3月前
|
JavaScript 前端开发 API
Svelte 构建动态图像网格:实现翻转卡过渡
创建引人入胜的用户界面通常需要在功能和视觉吸引力之间取得微妙的平衡。
33 1
|
7月前
|
图形学 开发者
U3D开发进阶:精细调整Collider与优化碰撞检测性能
【7月更文第11天】在Unity 3D(简称U3D)开发过程中,精确控制Collider(碰撞器)的设置与合理利用Layer Collision Matrix(层级碰撞矩阵)对于提升游戏性能、优化物理模拟至关重要。本文将深入探讨这两项技术的应用,通过实际案例和代码示例,帮助开发者构建更加高效、流畅的游戏体验。
902 2
|
7月前
|
监控 数据可视化 图形学
重构U3D动画系统:运用Animator Controller层叠状态机优化游戏表现
【7月更文第11天】随着Unity 3D(简称U3D)游戏开发的不断深入,高效且流畅的动画系统成为了提升玩家体验的关键因素。本文将深入探讨如何通过重构U3D项目的动画系统,利用Animator Controller的层叠状态机(Layered State Machine)特性,显著提高动画的处理效率与游戏的流畅度。我们将通过一个实战示例,展示如何设置和优化状态机,进而实现角色动画的细腻控制与高效切换。
201 0
|
9月前
|
前端开发 C++ UED
​响应式设计 vs自适应式设计
​响应式设计 vs自适应式设计
An动画优化之补间形状与传统补间的优化
An动画优化之补间形状与传统补间的优化
1012 0
|
前端开发
前端知识案例学习9-可调整尺寸得UI
前端知识案例学习9-可调整尺寸得UI
157 0
前端知识案例学习9-可调整尺寸得UI
An动画基础之按钮动画与基础代码相结合
An动画基础之按钮动画与基础代码相结合
802 0
|
图形学
Unity中UGUI、粒子系统、Mesh混合使用保证层级正确
把粒子、Mesh渲染到一张RenderTexture上,然后把这张RenderTexture贴到一张RawImage就可以解决这种类似的UI,Mesh,粒子穿插使用的问题。这种方法由于比较麻烦就没有使用。
|
存储 JavaScript 算法
系统带你学习 WebAPIs —— 动画篇(第六讲)
系统带你学习 WebAPIs —— 动画篇(第六讲)
系统带你学习 WebAPIs —— 动画篇(第六讲)

热门文章

最新文章