Pixi
快速入门
CDN 链接
gsap.registerPlugin(PixiPlugin)
最简用法
gsap.to(graphics, { duration: 2, pixi: { lineColor: "purple" } });
PixiPlugin 让在PixiJS中制作动画变得简单得多，这是一个非常高效的流行画布库。没有该插件时，某些属性的使用会有些麻烦，因为它们隐藏在 PixiJS API 的子对象中，例如object.position.x, object.scale.y, object.skew.x等等。此外，PixiJS 使用弧度而非角度来定义旋转值，这对大多数开发人员和设计师来说并不直观。PixiPlugin 可以为你省去很多烦恼：
//old way (without plugin):
gsap.to(pixiObject.scale, { x: 2, y: 1.5, duration: 1 });
gsap.to(pixiObject.skew, { x: (30 * Math.PI) / 180, duration: 1 });
gsap.to(pixiObject, { rotation: (60 * Math.PI) / 180, duration: 1 });
//new way (with plugin):
gsap.to(pixiObject, {
pixi: { scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60 },
duration: 1,
});
注意旋转值是以度数而不是弧度来定义的。太棒了！
请确保正确地包含了 PixiPlugin：
import * as PIXI from "pixi.js";
import { gsap } from "gsap";
import { PixiPlugin } from "gsap/PixiPlugin";
// register the plugin
gsap.registerPlugin(PixiPlugin);
// give the plugin a reference to the PIXI object
PixiPlugin.registerPIXI(PIXI);
PixiJS 示例
在这里可以找到大量基于 GSAP 的示例：这里是 PixiJS 文档！这是一个很好的起点。
颜色
PixiJS 要求你以类似0xFF0000的格式定义颜色相关值，但使用 PixiPlugin 后，你可以像在 CSS 中一样定义它们，比如"red", "#F00", "#FF0000", "rgb(255,0,0)", "hsl(0, 100%, 50%)"，或者0xFF0000。你甚至可以使用相对 HSL 值！"hsl(+=180, +=0%, +=0%)".
//named colors
gsap.to(graphics, { duration: 2, pixi: { lineColor: "purple" } });
//relative hsl() color that reduces brightness but leaves the hue and saturation the same:
gsap.to(graphics, {
duration: 2,
pixi: { fillColor: "hsl(+=0, +=0%, -=30%)" },
});
ColorMatrixFilter
另一个很大的便利之处是，PixiPlugin 能够识别一些特殊值，例如saturation, brightness, contrast, hue，以及colorize（它们都利用了一个ColorMatrixFilter底层机制）。
var image = new PIXI.Sprite.from(
"http://pixijs.github.io/examples/required/assets/panda.png"
);
app.stage.addChild(image);
var tl = gsap.timeline({ defaults: { duration: 2 } });
//colorize fully red. Change colorAmount to 0.5 to make it only halfway colorized, for example:
tl.to(image, { pixi: { colorize: "red", colorizeAmount: 1 } })
//change the hue 180 degrees (opposite)
.to(image, { pixi: { hue: 180 } })
//completely desaturate
.to(image, { pixi: { saturation: 0 } })
//blow out the brightness to double the normal amount
.to(image, { pixi: { brightness: 2 } })
//increase the contrast
.to(image, { pixi: { contrast: 1.5 } });
加载中...
或者如果你有一个自定义的ColorMatrixFilter，只需将其作为colorMatrixFilter属性传入，它就能处理状态间的动画过渡：
var filter = new PIXI.filters.ColorMatrixFilter();
filter.sepia();
gsap.to(image, { pixi: { colorMatrixFilter: filter }, duration: 2 });
BlurFilter
PixiPlugin 能够识别blur, blurX，以及blurY属性，因此应用模糊效果变得非常简单，无需再创建一个新的BlurFilter实例，添加到 filters 数组并单独对其属性进行动画处理。
//blur on both the x and y axis to a blur amount of 15
gsap.to(image, { pixi: { blurX: 15, blurY: 15 }, duration: 2 });
方向性旋转
你可以通过附加后缀来控制旋转补间的方向：顺时针clockwise ("_cw")，counter-clockwise ("_ccw")，或最短路径shortest direction ("_short")。举例来说，如果元素当前的旋转角度是 170 度，而你希望将其补间到 -170 度，正常的旋转补间将沿着逆时针方向旋转总共 340 度，但使用rotation: "-170_short"后缀的话，它将改为沿顺时针方向旋转 20 度！示例：
gsap.to(element, {
pixi: { rotation: "-170_short" },
duration: 2,
});
方向性旋转功能是在 GSAP 3.2 中添加的，所以请确保你已更新到最新版本。
其他属性
PixiPlugin 同样几乎可以处理其他任何属性——并没有预设的“允许”属性列表。PixiPlugin 只是为在 PixiJS 中做动画的开发者提升了工作效率。更少代码，更少麻烦，更快上线。关于 PixiPlugin 支持的所有属性完整列表，请参阅PixiPlugin 的 TypeScript 定义文件.
方法
PixiPlugin.registerPIXI( PIXI:Object ) ; | 将主 PIXI 库对象注册到 PixiPlugin，以便它可以找到所需的类/对象。你只需要注册一次即可。 |
