Paper.js入门指南：动画和图像

发布日期： 2023-09-03 阅读量： 作者： ADMIN

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

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

动画基础知识

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

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

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

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

var rectA = new Path.Rectangle({
  point: [300, 100],
  size: [200, 150],
  strokeColor: 'yellow',
  strokeWidth: 10
});

var rectB = rectA.clone();
rectB.strokeColor = 'orange';
rectB.scale(0.8);
var rectC = rectA.clone();
rectC.strokeColor = 'black';
rectC.scale(1.2);

function onFrame(event) {
  rectA.strokeColor.hue += 10 * event.delta;
  rectA.rotate(2);
  rectB.rotate(2);
  rectC.rotate(2);
}

登录后复制

# 入门指南 # Paperjs # 动画和图像

上一篇: 微信小程序循环及嵌套循环的使用

下一篇: 关于微信小程序生命周期的介绍

Paper.js入门指南：动画和图像

随便看看