Question

我正在尝试使用Kinetic js

在画布中制作动画

画布尺寸940 x 600

动画是x和y

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

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

这可能与设定幅度有关，但我在js编码方面并不是那么好，但却知道什么是错误的。

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

Answer 1

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

这就是正弦波的样子

enter image description here

请注意，它始终会生成一个从+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>

Javascript动态文本动画对齐

1 个答案: