0

ボールを大きくして画面から消えるトゥイーンを作ろうとしています。円にすると楽です。

サークルのみのトゥイーン: http://jsfiddle.net/VrUB6/

コード:(リンクだけを貼り付けることはできません):

var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 500
      });
      var layer = new Kinetic.Layer();
      var circle = new Kinetic.Circle({
        x: 100,
        y: 100,
          radius: 30,
          fillRadialGradientStartPoint: 0,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: 0,
          fillRadialGradientEndRadius: 90,
          fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
          stroke: 'black',
          strokeWidth: 0.4,
        opacity: 1
      });

      layer.add(circle);

      stage.add(layer);

circle.on('mousedown', function(){

     var tween = new Kinetic.Tween({
        node: circle, 
        duration: 0.8,
          radius: 80,
        opacity: 0,

      });


        tween.play();


});

しかし、私がやりたいのは、これと同じトゥイーンですが、円の中のテキストです。このためには、グループを作成し、その中に円とテキストを追加してから、グループをトゥイーンする必要があります (推測)。しかし、これを行うと、トゥイーンで半径を変更できません。うまくいきません。

これが私の仕事です：http://jsfiddle.net/N2J2u/

コード：

var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 500
      });
      var layer = new Kinetic.Layer();
      var circ = new Kinetic.Circle({
        x: 100,
        y: 100,
          radius: 30,
          fillRadialGradientStartPoint: 0,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: 0,
          fillRadialGradientEndRadius: 90,
          fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
          stroke: 'black',
          strokeWidth: 0.4,
        opacity: 1
      });
var group = new Kinetic.Group({
    draggable: true,
});
group.add(circ);

var complexText = new Kinetic.Text({
        x: 97,
        y: 90,
        text: '4',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: '#555',
    padding: -5,
        align: 'center'
      });
group.add(complexText);
      layer.add(group);

      stage.add(layer);

group.on('mousedown', function(){

     var tween = new Kinetic.Tween({
        node: group, 
        duration: 0.8,
          radius: 80,
        opacity: 0,

      });

      // start tween after 20 seconds
      setTimeout(function() {
        tween.play();
      });

});
 Thanks for the help.
4

1 に答える 1

1

円が展開してフェードし、数字がフェードする複数のトゥイーンを設定します。

group.on('mousedown', function(){

     var tweenCirc = new Kinetic.Tween({
        node: circ, 
        duration: 0.8,
        width: 80,
        opacity: 0,
      });

     var tweenComplexText = new Kinetic.Tween({
        node: complexText, 
        duration: 0.8,
        opacity: 0,
      });

      // start tween after 20 seconds
      setTimeout(function() {
        tweenCirc.play();
        tweenComplexText.play();
      });

});

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/dvfr2/

<!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.4.min.js"></script>

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

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

    var layer = new Kinetic.Layer();
    stage.add(layer);

    var group = new Kinetic.Group({ draggable: true });
    layer.add(group);

    var circ = new Kinetic.Circle({
        x: 100,
        y: 100,
        radius: 30,
        fillRadialGradientStartPoint: 0,
        fillRadialGradientStartRadius: 0,
        fillRadialGradientEndPoint: 0,
        fillRadialGradientEndRadius: 90,
        fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
        stroke: 'black',
        strokeWidth: 0.4,
        opacity: 1
    });
    group.add(circ);


    var complexText = new Kinetic.Text({
        x: 97,
        y: 90,
        text: '4',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: '#555',
        padding: -5,
        align: 'center'
    });
    group.add(complexText);


    group.on('mousedown', function(){

         var tweenCirc = new Kinetic.Tween({
            node: circ, 
            duration: 0.8,
            width: 80,
            opacity: 0,
          });
         var tweenComplexText = new Kinetic.Tween({
            node: complexText, 
            duration: 0.8,
            opacity: 0,
          });

          // start tween after 20 seconds
          setTimeout(function() {
            tweenCirc.play();
            tweenComplexText.play();
          });

    });

    layer.draw();



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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-06-29T16:21:25.157 に答える