猫史档案馆


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

用户:MicfongMicfong查看:3414 回复: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


评论

太早了

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

这个好像更简单,但是对于萌新来说不好理解。


退喵退喵

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

点赞1


评论

过奖啦(/ω\)其实才刚刚入猫1个月,算是个萌新吧

你真厉害!1个月就能够做出这么多好玩实用的作品!佩服佩服!!!

对了。我说错了。原来你只有两个作品。不过你的那个跑酷作品上了首页!真厉害!


退喵退喵

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

点赞0


评论

如果需要联系的话 QQ 1622286666 ~

可以做我师傅嘛?我喜欢你的这种作品

发了个教程https://shequ.codemao.cn/community/364224 来换个马甲评论下

你那个Micfong UI滑动条有bug


ZaonaZaona

emotion_编程猫_加油

点赞1


评论


Asheep233Asheep233

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

点赞1


评论

唔 我这边没有看到喵诶

总有一天你会看到的

对 C P U 成 喵U


MicfongMicfong

喵

点赞0


评论


爵士OIer爵士OIer

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

点赞1


评论

好的 提到Agenda了

啥?()

这玩意是物理内容(确信)

(确信)

会计划做的()

如果是别的形状,那还需考虑碰撞面的问题,如果是两个圆形物体碰撞,我的思路如下:1.获取两圆横纵坐标之差dx,dy,距离r;两圆x,y方向分速度喵1,vy1,喵2,vy2。设两圆质量为m1,m2。

2. 计算两圆垂直于圆心连线方向的分速度沿x,y方向的分速度vqx1,vqy1,vqx2,vqy2。vqx1=(喵1*dy-vy1*dx)*dy/r^2,vqy1的值是将上述表达式中的"*dy/r^2"改为"*(-dx)/r^2"。同理计算vqx2,vqy2。在碰撞过程中,两圆垂直于圆心连线方向的分速度不变。

3. 计算两圆沿圆心连线方向的分速度的大小vp1,vp2(带正负)。vp1=(喵1*dx+vy1*dy)/r,vp2=(喵2*dx+vy2*dy)/r。按正碰处理。 4. 计算两圆沿圆心连线方向的末速度大小vr1,vr2。vr1=(2*m2*vp2+(m1-m2)*vp1)/(m1+m2),vr2=(2*m1*vp1+(m2-m1)*vp2)/(m1+m2)。

5. 计算末速度。喵1'=vr1*dx/r+vqx1,vy1'=vr1*dy/r+vqy1,喵2'=vr2*dx/r+vqx2,vy2'=vr2*dy/r+vqy2。 如有错误请指出,由于回复字数的限制,只能分多条回复,望见谅。


阿尔法官方阿尔法官方

emotion_编程猫_点赞

点赞3


评论

666


AlcalaAlcala

dd

点赞0


评论


小小爱html小小爱html

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

点赞1


评论


Shark_CJPShark_CJP

DD

点赞0


评论


流熙墨晨流熙墨晨

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

点赞0


评论

冰网3级了,魔禁3级了,我也要努力了

欸三级了吗?


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


评论

miui12的也很好康


MicfongMicfong

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

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

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

点赞2


评论


uHuoYuBaiuHuoYuBai

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

点赞0


评论


KiahKiah

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

点赞1


评论


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

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

点赞1


评论

+1


宝猪宝猪

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

点赞0


评论


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

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

点赞0


评论


萌新一个萌新一个

wood编辑器是什么?

点赞0


评论

wood.cod喵


CRP_辞旧CRP_辞旧

楼

 

点赞0


评论


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

密切关注你的教程

点赞0


评论


Mikasa_Mikasa_

难得看到个教程

点赞0


评论