> For the complete documentation index, see [llms.txt](https://creative-coding.codelab.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://creative-coding.codelab.club/03-dong-hua-zhi-zuo-shang.md).

# 03 动画制作（上）

## 学习目标

* 探索概念：循环、事件、并行
* 熟悉积木：重复执行、当按下 x 键、换成 x 造型
* 了解动画原理，学会使用画板设计造型外观
* 主题创作：学习通过切换造型和移动角色来创作动画
* 在创作中实践“试验和迭代”、“测试和调试”

## 学习流程

### 1. 观看视频

观看视频[表情动画](https://www.bilibili.com/video/BV1jT4y1K7iA?p=6)、[Pico 和 Dot 散步](https://www.bilibili.com/video/BV1jT4y1K7iA?p=7)。通过创作“表情动画”了解动画原理。创作动画“Pico 和 Dot 散步”项目，探索可以和键盘互动的动画。

### 2. 完成课后拓展

拓展 1：设计新的表情动画，并将作品添加到[表情动画](https://create.codelab.club/studios/294/)工作室。

拓展 2：拓展“Pico 和 Dot 散步”项目，添加按下左键 Pico 和 Dot 都朝左移动的功能。

![](https://3966751758-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRJUzrLmHGOgA4K6RoE%2F-MRJVOFULnuW7kgoOHuH%2F-MRJwmOR8wRlg59b2YQs%2F3.1%20%E6%95%A3%E6%AD%A5.gif?alt=media\&token=db02fe80-a0aa-4469-9f85-e581cc2ee493)

###

### 3. 互动交流

欢迎进入 [CodeLab 论坛](https://discuss.codelab.club/c/8-category/8)和大家讨论和交流，你可以分享你的学习心得，提问寻求帮助，帮助他人解决问题。

### 4. 总结与反思

回顾自己的学习过程，在编程笔记中回答以下问题：

1. 你学到了什么？
2. 学习过程中你遇到的主要问题是什么？你是如何解决的？
3. 你发现了什么或者有什么想进一步了解的？

## 编程百科

### 1. 什么是“循环”？

在编程中，循环表示一件事情多次发生，相关的积木是重复执行。下图中的程序使用了重复执行积木让小猫一直旋转。

![](https://3966751758-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRJUzrLmHGOgA4K6RoE%2F-MRJVOFULnuW7kgoOHuH%2F-MRJx-kcqxSjnQZ7eehr%2F3.2%20%E5%BE%AA%E7%8E%AF.gif?alt=media\&token=4f2fe78b-1822-4c86-8144-e9f5a7de078d)

“重复执行”和“重复执行 10 次”这两个积木有什么区别呢？编写程序测试一下吧！

![](https://3966751758-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRJUzrLmHGOgA4K6RoE%2F-MRJVOFULnuW7kgoOHuH%2F-MRJxG6xGDV7zjf9ZX7Y%2F3.3%20%E5%BE%AA%E7%8E%AF%E7%A7%AF%E6%9C%A8.png?alt=media\&token=fdc0a126-050f-4568-8041-897511d66311)

### 2. 如何理解“并行”？

并行是指多个事情同时发生。比如小猫边移动边右转，要让多个事情同时发生，可以使用“事件”中的积木触发动作，比如“当绿旗被点击”。

![](https://3966751758-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRJUzrLmHGOgA4K6RoE%2F-MRJVOFULnuW7kgoOHuH%2F-MRJxQ8ACjtQE6HpjzPz%2F3.4%20%E5%B9%B6%E8%A1%8C.gif?alt=media\&token=4d438270-7f67-4c4c-80b3-e88287b0014c)

### 3. 走路动画

动画就是动起来的画面。要设计走路动画，可以一边让角色移动，一边切换角色走路的造型。

![](https://3966751758-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRJUzrLmHGOgA4K6RoE%2F-MRJVOFULnuW7kgoOHuH%2F-MRJxWC8yVXw-fGgj3hL%2F3.5%20%E8%B5%B0%E8%B7%AF%E5%8A%A8%E7%94%BB.gif?alt=media\&token=ca409e6f-184a-43e2-ba39-78dcedc7f566)

## 学习资源

* [表情动画工作室](https://create.codelab.club/studios/294)
* [走路动画工作室](https://create.codelab.club/studios/296/)
* [交流答疑专区](https://discuss.codelab.club/c/8-category/32-category/32)
* [手翻书动画](https://www.bilibili.com/video/BV17J411Q7yg)