0

我正在尝试使用 Kinetic js 为画布中的文本设置动画

画布尺寸 940 x 600

动画是 x 和 y

我似乎无法正确定位，我希望垂直在顶部开始和结束，水平在左侧开始和结束。

目前他们正在朝着正确的方向前进，但他们在画布之外开始和结束。

这可能与设置的幅度有关，但我在 js 编码方面并不擅长，还不知道哪里出了问题。

http://jsfiddle.net/eev8u/3/

<script defer="defer">
  var stage = new Kinetic.Stage({
    container: 'horandvert',
    width: 940,
    height: 600
  });
  var layer = new Kinetic.Layer();

  var hbox = new Kinetic.Text({
    x: 50,
    y: 240,
    fontSize: 38,
    fontFamily: 'Calibri',
    text: 'Horizontal',
    fill: '#317d37',
    padding: 0,
  });

  var vbox = new Kinetic.Text({
    x: 330,
    y: 50,
    fontSize: 38,
    fontFamily: 'Calibri',
    text: 'Vertical',
    fill: '#317d37',
    padding: 0,
  });

  layer.add(hbox);
  layer.add(vbox);
  stage.add(layer);

  var amplitude = 400;
  var period = 3000;

  var anim = new Kinetic.Animation(function(frame) {
  hbox.setX (amplitude * Math.sin(frame.time * 1 * Math.PI / period)); 
  vbox.setY(amplitude * Math.sin(frame.time * 1 * Math.PI / period));
  }, layer);

  anim.start();      
</script>
4

1 回答 1

1

以下是如何调整正弦波动画中的对齐方式

这就是正弦波的样子

在此处输入图像描述

请注意，它总是生成一个从 +1 到 -1 的数字。

由于您的话遵循正弦值...

  • 当正弦产生负数时，您的文字会离开屏幕。
  • 当正弦生成正数时，您的文字会重新出现在屏幕上。

振幅：

  • 是正弦中的“摆动”：
  • 更大的振幅 == 更大的运动（左右或上下）

时期：

  • 是速度的调节器。
  • 它是每秒帧数（帧/周期）的分母。
  • 更大的周期==更慢的速度

所以...为了让您的文字在屏幕上摆动，只需将 Amplitude 添加到您的 X/Y 值。

这会将正弦值调整为始终为 0+。

这是动画的简化版本，它以始终显示在屏幕上的正弦波移动：

// amplitude is how much "swing" is in your words
var amplitude = 100;

// period adjusts the framerate of your animation
var period = 1000;

var anim = new Kinetic.Animation(function(frame) {
    hbox.setX (amplitude * Math.sin(frame.time/period)+amplitude); 
    vbox.setY(amplitude * Math.sin(frame.time/period)+amplitude);
}, layer);

这是完整的代码和小提琴：http: //jsfiddle.net/m1erickson/wazpx/

<!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-v4.5.1.min.js"></script>

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


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

var hbox = new Kinetic.Text({
  x: 50,
  y: 240,
  fontSize: 38,
  fontFamily: 'Calibri',
  text: 'Horizontal',
  fill: '#317d37',
  padding: 0,
});

var vbox = new Kinetic.Text({
  x: 240,
  y: 50,
  fontSize: 38,
  fontFamily: 'Calibri',
  text: 'Vertical',
  fill: '#317d37',
  padding: 0,
});

layer.add(hbox);
layer.add(vbox);

// amplitude is how much "swing" is in your words
// greater amplitude == greater swing
var amplitude = 100;

// period adjusts the framerate of your animation
// greater period == slower fps and therefore slower animation
var period = 1000;

var anim = new Kinetic.Animation(function(frame) {
    hbox.setX (amplitude * Math.sin(frame.time/period)+amplitude); 
    vbox.setY(amplitude * Math.sin(frame.time/period)+amplitude);
}, layer);

anim.start();


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-07-10T16:56:27.550 回答