Question

如何为KineticJS fillLinearGradientColorStops的{{1}}制作动画？我尝试使用补间，但肯定它不起作用。

矩形：

Rect

补间：

var rect = new Kinetic.Rect({
  x: 20,
  y: 20,
  width: 100,
  height: 100,
  fillLinearGradientStartPoint: { x: -50, y: -50 },
  fillLinearGradientEndPoint: { x: 50, y: 50 },
  fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});

请参阅小提琴http://jsfiddle.net/ZdCmS/。这不可能吗？

Answer 1

从那里：https://github.com/ericdrowell/KineticJS/issues/901

你可以使用外部补间库，比如GreenSock（http://www.greensock.com/gsap-js/）和它的ColorProps插件（http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html）补间颜色，然后在每次帧更新时将它们应用到Kinetic形状：http://jsfiddle.net/ZH2AS/2/

没有计划直接支持补间颜色停止渐变填充。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});
var layer = new Kinetic.Layer();



var linearGradPentagon = new Kinetic.RegularPolygon({
    x: 150,
    y: stage.height() / 2,
    sides: 5,
    radius: 70,
    fillLinearGradientStartPoint: {
        x: -50,
        y: -50
    },
    fillLinearGradientEndPoint: {
        x: 50,
        y: 50
    },
    fillLinearGradientColorStops: [0, 'white', 1, 'black'],
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
});

layer.add(linearGradPentagon);

stage.add(layer);



//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);

//object to store color values
var tmpColors = {
    color0: 'white',
    color1: 'black'
};


//tween the color values in tmpColors
TweenMax.to(tmpColors, 5, {
    colorProps: {
        color0: 'black',
        color1: 'red'
    },
    yoyo: true,
    repeat: 5,
    ease:Linear.easeNone,
    onUpdate: applyProps
});

function applyProps() {
    linearGradPentagon.setAttrs({
        fillLinearGradientColorStops: [0, tmpColors.color0, 1, tmpColors.color1]
    });
    layer.batchDraw();
}

Animate＆＃34; fillLinearGradientColorStops＆＃34;一个形状

1 个答案: