Question

我画了一个带有kinetic.js的矩形并在圆形路径中制作动画。在每个动画帧中，我减少它的半径。

现在我想画出这个矩形的动画路径。我不知道怎么能通过kinetic.js来做到这一点。请帮忙！

我的代码

var R = 150;
$(document).ready(function () {
var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});

var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: 'black',
    stroke: 'red'
});
layer.add(rect);
stage.add(layer);

var centerX = stage.width() / 2;

var anim = new Kinetic.Animation(

function (f) {
    var cX = stage.width() / 2;
    var cY = stage.height() / 2;
    R = R - 1 / 1000;
    var X = cX + R * Math.cos(f.time / 1000);
    var Y = cY + R * Math.sin(f.time / 1000);
    rect.setX(X);
    rect.setY(Y);
}, layer);
anim.start();

}）;

以下是代码：http://jsfiddle.net/tanvirgeek/n8z8N/

提前致谢。

Answer 1

这是您可以绘制遵循矩形路径的线段的方法：

演示：http://jsfiddle.net/m1erickson/Cbq2c/

enter image description here

首先创建一个跟踪矩形路径的Kinetic.Line

var line=new Kinetic.Line({
    stroke:"blue"
});
layer.add(line);

秒在动画循环中生成新的XY时，将该XY添加到线的点

var points=line.getPoints();
points.push(X,Y);
line.setPoints(points);

重要警告！此Kinetics动画循环产生了一个不受欢迎的暂停“交错”。 Chrome中的这种错位很小，在IE中很明显，在FireFox中也很糟糕。这似乎是由于Kinetic.Line无法顺利添加+绘制数千个数据变化点，因此我建议使用常规的html5 canvas和requestAnimationFrame来实现您的效果。

<!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-v5.0.1.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var line=new Kinetic.Line({
    points:[0,0,100,100],
    stroke:"blue",
    strokeWidth:2
});
layer.add(line);

var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 15,
    height: 15,
    fill: 'black',
    stroke: 'red'
});
layer.add(rect);

var cx=stage.getWidth() / 2;
var cy=stage.getHeight()/2;

var R=100;
var A=0;
points=[];

var anim = new Kinetic.Animation(
    function (f) {
        R = R - 1 / 100;
        A += Math.PI/180;
        var X = cx + R * Math.cos(A);
        var Y = cy + R * Math.sin(A);
        points.push(X,Y);
        line.setPoints(points);
        rect.setX(X);
        rect.setY(Y);
    }, 
layer);

anim.start();

}); // end $(function(){});
</script>       
</head>
<body>
    <div id="container"></div>
</body>
</html>

如何在kineticJS中绘制对象的动画路径？

1 个答案: