Easel
快速入门
CDN 链接
gsap.registerPlugin(EaselPlugin)
最简用法
gsap.ticker.add(() => stage.update());
gsap.to(circle, {
duration: 2,
scaleX: 0.5,
scaleY: 0.5,
easel: { tint: 0x00ff00 },
});
描述
对诸如以下内容的 EaselJS 相关属性进行补间动画处理：saturation, contrast, tint, colorize, brightness, exposure，以及hue这些对象利用了 EaselJS 的ColorFilter和ColorMatrixFilter（参见EaselJS 官方网站了解有关 EaselJS 的更多信息）。你不需要使用插件来对 EaselJS 对象的普通数值属性（例如x和y）进行补间动画，但某些滤镜或效果需要特殊的操作，这正是 EaselPlugin 提供的功能。目前它仅处理与ColorFilter和ColorMatrixFilter相关的特殊属性，并且它可以对frame属性进行补间动画。MovieClip.
GreenSock 的 EaselPlugin 暴露了一些不属于 EaselJS API 的便捷属性，例如tint, tintAmount, exposure，以及brightness为了ColorFilter，以及saturation, hue, contrast, colorize，以及colorizeAmount为了ColorMatrixFilter。只需将你想要补间的值封装在easel: {}对象中即可。下面是一些示例：
//setup stage and create a Shape into which we'll draw a circle later...
var canvas = document.getElementById("myCanvas"),
stage = new createjs.Stage(canvas),
circle = new createjs.Shape(),
g = circle.graphics;
//draw a red circle in the Shape
g.beginFill(createjs.Graphics.getRGB(255, 0, 0));
g.drawCircle(0, 0, 100);
g.endFill();
//in order for the ColorFilter to work, we must cache() the circle
circle.cache(-100, -100, 200, 200);
//place the circle at 200,200
circle.x = 200;
circle.y = 200;
//add the circle to the stage
stage.addChild(circle);
//setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick
gsap.ticker.add(() => stage.update());
stage.update();
//tween the tint of the circle to green and scale it to half-size
gsap.to(circle, {
duration: 2,
scaleX: 0.5,
scaleY: 0.5,
easel: { tint: 0x00ff00 },
});
//tween to a different tint that is only 50% (mixing with half of the original color) and animate the scale, position, and rotation simultaneously.
gsap.to(circle, {
duration: 3,
scaleX: 1.5,
scaleY: 0.8,
x: 250,
y: 150,
rotation: 180,
easel: { tint: "#0000FF", tintAmount: 0.5 },
delay: 3,
ease: "elastic",
});
//then animate the saturation down to 0
gsap.to(circle, { duration: 2, easel: { saturation: 0 }, delay: 6 });
你也可以像这样对ColorFilter对象中的单个属性进行补间动画：
gsap.to(circle, {
duration: 3,
easel: {
colorFilter: { redMultiplier: 0.5, blueMultiplier: 0.8, greenOffset: 100 },
},
});
或者你可以像这样对图像的exposure进行补间动画，该值范围是 0 到 2，其中 1 是正常曝光，2 是完全过曝（白色），0 是完全欠曝（黑色）。或者定义一个brightness值，其使用相同的概念：取值范围为 0 到 2。这些效果对于图像尤其有用。
一个常见的错误是忘记将 EaselJS 相关属性封装在 easel 对象中，这是表明你的意图所必需的步骤。你还必须加载 EaselJS 的ColorFilter和/或ColorMatrixFilterJavaScript 文件。
