CODEWITHSUNDEEP
javascripthtml5-canvaskineticjs
user1767833
user1767833

Reputation: 129

KineticJS: How to scale the radius of a Group in Tween?

I'm trying to make a tween which makes a ball bigger and disappear from the screen. It's easy if you do it for a circle.

Tween for only circle: http://jsfiddle.net/VrUB6/

Code:(it won't let me paste only the link): 

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


});

But what I want to do is, same tween like this, but a text in the circle. For this I have to create a group, add circle and text in it and then tween the group(I guess). But if I do this, I can't change the radius in tween. It won't work.

Here is my work for it: http://jsfiddle.net/N2J2u/

Code: 

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.

Upvotes: 0

Views: 951

Answers (1)

markE
markE

Reputation: 105015

Set up multiple tweens where the circle expands+fades and the number fades:

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

});

Here is code and a Fiddle: 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>

Upvotes: 1

Related Questions