KineticJS 补间问题答案

【问题标题】：KineticJS tween rect issueKineticJS 补间问题
【发布时间】：2014-01-28 18:23:01
【问题描述】：

我想制作一个小动画当你点击 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({ 节点：rect1，持续时间：1， ×：670，是：55 });

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

【问题讨论】：

标签： html canvas html5-canvas kineticjs tween

【解决方案1】：

我们不能使用同一个节点进行两次带有 x 和 y 坐标的补间。

【讨论】：

这更像是一条评论
是的，但我相信这是经过长期研究的答案:)

【解决方案2】：

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

【讨论】：