文章/答案/技术大牛

发布

社区首页 >问答首页 >KineticJS:如何在Tween中缩放群的半径？

问KineticJS:如何在Tween中缩放群的半径？
EN

Stack Overflow用户

提问于 2013-06-29 20:06:43

回答 1查看 944关注 0票数 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.

javascript

html5-canvas

kineticjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-30 00:21:25

设置圆expands+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();
      });

});

这是代码和一个提琴：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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17380010

复制

相似问题

问KineticJS:如何在Tween中缩放群的半径？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KineticJS:如何在Tween中缩放群的半径？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KineticJS:如何在Tween中缩放群的半径？
EN