Вход

Просмотр полной версии : Странное поведение анимации.

Questioner
09.11.2011, 19:01
Здравствуйте! Я прочел статью http://beta.javascript.ru/tutorial/animation и попытался сделать маятник. получилось вот: <!DOCTYPE HTML>
<html>
<body onload = "move(document.getElementById('a'))">

<script>
function move(el) {
var i = 0, fading = 180;
el.style.left = 0;
el.style.top = 0;
function fc() {
left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180);
el.style.left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180) + "px";
el.style.top = ((left / 320) * 320) + "px";
i++;
fading -= 0.125;
if(fading <= 0) {clearInterval(b)}
};
var b = setInterval(fc, 10);
}
</script>
<div style = "height: 320px; width: 320px; position: absolute; left: 295px">
<div style="height: 20px; width: 20px; background-color: blue; position: absolute; left: 0px; top: 0px" id = "a" onclick = "move(this)"></div>
</div>
</body>
</html>
скажите пожалуйста, что я делаю не так?
ksa
10.11.2011, 09:25
попытался сделать маятник
Раньше я маятник представлял себе иначе... :D Или это какой-то броуновский маятник?
fiw
10.11.2011, 13:43
Я полагаю что у вас проблемы именно с математическими операциями.
У вас получилась какая-то парабола неправильная)
Может быть код верный, а неточности проявляются от того, что при расчетах выводятся, числа с плавающей запятой. Точно не могу сказать. Я не знаю как сам маятник устроен.
ksa
10.11.2011, 13:49
Я не знаю как сам маятник устроен.
Приезжай к нам в волгоградский планетарий - я тебе покажу... :D
http://volgogradplanetarium.volgadmin.ru/starhall.aspx
на фотке мало что видно... :(

У вас получилась какая-то парабола неправильная
И парабола вычисляется по формуле
y=A*(x*x)+B*x+C
где A, B и C константы из множества R... А никак не sin() и cos(). ;)
Questioner
10.11.2011, 21:48
На основе этого кода придумал игру: поймай квадратик
<!DOCTYPE HTML>
<html>
<body onload = "move(document.getElementById('a'))">

<script>
var b;
function move(el) {
var i = 0, fading = 180;
el.style.left = 0;
el.style.top = 0;
function fc() {
el.style.left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180) + "px";
el.style.top = (Math.abs(Math.sin((i-fading/2)/180*Math.PI) * el.parentNode.clientHeight)) + "px";
i++;
fading -= 0.125;
if(fading <= 0) {clearInterval(b); alert("Вы проиграли!"); document.getElementById("a").onclick = function() {alert("Поздно!")}}
};
b = setInterval(fc, 10);
}
</script>
<div style = "height: 295px; width: 320px; position: absolute; left: 295px">
<div style="height: 40px; width: 40px; background-color: blue; position: absolute; left: 0px; top: 0px" id = "a" onclick = "alert('Вы выиграли!'); clearInterval(b); this.onclick = function() {}"></div>
</div>
</body>
</html>
Questioner
15.11.2011, 17:04
Кстати, маятник движется по сектору окружности, а не по параболе
trikadin
15.11.2011, 17:08
На основе этого кода придумал игру: поймай квадратик
Улучшать и улучшать)