使用Tweenjs动画颜色

时间:2013-01-08 19:37:55

标签: javascript html5 canvas tween easeljs

我最近改用了EaselJs,想要为圆圈的颜色设置动画。

到目前为止,我得到的代码是:

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(shape, { loop: true }).
    to({color:"#00FF00" }, 1000);

但这不起作用。动画的正确属性是什么?

5 个答案:

答案 0 :(得分:4)

我认为没有可能为这样的形状设置颜色的动画,毕竟你的形状的绘图可能包含许多不同的颜色,Tween应该如何知道要修改哪些颜色? 我有两种方法可以正确认识:

方法1)使用createjs.ColorFilter,将其应用于您的形状,然后补间过滤器的属性:

var shape = new createjs.Shape();
//making the shape shape white, so we can work with the multiplyers of the filter
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);
var filter = new createjs.ColorFilter(1,0,0,1); //green&blue = 0, only red and alpha stay
shape.filters = [filter];

var tween = createjs.Tween.get(filter, { loop: true }).
    to({redMultiplier:0, greenMultiplier:1 }, 1000);

我没有对此进行测试,所以...让我知道这是有效的。另请注意,只有在形状上调用cache()或updateCache()时才会应用/更新过滤器,因此您必须将其添加到tick函数中。

方法2)或者您只需每帧重绘一次形状......但 1)可能更容易。

答案 1 :(得分:4)

我只是想做同样的事情。我的解决方案是补间形状对象上的自定义属性,然后在补间'change'事件上调用update方法。希望这有帮助,我是创新的新手,但到目前为止我真的很喜欢它!

var s = new createjs.Shape();
s.redOffset      = 157;
s.blueOffset     = 217;
s.greenOffset    = 229;

s.updateColor = function()
{
    var color = createjs.Graphics.getRGB( 
        parseInt(this.redOffset), 
        parseInt(this.greenOffset), 
        parseInt(this.blueOffset), 
        1);

    this.graphics.beginFill( color ).drawRect(0, 0, 300, 300);
}

createjs.Tween.get(this.background).to({ 
    redOffset   : 255,
    greenOffset : 255,
    blueOffset  : 255
},  3000).addEventListener('change', function()
{
    s.updateColor ();
});

答案 2 :(得分:2)

非过滤版本。

var colorObj = { r:255, g:0, b:0 };
var shape = new createjs.Shape();
var command = shape.graphics.beginFill(createjs.Graphics.getRGB(colorObj.r, colorObj.g, colorObj.b)).command;
shape.graphics.drawCircle(60, 60, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(colorObj, { loop: true }).to({ r:255, g:255, b:255 }, 1000);
tween.addEventListener( "change", function( event ) {
    command.style = createjs.Graphics.getRGB(Math.floor(colorObj.r), Math.floor(colorObj.g), Math.floor(colorObj.b));
});

beginFill(...)。命令对象能够更新。

拨弄

https://jsfiddle.net/MasatoMakino/uzLu19xw/

答案 3 :(得分:0)

我刚刚在这里阅读了另一种动画颜色选项:http://community.createjs.com/discussions/easeljs/4637-graphics-colour-animation

它使用了createjs inject-method。我从提供的代码示例中复制了相关代码,并对我自己进行了一些解释。

根据文件:

  

注入(回调,数据):   提供将任意Context2D(aka Canvas)API调用注入Graphics队列的方法。将使用其他绘图指令(...)

按顺序调用指定的回调函数

使用此方法,您可以更改原生context2d填充样式,以便我们可以更改easeljs用于在画布上绘制的填充颜色。

这里我们告诉createjs我们自己的setColor函数(定义如下),这个函数将在每次重绘之前自动执行:

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.inject(setColor, data)
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

调用canvas本机fillStyle方法的setColor-function的定义:

function setColor(o) {
    // sets the context2D's fillStyle to the current value of data.fill:
    this.fillStyle = o.fill; // "this" will resolve to the canvas's Context2D.
}

更改填充值的tick函数:

function tick(evt) {
    count = (count+3)%360;
    // update the value of the data object:
    data.fill = createjs.Graphics.getHSL(count, 100, 50);
    // redraw the stage:
    stage.update();
}

答案 4 :(得分:0)

修改填充说明将执行更改颜色的技巧。这可能有助于制作动画。 我不知道这个的影响,但这对我来说非常好。 试试这个,

        var circle = new createjs.Shape();
        circle.graphics.f('#ffffff').s('#000000').ss(0.7).arc((30 * j),50,10, 0, Math.PI * 2, 1);
        circle.number = j;
        circle.addEventListener('click', function(e) {
            var fillStyle = e.target.graphics._fillInstructions[0].params;
            var currentFillStyle=fillStyle[1]+"";
            for (var i = 0; i < circles.length; i++) {
                var resetFillStyle = circles[i].graphics._fillInstructions[0].params;
                resetFillStyle[1] = "#ffffff";
            }

            if (currentFillStyle == "#00B4EA") {
                fillStyle[1] = "#FFFFFF";
            } else {
                fillStyle[1] = "#00B4EA";
            }
            stage.update();

        })

希望这有帮助!