动画“fillLinearGradientColorStops"形状的

Animate "fillLinearGradientColorStops" of a shape

本文关键字：quot fillLinearGradientColorStops 动画      更新时间：2023-09-26

如何动画一个KineticJS Rect的fillLinearGradientColorStops ?我试过使用补间，但肯定不起作用。

矩形:

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']
});

渐变:

var tween = new Kinetic.Tween({
  node: rect,
  duration: 2,
  easing: Kinetic.Easings.Linear,
  fillLinearGradientColorStops: [0, 'black', 1, 'green']
});
tween.play();

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

从那里: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)来渐变颜色，然后在每一帧更新时将它们应用到动态形状: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();
}
相关文章：