1

我有一个像这样的渐变：

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会慢慢改变）

4

1 回答 1

2

不幸的是，画布渐变不像 CSS 那样简单。每当渐变命令发生变化时，您都必须重建它。

我构建了一个可以促进这一点的快速演示，尽管它需要最新的 TweenJS 的 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;

有关命令的更多信息，请查看这篇文章。

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

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 是如此简单:)

干杯。

于 2017-08-29T17:23:17.267 回答