Проблема с прямой анимацией KineticJS

Я хочу создать небольшую анимацию, когда вы нажимаете на rect0. rect0 и rect1 переходят на новую позицию и после этого возвращаются на первую.

<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.

Проблема в:

var tweenfr = new Kinetic.Tween({ узел: rect1, продолжительность: 1, x: 670, y: 55 });

Потому что, если вы удалите его, rect1 переместится. но где....


canvas html html5-canvas tween kineticjs
person Eyhze    schedule 09.01.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

здесь вы можете использовать функцию reverse().

<!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>
person Shyam James    schedule 05.06.2014

arrow_upward
0
arrow_downward

Мы не можем использовать один и тот же узел для анимации дважды с координатами x и y.

person Shyam James    schedule 06.06.2014
comment
это больше комментарий - person Mirco; 06.06.2014
comment
да, но я считаю, что это ответ после долгих исследований :) - person Shyam James; 07.06.2014