【动态】码绘VS手绘的对比——有点萌的开关

【动态】码绘VS手绘的对比——有点萌的开关

• 背景简介
• • 主题
• 成果展示
• 前期分析
• 制作过程
• 体会与思考
• 参考资料

背景简介

上一次简单的通过静态的手绘与码绘对两者进行了一些简单的对比，这一次更加好玩了，我们来做动画！

主题

用手绘和码绘两种方式创作“运动”主题的作品，并撰写 告，对比二者在表现“动态”方面的异同。

成果展示

首先还是把成果展现给大家看看，然后再进行解析。

• 背景、文字、开关面板以及静态的两个表情
• 要让表情动起来并且能够自动变换
• 加上交互
• 眨巴眼
• 嘴和眼的略微偏移
• 脸的形变
• 速度变化
• 颜色变化

以上的制作步骤是我在做完之后总结出来的，有些小细节真是非常容易忽略。很多步骤也是边做边加进去的。

制作过程

1. 背景、文字、开关面板以及静态的两个表情
   这一步相对简单，没有太多的技术含量，唯一值得提的一点就是笑脸的嘴巴是由两个颜色不同的椭圆叠加而成的。
   这一步做出来的效果如下：

2. 嘴和眼的略微偏移
   5、6、7三个步骤是非常细微的改变，但是对于最后的实现运动的效果有着非常大的作用
   给眼睛和嘴巴增加新的动画，让眼睛和嘴巴在动画开始时向运动方向偏移10个像素。然后设置一个触发条件，当圆脸到达面板的最顶端的时候，让眼睛和嘴巴恢复。

3. 脸的形变
   6、7两个步骤是我在将原始动画逐帧查看之后才发现的小细节，在原始动画中，圆脸在运动时会有轻微的横向拉伸以及纵向压缩的变化。

4. 速度变化
   不光是脸型有变化，整个动画的速度也是有讲究的，在靠近中间的地方速度越快，结合脸型的变化会让人觉得圆脸有一点点的粘滞感和一点软软的感觉。这种动画效果比单纯的平移给人带来的感受是非常不一样的。大概萌的精髓就在这里了吧。
   

5. 一些作为程序员的小傲娇
   前面添加了眨眼的小动画，但是我现在想要每次将开关拨动道on的时候就会立刻眨眼（程序员的控制欲吧）
   并且由于最后要提交的作业是一个动画，我还要增加一个在动画和交互之间转换的选项，最后的效果就是下面这样的。
   （动画版的成果在最开始展示了。）
   

7. 局限性
   在了解创作方式和创作理念之后我们也可以来分析一下手绘与码绘的局限性，或者说两者擅长的领域是什么。目前看来，码绘的局限性还很大，因为如果想要画出一个精细的人物，用手绘比码绘来得快多了，因为在这个作品中点线面的关系太多了。用程序来写，估计要到天荒地老了。
   但是如果说是简单的几何图像，那么码绘更加精准，并且占用的储存空间也更小，几行代码可比一个完整的图像要小得多。

最后贴一下手绘作品：

参考资料

1.《用代码画画》:
0.1 用代码画画——搞艺术的学编程有啥用br> https://blog.csdn.net/magicbrushlv/article/details/77922119
1.1 开始第一幅“码绘”——以编程作画的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565
2. 以编程的思想来理解绘画—— (一)用”一笔画“表现“过程美”
https://blog.csdn.net/magicbrushlv/article/details/82634189