不同于其它设计软件，使用 Framer 设计可交互原型时，更多的是要和代码打交道。对于很少接触编程的设计师来说，代码一直是“天书”一般的存在。其实设计师对于编程的抵触及恐惧绝大部分是心理作用。我们觉得那些代码看不懂，其实可能是我们真的只看了一眼而已，并没有深入去看去读，更不用说去尝试写了。但其实，尝试用心去写一段代码之后，你会发现这无非是换了一种方式进行创作，它远没有那么神秘，也没有那么难以掌握。 就像作家用文字描述身边的事物，画家用画笔描绘周边的风景一样，编程也不过是我们用代码去描述一个元素、界面或逻辑。你可以把代码看做色彩或文字，随意地组合玩味，体验一种逻辑之美。 不如今天我们就一起用代码在 Framer 中写一个小动画。假设我们想要做一个控制声音播放暂停的按钮，我们先写一段文字来描述这个动效： 最开始，有一个绿色的按钮，上面写着“播放”；当我点击这个按钮时文字变成了“暂停”，按钮也变成了红色；当我再次点击时，按钮又恢复了绿色并显示“播放”。之后每次点击，就如此循环往复这个过程。 假如我是一个作家，那么我已经完成了对这个过程的“构建”。但我现在是一个学习编程的设计师，所以我要用代码来描绘它。设计师天生对于图像更加敏感，那我就先画个设计稿吧。 图片: 动效示意图 在这张图中我们可以看到 Framer 中最重要的两个概念：动画和状态。动画是不同状态之间的过渡效果，状态是动画开始或结束的节点。要实现上图这样的效果，首先我们要让颜色（颜色在代码中是用数值表示的）逐渐过渡，其次是文字的变化，不过文字好像不能连续变化，没关系我们让文字的位置移动过渡吧，就像这样： 图片: 动画中间某个状态 一切就绪，下面我们就开始写代码吧。首先，我们来翻译第一句话，画一个绿色的按钮： button = new Layer x: 204 y: 382 width: 160 height: 4…