Javascript анимации

F

F1r3Fl3x

Registered
Някой може ли да ми даде добро четиво относно джаваскрипт анимациите?
Поразрових се в нета и не можах да намеря нещо свястно.
Опитвах се да разбера начина на анимиране на обектите и пробвах с най-лесното - направата на класическата топка http://pockata.org/test.html ноо нещо не се получи както трябва :/
Разбрах, че главно работите се въртят около Math.cos и Math.sin функциите. Принципно знам какво са синус и косинус на ъгли, но нещо не мога да ги свържа с анимацията на елементи. Ако нямакой може да ми помогне да разгадая тази мистерия, ще съм му много благодарен :)
Само за мотивация, погледнете това: http://maettig.com/code/javascript/divo.html (и се прави с 10 реда код :X ):P
 
Най-популярни са JS анимациите базирани на време. Имаш следните параметри:

Код: 
var StartTime = (new Date).getTime(); // начално време
var duration = 700; // продължителност

var StartValue = 0; // начална стойност
var EndValue = 200; // крайна стойност
var DeltaValue = EndValue - StartValue; // промяна в стойността
					
var p; // процент, на който е изпълнена анимацията
var func = function(){}; // изпълнява се след края на анимацията
var elm = document.getElementById('myElement'); // елемента

var timer = setInterval( function(){
// изчислява текущия процент и проверява
// дали анимацията вече не е изпълнена
 if( (p = ((new Date).getTime() -StartTime)/duration ) < 1 ){
  // ако още тече променя стойността, в зависимост
  // стадия на изпълнение на анимацията
  elm.style.top = StartValue + p*DeltaValue + 'px';
 } else {
  // ако анимацията е готова слага крайната стойност
  elm.style.top = EndValue + 'px';
  clearInterval( timer );
  if( func ) func();
 }
}, 7 );

Надявам се разбра до тук. Всичко е много логично. А сега за sin и cos функциите. Те се използват за да се създаде специфично забавяне(easing). В примера по-горе анимацията е без забавяне - linear анимация.
Тригонометричните функции са само един от начините да създадеш забавяне, като случая използваш графика на функциите в интервала от [0, 1]. Друг начин е използването на степени, който ще разбереш по-лесно. Пример:

Код: 
// easeIn - забавяне в началото
// easeOut - в края
function easeInCubic(pos){ 
 return Math.pow(pos, 3);
}
function easeOutCubic(pos){ 
return (Math.pow((pos-1), 3) +1);
}
// Пример с тригонометрични функции
function easeInSine(pos){
 return pos == 1 ? 1 : 1 - Math.cos(pos * Math.PI/2);
}
function easeOutSine(pos){
return Math.sin(pos * (Math.PI/2));
}

/**
 Вече може да ги ползваш
 
 elm.style.top = StartValue + easeOutCubic(p)*DeltaValue + 'px';
**/

Уравненията за забавяне са математика не програмиране, ако искаш да пишеш свои собствени или да разбираш вече направените можеш да прочетеш книгата на Robert Penner за ActionScript ;) Самият той е написал почти всички популярни easing уравнения и ги е пуснал open source за свободно ползване и така всички js библиотеки ги ползват на готово.
Ако напишеш някое интересно уравнение споделяй :)
 
Мерси @Иво, първото нещо го разбрах, тъкмо снощи гледах и такива примери за анимации с таймстамп-а. А за втория пример, ще ми отнеме доста време да го разбера наптълно :D
При мен проблемът е, че примерно този тест с топката който правя, не знам как да определя когато топката се удари в рамката на браузъра да избира огледална траектория.
 
Много е лесен примера с топката. Даже не ти е нужна тази техника. Пускаш един интервал и увеличаваш top с 2px, когато top стане 0 почваш да го намаляш с 2px докато стане равно на разликата на височината на прозореца и височината на топката и след това пак го увеличаваш с 2px и тн. За left аналогично.

http://voidstudio.eu/ivo/canvas_game.html

Тука съм ползвал техниката.
 
Благодаря @Иво :) Сега съм малко зет тия дни, но като се освободя ще се позадълбоча с тези анимации, защото ми е много интересно :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе