3. 开发环境搭建
好，咱们正式开始动手了。
前面两章聊了不少概念，什么刷新率、帧缓冲区、VSync。我知道，光听理论容易犯困。所以这一章，咱们直接创建一个真正的动画项目。目标很简单：让一个方块的颜色，从红色平滑过渡到蓝色。
别小看这个例子。它背后藏着 TouchGFX 动画引擎最核心的机制。搞懂了它，后面那些复杂的粒子效果、滑动页面，你理解起来会快得多。
3.1 创建空白工程
我个人习惯，每次学新东西都从零开始建工程。这样能清楚每一步做了什么，出了问题也知道去哪找。
- 打开 TouchGFX Designer。如果你装的是 4.18 以上版本，界面应该跟我差不多。
- 点击 “Create New Project”。
- 在弹出的对话框里，选 “Empty Application”。别选那些带模板的，那些东西会干扰我们理解底层逻辑。
- 给项目起个名字，比如
MyFirstAnimation。 - 选择你的目标平台。如果你手头有开发板，就选对应的型号。如果没有，选 Simulator 就行，咱们先在 PC 上跑通。
点击 “Create”，等几秒钟。你会看到 Designer 自动生成了一个默认的 Screen，名字叫 Screen1。好，空白工程有了。
3.2 添加 Box 控件
接下来，我们要往屏幕上放一个方块。
- 在左侧的 “Widgets” 面板里，找到 “Containers” 分类下的 “Box”。
- 把它拖拽到中间的模拟屏幕上。
- 在右侧的属性面板里，调整一下大小和位置。我习惯设成 Width: 100，Height: 100，X: 110，Y: 100。这样它正好在屏幕中间偏左一点。
- 找到 “Color” 属性，先设成红色
#FF0000。
嗯，这里要注意。Box 控件是 TouchGFX 里最基础的绘制元素。它没有边框，没有图片，就是一个纯色的矩形块。说白了，它就是用来填充颜色的。
我在项目中遇到过有人用 Image 控件来做纯色背景，结果内存占用高了一倍。其实用 Box 就够了，轻量又高效。
3.3 实现颜色渐变动画
颜色放上去了，但它不会自己动。我们需要告诉 TouchGFX：从红色开始，花 2 秒钟，慢慢变成蓝色。
在 TouchGFX Designer 里做动画，靠的是 “Interactions”（交互）面板。
- 选中屏幕空白处，或者选中左侧的 “Screen1” 节点。
- 在下方找到 “Interactions” 标签页。
- 点击 “+” 按钮，新建一个 Interaction。
- Trigger（触发条件） 选择
Screen is started。意思是屏幕一显示，动画就开始。 - Action（动作） 选择
Animate widget。 - 在 “Target” 里，选择我们刚才放的那个 Box 控件。
- 在 “Animation” 部分，勾选 “Color”。
- End value 设成蓝色
#0000FF。 - Duration 设成
2000毫秒，也就是 2 秒。 - Easing equation 保持默认的
Linear就行。后面我们会专门讲缓动函数，现在先用线性的。
Animate widget 动作，是 TouchGFX 内置的动画引擎入口。它支持对 Box 的 Color、Alpha、Position、Size 等属性做插值。你只需要告诉它“起点、终点、时间”，剩下的计算它全包了。
设置好之后，点击右上角的 “Run Simulator”。你会看到那个红色的方块，慢慢变成了蓝色。是不是很简单？
3.4 理解 Animation 原理
效果出来了，但咱们不能只停留在“会操作”的层面。你得知道背后发生了什么。
为什么颜色会平滑变化？
因为 TouchGFX 的动画引擎，在背后做了一件事：插值。
它把 2 秒钟切成了很多小段（通常是 60 段，因为屏幕每秒刷新 60 次）。每一段，它都计算一次当前应该显示什么颜色。
比如第 0 毫秒，颜色是 RGB(255, 0, 0)。
第 1000 毫秒（1 秒时），颜色是 RGB(128, 0, 128)。
第 2000 毫秒（2 秒时），颜色是 RGB(0, 0, 255)。
这个计算过程，就叫 线性插值。
下面这张图，能帮你更直观地理解这个流程：
你看，整个流程其实就是一个闭环。每次屏幕刷新（VSync 信号到来），动画引擎就检查一下：当前时间到了没？没到的话，算一下新的颜色值，更新到 Box 上，然后等下一次刷新。
这就是 Animation 原理 的核心：基于时间的属性插值 + 帧同步刷新。
3.5 避坑指南
操作虽然简单，但有几个坑，我曾经踩过，今天一并告诉你。
- 忘记设置 Duration： 默认值是 0。如果你没改，动画会瞬间完成，根本看不到渐变效果。
- 在 Interaction 里同时修改多个属性： 比如同时勾选 Color 和 Position。虽然 TouchGFX 支持，但如果你对性能敏感，建议拆成两个独立的 Interaction，或者用更高级的
AnimationSequence。否则在低端 MCU 上可能掉帧。 - 在动画运行中修改了起始值： 如果你在动画还没结束时，又触发了一次新的动画，TouchGFX 会从当前值开始插值。这本身没问题，但如果你没处理好，颜色可能会“跳变”。
3.6 小结与思考
这一章，我们亲手创建了第一个动画项目。从空白工程，到添加 Box，再到设置颜色渐变动画，最后理解了背后的插值原理。
你想想看，一个简单的颜色变化，背后其实涉及了：
- 触发机制（Screen is started）
- 动画引擎（Animate widget）
- 插值算法（线性插值）
- 帧同步（VSync 驱动更新）
这些概念，在 TouchGFX 里是通用的。不管以后你做滑动列表、翻页效果，还是自定义复杂动画，底层都是这套逻辑。
好，现在你可以去试试：把 Duration 改成 5000 毫秒，看看颜色变化是不是变慢了？再把 Easing 改成 EaseInOut，看看效果有什么不同？
动手试一下，比看十遍教程都管用。