Анимация на чистом JS
доброго времени суток всем, я на основе этой статьи написал нижеследующий код:
function select(selector) { var s = typeof selector == 'string' ? document.querySelector(selector) : selector; this.animate = function (options, duration, delay) { var start = new Date().getTime(); duration = duration || 500; delay = delay || 10; if (delay < 10) delay = 10; else if (delay > 2000) delay = 2000; for (var prop in options) { var value = options[prop], currentValue = parseInt(s.style[prop]); setTimeout(function anim() { var now = (new Date().getTime()) - start, progress = now / duration, result = (value - currentValue) * progress + currentValue; s.style[prop] = result; if (progress < 1) setTimeout(anim, delay); }, delay); } }; return this; } select('#test').animate({ width: 57, height: 57 }, 2000); ну что-то на подоьие jquery.. вроде всё прекрасно работает, но только если свойств всего один, а если их больше, в таком случае анимация применяется только к последнему, в чём проблема? может быть что код некорректный? я просто только начал изучать ооп относительно js, поэтому подскажите пожалуйста как правильно поступить p.s: я понимаю что использовать библиотеки это быстро, 100% кроссбраузерно, без лишних нервов и т. д. и т. п., но изучать и понять принцип чистую js-анимации очень хочется, мне уже во сне снится это :) |
Tecvid,
потому что переменная prop строка 13 хранит последнее значение и строка 22 может получить только его. |
Цитата:
|
Tecvid,
через замыкание |
Tecvid,
Вариант с замыканием ... <div id="test" style="background-color: rgb(255, 102, 255); height: 50px; width: 50px"></div> <script> function select(selector) { var s = typeof selector == "string" ? document.querySelector(selector) : selector; this.animate = function(options, duration, delay) { var start = (new Date).getTime(); duration = duration || 500; delay = delay || 10; if (delay < 10) delay = 10; else if (delay > 2E3) delay = 2E3; for (var prop in options) { var value = options[prop], currentValue = parseInt(s.style[prop]); +function(a, b, c) { return function anim() { var now = (new Date).getTime() - start, progress = now / duration, result = (a - b) * progress + b; s.style[c] = progress < 1 ? result + "px" : a + "px"; if (progress < 1) setTimeout(anim, delay) } }(value, currentValue, prop)() } }; return this }; select('#test').animate({ width: 100, height: 100 }, 2000); </script> |
Цитата:
|
Tecvid,
по замыканию http://javascript.ru/basic/closure#p...-ispolzovaniya по +function http://shamansir.github.io/JavaScrip...unction.scopes |
Цитата:
|
имхо приведенная статья уже чудовищно устарела
неплохо для начала просто почитать текущий стандарт web-animations И мне очень не нравится когда используют setTimeout =( (ссылка на старую тему) |
MallSerg прав. Обязательно ознакомиться с css3 анимациями, если этого мало - с нативным animate(), его полифилом, и requestAnimationFrame - для ознакомления или написания своего 'animate()'
|
Часовой пояс GMT +3, время: 03:46. |