用Tweenjs製作動畫顏色

我最近切換到EaselJs並希望爲一個圓圈的顏色設置動畫。用Tweenjs製作動畫顏色

到目前爲止，我已經得到的代碼是這樣的：

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);

，但不起作用。什麼是動畫的正確屬性？

來源

2013-01-08 lhk

我不認爲有可能對這種形狀的顏色進行動畫製作，因爲您的形狀的繪圖可能包含許多不同的顏色，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);

我沒有測試這個，所以...讓我知道這是有效的。還要注意，只有在調用shape上的cache（）或updateCache（）時纔會應用/更新過濾器，因此您必須將其添加到您的記號功能中。

方法2）或者你只是重新繪製每一幀的形狀......但1）可能更容易。

來源

2013-01-12 02:15:24 olsn

我會盡快測試，並接受你的答案，如果它的工作原理。在此先感謝 – lhk

雖然這工作，我似乎無法讓它正常工作，當我想要的形狀充滿透明的顏色。我試着用alphaOffset設置ColorFilter，但是我無法讓它工作。相反，我使用了Jason Savage的解決方案。 – gmetzker

這裏有一個工作示例小提琴：http://jsfiddle.net/jinglesthula/6x0f8nff/ – jinglesthula

我只是想做同樣的事情。我的解決方案是補間形狀對象的自定義屬性，然後調用補間「更改」事件的更新方法。希望這可以幫助，我真的很陌生，但到目前爲止，我真的很喜歡它！

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(); 
});

來源

2013-10-21 20:03:16

看起來不錯。我無法測試它，因爲easeljs項目早已被放棄，但感謝您的意見。我的+1 – lhk

截至評論爲止，該項目的github最近的更新是5天前，所以它看起來活着（這是令人鼓舞的） – jinglesthula

我剛剛看了這裏的動畫色彩的另一種選擇：http://community.createjs.com/discussions/easeljs/4637-graphics-colour-animation

它利用createjs的注射法。我從所提供的代碼示例中複製了相關的代碼，並附有一些我自己的解釋。

根據該文檔：

注入（回調，數據）：提供用於注射的方法任意Context2D（又名Canvas）的API調用到圖形隊列。指定的回調函數將被調用的順序與其他繪圖指令（...）

有了這個方法，你可以例如改變本地context2d填充樣式，所以我們可以改變easeljs填充顏色進行繪製的帆布。

這裏我們告訴我們自己的setColor功能createjs（定義見下文），此功能將因此得到自動每前執行重繪：

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);

中的setColor函數的定義，調用畫布本地填充樣式的方法：

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. 
}

而且蜱功能，改變填充值：

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(); 
}

來源

2013-11-11 17:58:30 metatron

修改填充說明將會改變顏色。這可能有助於做動畫。我不知道這個影響，但這對我來說工作得很好。試試這個，

 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(); 

     })

希望這會有所幫助！

來源

2015-10-21 10:06:29

使用圖形命令有一個更簡單的方法。只需存儲您在應用該命令後的命令，並且可以隨時對其進行修改。 http://createjs.com/docs/easeljs/classes/Graphics.html#property_command – Lanny

謝謝。這真的很有幫助。 –

非過濾版本。

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（...）。command對象能夠更新。

小提琴

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

來源

2017-08-08 05:35:22

用Tweenjs製作動畫顏色

回答

相關問題