KineticJS tween rect issue

Question

I want to create a little animation When you click on the rect0. rect0 and rect1 go to a new position and after that get back to the first.

<div id="container"></div>
<script src="js/kinetic-v4.7.4.min.js"></script>
<script defer="defer">

var stage = new Kinetic.Stage({
    container: 'container',
    width: 890,
    height: 730
});
var layer = new Kinetic.Layer();
var rect0 = new Kinetic.Rect({
    x: 670,
    y:10,
    width:210,
    height:36,
    fill :"#6dbbfe"
});
var rect1 = new Kinetic.Rect({
    x: 670,
    y:55,
    width:210,
    height:36,
    fill :"#fb6aef"
});

layer.add(rect1);
layer.add(rect0);
stage.add(layer);

var tween = new Kinetic.Tween({
    node: rect0,
    duration: 1,
    x: 10,
    y: 168
});
var tweenr = new Kinetic.Tween({
    node: rect0,
    duration: 1,
    x: 670,
    y: 10
});
var tweenf = new Kinetic.Tween({
    node: rect1,
    duration: 1,
    x: 10,
    y: 528
});
var tweenfr = new Kinetic.Tween({
    node: rect1,
    duration: 1,
    x: 670,
    y: 55
});

rect0.on('mousedown', function() {     
    setTimeout(function() {
        tween.play();
        tweenf.play();
        setTimeout(function() {
            tweenr.play();                  
            tweenfr.play();
        }, 2000);
    }, 2000);
});

For rect0 everything works fine but rect1 does not move.

The problem is in:

var tweenfr = new Kinetic.Tween({ node: rect1, duration: 1, x: 670, y: 55 });

Because if you delete it the rect1 move. but where....

Answer 1

you can use reverse() function here.

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>

How people voted for Iphone  <input type="checkbox" name="sample_size" id="sample_size1">
<br>

<button class="btn-arow pull-right" id="arrow110">click</button>
<div id="container"></div>
<input type="hidden" id="orientation_1_1_0" value="horizontal">
<script type="text/javascript" defer="defer">
var stage = new Kinetic.Stage({
    container: 'container',
    width: 890,
    height: 730
});
var layer = new Kinetic.Layer();
var rect0 = new Kinetic.Rect({
    x: 670,
    y:10,
    width:210,
    height:36,
    fill :"#6dbbfe"
});
var rect1 = new Kinetic.Rect({
    x: 670,
    y:55,
    width:210,
    height:36,
    fill :"#fb6aef"
});

layer.add(rect1);
layer.add(rect0);
stage.add(layer);

var tween = new Kinetic.Tween({
    node: rect0,
    duration: 1,
    x: 10,
    y: 168
});
var tweenr = new Kinetic.Tween({
    node: rect0,
    duration: 1,
    x: 670,
    y: 10
}); 
var tweenf = new Kinetic.Tween({
    node: rect1,
    duration: 1,
    x: 10,
    y: 528
});/*
var tweenfr = new Kinetic.Tween({
    node: rect1,
    duration: 1,
    x: 670,
    y: 55 
});*/

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

        tween.play();
        tweenf.play();
        setTimeout(function(){
          tween.reverse();   

           tweenf.reverse();
      },2000);

});
</script>
</body>
</html>

Answer 2

我们不能在x和y坐标上使用同一节点两次补间。

KineticJS tween rect issue

Question

2 answers

solution1
0 2014-06-05 05:24:11

solution2
0 2014-06-06 08:36:41

KineticJS tween rect issue

Question

2 answers

solution1 0 2014-06-05 05:24:11

solution2 0 2014-06-06 08:36:41

solution1
0 2014-06-05 05:24:11

solution2
0 2014-06-06 08:36:41