的Javascript动力学文本动画对准

画布大小动画在一个画布文本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>

来源

2013-07-09 Daisy Oopsy

下面是如何在正弦波动画调整对齐

这是一个正弦波的样子

enter image description here

注意到它总是产生从+1到-1的数字。

因为你的话按照正弦值...

你的话屏幕外时，正弦产生负数。
当正弦产生正数时，屏幕上会显示您的词语。

幅度：

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

期：

是速度的调节器。
它是以每秒帧数（帧/周期）为单位的分母。
大周期==速度慢

所以......让你的话摆动屏幕，只需添加幅度与X/Y值。

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

这里是动画的一个简化版本，在正弦波移动这总是在屏幕上：

下面是完整的代码和一个小提琴：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-10 16:56:27 markE

的Javascript动力学文本动画对准

回答

相关问题