Question

我有这样的渐变：

var graphic = new createjs.Graphics().beginLinearGradientFill(
  ["#000", "#fff", "#000"],
  [0, 0.5, 1],
  0, 0,
  window.innerWidth, window.innerHeight
).drawRect(0, 0, window.innerWidth, window.innerHeight);
var shape = new createjs.Shape(graphic);

如何为渐变设置动画，使其看起来像是在移动？（即如果这是CSS制作，background-position会慢慢改变）

Answer 1

不幸的是，Canvas渐变并不像CSS那样简单。您必须在任何更改时重建渐变命令。

我构建了一个可以促进这一点的快速演示，虽然它需要最新的TXTJS的NEXT版本，它有一个很棒的ColorPlugin用于设置颜色停止的动画。

http://jsfiddle.net/lannymcnie/uhqake7e/ 更新：更轻松的方法http://jsfiddle.net/uhqake7e/2/

关键部分：

var colors = ["#ff0000", "#0000ff"],
    ratios = [0,1],
    w = 120, h = 120, // Shape dimensions
    x0 = 0, y0 = 0, x1 = 0, y1 = h; // Gradient dimensions

// Create shape

var shape = new createjs.Shape()
        .set({color1: colors[0], color2: colors[1]}); // Set initial color values
// Do the fill, and store the command for later
var fillCommand = shape.graphics.beginLinearGradientFill(colors, ratios, x0, y0, x1, y1).command;

有关命令的更多信息，请查看this article。

然后我们可以补间颜色值：

var tween = createjs.Tween.get(shape, {bounce:true, loop:true})
    .to({color1:"#00ff00", color2:"#ff00ff"}, 1000);

最后，在变化时重建渐变： [更新：更简单的方法]

tween.on("change", function(event) {
    fillCommand.linearGradient([shape.color1, shape.color2], ratios, x0, y0, x1, y1);
}

类似的方法是使用补间颜色，只是重绘形状的内容，但它需要您存储所有指令。此示例更新用于渐变的实际命令。

这太糟糕了，这有点令人费解，尤其是因为CSS非常简单：）

干杯。

如何使用TweenJS为EaselJS渐变设置动画？

1 个答案: