An动画基础之散件动画原理与形状提示点

简介: An动画基础之散件动画原理与形状提示点

在这里插入图片描述

一、散件动画

(1)介绍

【散件动画】:一个散件当中,包括形状、颜色。从第一帧到最后一帧的变化。

比如,我们在第一帧用【椭圆工具】画一个圆。

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

然后在第30帧的位置,插入关键帧。

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

用【选择工具】将这个圆移动到右侧。

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

改变一下它的形状。

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

在第1帧到30帧中间位置右键“创建补间形状”。

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

可以播放看一下,是很自然的从第一帧过渡到最后一帧。

请添加图片描述

此时我们将最后一帧改变颜色,如蓝色。

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

再次播放可以看到,它的颜色也是逐渐过渡的。
请添加图片描述

(2)案例

接下来做一个小案例。

1)画球

用【椭圆工具】画一个圆,颜色为径向渐变,笔触无。

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

用【渐变变形工具】改变一下它的光源。(之前做过一个球体案例,可以去看看)

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

再稍微调整一下渐变颜色(自行调整,我的也是看着调的),然后就得到这样的球。

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

2)插入关键帧

在第30帧的位置插入关键帧。在这里插入图片描述

然后用【渐变变形工具】将球的光源移动到右侧。

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

3)创建补间形状

在第1帧-30帧的中间位置右键“创建补间形状”。

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

4)创建空白帧

为了更好的过渡,我们在之前之后都创建空白帧。

下面演示一下。

①前面的空白帧

将这些帧全选(直接鼠标左键点击第一帧,按住不动拖拽到第30帧就好)。

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

整体移动到第20帧的位置。

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

在第20帧的位置点击一下,然后Ctrl+C复制。

然后在第一帧的位置,Ctrl+Shift+V原地复制。

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

这样第一帧就有了最初的球了。

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

②后面的空白帧

后面的很容易添加,直接点击到最后的地方,然后按F5创建帧即可。

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

如果觉得中间过渡时间太短了,也可以将鼠标点击20-50帧中间任意位置,按F5创建帧。

5)投影

有光源就会有投影,现在咱们来画一个投影。

①画影子

先创建一个图层。

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

用【椭圆工具】画一个椭圆,颜色改为纯黑色。

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

然后将影子图层放在球图层下边。

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

②调整前后影子变化

然后将影子稍作调整。

颜色可以换成灰色,用【任意变形工具】对这个影子做调整,也可以用键盘上下方向键做微调。

这个刚开始的位置,影子应当在右侧。(光源在左)

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

注意,刚才作图的时候,应该是在第1帧的位置。

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

然后在20帧的位置关键帧。

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

这个位置,也右键“插入关键帧”。

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

然后咱们将变化后的影子也改动一下。(光源在右侧了)

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

③添加过渡的影子

因为影子没有那么快过渡,所以在中间位置,也需要再添加一个过渡。

在第40帧的位置,创建一个关键帧。

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

然后改变影子的位置。

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

④创建补间形状

分别在20-40帧和40-60帧的位置,右键“创建补间形状”。

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

将影子图层后边的帧补上,使其与上边的对齐。

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

6)复制一个

将20-60帧的位置全选。

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

按住Alt键将它们拖拽到后头。(复制前面一段效果到后边了)

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

然后右键“翻转帧”。

翻转帧:将第一帧与最后一帧调换。

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

7)效果

看一下最终的效果:

请添加图片描述

二、形状提示点

(1)字母变化

咱们先来做一个字母。

用【文字工具】敲一个W,字号调大一点,字体就用“微软雅黑”,颜色就用黑色。

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

在第30帧的位置,插入关键帧

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

在第30帧的位置,将字改为M

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

分别将WM打散。(可以分别点击第1帧和第30帧,用快捷键Ctrl+B打散)

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

在第1帧-30帧中间右键“创建补间形状”。

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

将图片或字母变成散件之后,才能使用“创建补间形状”。

(2)空白帧

还是跟之前一样,为了让它们过渡自然,要在前后创建空白帧。

①首先把第1帧-30帧全选。

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

拖拽到后边。

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

②点击第25帧,Ctrl+C复制。

然后点击第1帧,Ctrl+Shift+V原地复制。

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

③后边的空白帧就直接按F5创建就好。

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

(3)形状提示

我们在第25帧的位置,做一个形状提示。

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

怎么添加呢?

①在第25帧的位置。

我们会看到,添加形状提示后,W字母上有一个提示点。

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

将它移动到左下角。

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

再添加一个提示点(按快捷键Ctrl+Shift+H)。

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

将它移动到右下角。

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

②在最后变化到M的时候,也将这两个点移到指定位置。(a对应a,b对应b)

在这里插入图片描述

添加形状提示点之后,指定位置就不会发生大幅度变化,只有平移。

看一下效果:

请添加图片描述

(4)复制

我们和上面的案例一样,做一个轮回。

将25帧-55帧的位置,全选,按住Alt键复制到后边。

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

然后再选中80帧-110帧进行翻转。

翻转帧之后,形状提示点也会不见。

这时候需要重做。

第80帧:

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

第110帧:

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

(5)效果

看一下效果吧:

请添加图片描述
是不是很神奇?
希望文章对大家有所帮助,原创不易,多多支持!
在这里插入图片描述

相关文章
|
2月前
|
前端开发 JavaScript 开发者
【QML进阶 进度条设计】打造动态弧形进度条特效
【QML进阶 进度条设计】打造动态弧形进度条特效
167 1
|
算法 Windows
Winform控件优化之实现无锯齿的圆角窗体(或任意图形的无锯齿丝滑的窗体或控件)【借助LayeredWindow】
在一般能搜到的所有实现圆角窗体的示例中,都有着惨不忍睹的锯齿...而借助于Layered Windows,是可以实现丝滑无锯齿效果的Form窗体的,其具体原理就是分层窗体....
1167 0
Winform控件优化之实现无锯齿的圆角窗体(或任意图形的无锯齿丝滑的窗体或控件)【借助LayeredWindow】
|
2月前
|
前端开发
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
|
9月前
|
存储 前端开发
canvas自定义绘制顺序解决遮挡问题
canvas自定义绘制顺序解决遮挡问题
129 0
【Unity3D--自由观察模型】模型自动旋转+触屏旋转和缩放
展示3D模型,同时实现模型自动旋转和触屏旋转和缩放
275 0
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
233 0
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
111 0
|
编译器 API 图形学
【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题
【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题
124 0
An动画基础之元件的图形动画与按钮动画
An动画基础之元件的图形动画与按钮动画
270 0
An动画基础之元件的图形动画与按钮动画
|
数据可视化 JavaScript 前端开发
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
74 0
【视觉高级篇】18 # 如何生成简单动画让图形动起来?