的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動力學文本動畫對準

回答

相關問題