圈顏色過渡

我有一個簡單的腳本concisting畫一個圓圈：圈顏色過渡

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

var layer = new Kinetic.Layer(); 

var circle = new Kinetic.Circle({ 
    x: stage.getWidth()/2, 
    y: stage.getHeight()/2, 
    radius: 70, 
    fill: 'red' 
}); 

layer.add(circle);  
stage.add(layer);

我想要做的是在5秒的時間從紅色過渡這個圈子的顏色爲藍色（例如）。有什麼辦法可以實現嗎？

來源

2013-08-22 acid

您可以使用吐溫更改圓的顏色：

var tween = new Kinetic.Tween({ 
     node: circle, 
     fillR:0, 
     fillG:0, 
     fillB:255, 
     duration:5 
    }); 
    tween.play();

enter image description here

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/5PHTZ/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:400px; 
} 
</style>   
<script> 
$(function(){ 

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

    var circle = new Kinetic.Circle({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     radius: 70, 
     fill: 'red' 
    }); 
    layer.add(circle); 

    layer.draw(); 

    document.getElementById('recolor').addEventListener('click', function() { 
     var tween = new Kinetic.Tween({ 
      node: circle, 
      fillR:0, 
      fillG:0, 
      fillB:255, 
      duration:5 
     }); 
     tween.play(); 
    }, false); 




}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <button id="recolor">Recolor</button> 
    <div id="container"></div> 
</body> 
</html>

來源

2013-08-22 18:10:05 markE

我在哪裏可以得到這樣的的信息？ [kinetic]（http://kineticjs.com/）的記錄很差，我無法在[API]中找到'fill *'選項（http://kineticjs.com/docs/） – acid

fillR，G，B是part這裏記錄的Kinetic.Shape對象：http://kineticjs.com/docs/Kinetic.Shape.html我對動力學文檔有着複雜的感受。他們的示例網站是關於Kinetic（以及一般畫布）上最好和最易訪問的信息源：http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/但是他們的Kineticjs.com文檔絕對不適合訪問。我想因爲Kinetic正在快速發展，文檔的優先級較低。 – markE

回答

相關問題