到目前为止,在本系列中,我已经介绍了paper.js中的项目和项目、路径和几何图形以及用户交互。该库还允许您为项目中的各种项目制作动画。如果将其与根据用户输入进行操作的能力相结合,您可以创建一些非常酷的效果。本教程将介绍如何在paper.js中为项目设置动画。
本教程的后面部分还将介绍图像处理以及如何处理单个像素的颜色。该库还使您能够从矢量创建栅格,这将在最后介绍。
动画基础知识
Paper.js中的所有动画均由onFrame事件处理程序处理。处理程序内的代码每秒执行最多60次。每次执行后视图都会自动重绘。逐渐改变函数内部的一些属性可以创建一些非常好的效果。
onFrame处理函数还接收event对象。该对象具有三个属性,为我们提供与动画相关的信息。
第一个是event.count,它告诉我们处理程序执行的次数。第二个是event.delta,它为我们提供了自上次执行处理程序以来经过的总时间。第三个是event.time,它为我们提供了自第一帧事件以来经过的时间。
您可以在处理程序中为许多属性设置动画。在我们的示例中,我将旋转三个矩形并更改中心矩形的色调。考虑下面的代码: