Question

我想创建一个小动画当你点击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);
});

对于rect0，一切正常，但rect1不会移动。

问题在于：

var tweenfr = new Kinetic.Tween（{ node：rect1，持续时间：1， x：670， y：55 }）;

因为如果删除它，则移动rect1。但在哪里....

Answer 1

你可以在这里使用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>

Answer 2

我们不能将同一节点用于补间x和y坐标两次。

KineticJS补间问题

2 个答案: