Paper.js入门：动画和图像

到目前为止，在本系列中，我已经介绍了Paper.js中的项目和项 ， 路径和几何以及用户交互 。 该库还允许您为项目中的各种项目设置动画。 如果将其与基于用户输入的操作能力结合起来，则可以创建一些非常酷的效果。 本教程将介绍如何为Paper.js中的项目设置动画。

本教程后面的部分还将介绍图像处理以及如何处理单个像素的颜色。 该库还使您可以从矢量创建栅格，最后将进行介绍。

动画基础

Paper.js中的所有动画均由onFrame事件处理程序处理。 处理程序内部的代码每秒最多执行60次。 每次执行后，视图都会自动重绘。 逐渐更改函数内部的某些属性可以创建一些非常好的效果。

onFrame处理函数还接收一个event对象。 该对象具有三个属性，可为我们提供与动画有关的信息。

第一个是event.count ，它告诉我们执行处理程序的次数。 第二个是event.delta ，它为我们提供了自上一次执行处理程序以来经过的总时间。 第三个是event.time ，它为我们提供了自第一个帧事件以来已经过去的时间。

您可以为处理程序中的许多属性设置动画。 在我们的示例中，我将旋转三个矩形并更改中心矩形的色相。 考虑下面的代码：

var rectA = new Path.Rectangle({
  poin