猫史档案馆


【Micfong Kitten 4 教程】流畅且优雅的动画

用户:MicfongMicfong查看:37 回复:47 评论:37 创建时间:2021-02-17T02:19:49


center_imagecenter_imagecenter_imagecenter_image

这是 Micfong 的第一篇教程,不支持一下吗(/ω\)

相信大家在制作作品的时候,有时候会感到自己的动画有些生硬呆板不流畅,在这篇教程里,Micfong 就来手把手教大家如何打造一段流畅且优雅的动画!

 

1 何为流畅优雅?

所谓流畅且优雅,一般来说指的就是非线性动画。如果说你不知道什么是非线性动画,那就通过下面的动图来直观地感受一下:center_image

可见,线性动画的运动速度一直保持一致(匀速直线运动),而非线性动画拥有加速和减速的过程。我们想要的也是下方的流畅且优雅的动画。

在日常生活中,我们看到的动画一般都是非线性动画,所以它看起来更加自然一些,不会喵板。

用过安卓手机和苹果手机的同学可能会发现,苹果手机的动画要舒适许多,这就是因为它采用的大多数都是非线性动画,而非线性动画。(非喷安卓机)

既然理解了什么是我们想要的结果,那我们该怎样在 Kitten 中实现呢?

 

2 实现动画

我们先来理一下运动速度变化的过程:

0—加速—最高速度—减速—0

似乎也没有那么难!

我们新建一个角色(这里以圆球为例),我们需要随时更改它运动的速度,所以需要给它创建一个“速度”的角色变量。(在制作作品时,如果不是必须用到全局变量,就尽量使用角色变量,这样可以避免变量混淆)center_image

为“球”创建了一个名为“速度”的角色变量

变量创建完毕后,我们要开始更改其中的数值了。

既然要逐渐加速,就需要不断的增大“速度“这个变量的值。我们创建一个循环,让它的速度最快达到5个单位,并且让它按照我们指定的速度动起来。(由于舞台不够大,我们需要把球的X坐标移至-100)

center_image

加速部分完成了,那么减速就轻而易举啦!把上面的积木块替换成:

center_image

这样减速的部分也完成啦!

 

3 循环动画

但是我们的球现在只动一次,程序就会结束了。我们现在来让它循环移动。

如果一直往右移动的话,很快就会移出舞台……所以我们现在要让它往回走

在刚刚的积木链上添加如下的代码块:

center_image

小心哦 增加变成了减少

完成之后,在最外面套上重复执行搞定!完整积木方块和运行效果如下:

center_image

center_image

好啦 2021/02/17 先写到这里,随后还有自定义移动距离的教程哦!如果想要的话在下面接楼


回复

上一页1 页 / 共 2下一页
MicfongMicfong

说需要Python编辑器的原因是在自定移动距离的时候会用到的哦~今天太晚了(2:22AM)先去睡觉啦!

点赞3


评论


退喵退喵

唉,这是个大佬,据我推测这个人将在不久之时很快就能成为社区星

点赞1


评论


退喵退喵

可缘分就是不让我们相遇(唉,难堪,

点赞0


评论


ZaonaZaona

emotion_编程猫_加油

点赞1


评论


Asheep233Asheep233

还不错,就是教程一般不好直接打文字。在word里打了截图吧,不然屏蔽词会让你疯的

点赞1


评论


MicfongMicfong

点赞0


评论


爵士OIer爵士OIer

好家伙,下次帮忙把完全弹性碰撞的手动实现教程写了

点赞1


评论


阿尔法官方阿尔法官方

emotion_编程猫_点赞

点赞3


评论


AlcalaAlcala

dd

点赞0


评论


小小爱html小小爱html

非线画的话不用桌面难搞,不用变量都可以的

点赞1


评论


Shark_CJPShark_CJP

DD

点赞0


评论


流熙墨晨流熙墨晨

好家伙,这篇帖子的回帖信息量巨大啊,小小去了冰网,岳飞去了魔禁,魔禁3级了,是我太久没逛社区了吗?

点赞0


评论


NomenNomen

这个功能是可以简化滴,只要一行代码,而且不用变量

点赞0


评论


【MC●绝人】编程猫【MC●绝人】编程猫

这个用三角函数可以更简便的实现

点赞1


评论


绿手酷客绿手酷客

催更第二期

点赞0


评论


Sky_worldSky_world

center_imagehhhc

点赞0


评论


Sky_worldSky_world

还有更简单的center_image

点赞0


评论


liuzhiyuliuzhiyu

center_image

点赞1


评论


哦那咋了哦那咋了

zz

点赞0


评论


芜湖咸鱼芜湖咸鱼

我就想说,安卓的动画真的比苹果更好看呐、、、、

(materialui真好)

点赞0


评论


MicfongMicfong

最新一期教程《模拟汇编语言+16位 C P U》

https://shequ.codemao.cn/community/369904

难度相对更高哦~量力而行~

点赞2


评论


uHuoYuBaiuHuoYuBai

emotion_编程猫_厉害了emotion_编程猫_加油

点赞0


评论


KiahKiah

难得的好帖,虽然内容有点少

点赞1


评论


面具狐狸云绾兮面具狐狸云绾兮

这.........这就是喵站UT大佬们那么流畅的愿意吗!

点赞1


评论


宝猪宝猪

我有一个更好且更简单的方法:https://shequ.codemao.cn/community/370582

点赞0


评论


雪糕ta爱吃金桔吖雪糕ta爱吃金桔吖

可以教教变量做的跑酷人物移动吗

点赞0


评论


萌新一个萌新一个

wood编辑器是什么?

点赞0


评论


CRP_辞旧CRP_辞旧

 

点赞0


评论


比较大的大提琴比较大的大提琴

密切关注你的教程

点赞0


评论


Mikasa_Mikasa_

难得看到个教程

点赞0


评论