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 回答