Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2014, 22:58
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Анимация на чистом 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-анимации очень хочется, мне уже во сне снится это
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2014, 23:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

Tecvid,
потому что переменная prop строка 13 хранит последнее значение и строка 22 может получить только его.
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2014, 00:13
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Сообщение от рони Посмотреть сообщение
Tecvid,
потому что переменная prop строка 13 хранит последнее значение и строка 22 может получить только его.
а как тогда сделать правильно? чтобы одновременно анимировались все указанные свойства
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2014, 00:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

Tecvid,
через замыкание или перебор добавить в саму функцию anim

Последний раз редактировалось рони, 27.11.2014 в 00:28.
Ответить с цитированием
  #5 (permalink)  
Старый 27.11.2014, 00:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

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>
Ответить с цитированием
  #6 (permalink)  
Старый 27.11.2014, 01:03
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Сообщение от рони Посмотреть сообщение
Tecvid,
через замыкание или перебор добавить в саму функцию anim
спасибо вам огромное! ммдаа в js с замыканиями реально как-то иначе)
Ответить с цитированием
  #7 (permalink)  
Старый 27.11.2014, 01:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

Tecvid,
по замыканию
http://javascript.ru/basic/closure#p...-ispolzovaniya
по +function
http://shamansir.github.io/JavaScrip...unction.scopes
Ответить с цитированием
  #8 (permalink)  
Старый 27.11.2014, 01:30
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Сообщение от рони Посмотреть сообщение
Tecvid,
по замыканию
http://javascript.ru/basic/closure#p...-ispolzovaniya
по +function
http://shamansir.github.io/JavaScrip...unction.scopes
а за ссылки особое спасибо! очень очень признателен
Ответить с цитированием
  #9 (permalink)  
Старый 27.11.2014, 02:05
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

имхо приведенная статья уже чудовищно устарела
неплохо для начала просто почитать текущий стандарт
web-animations
И мне очень не нравится когда используют setTimeout =( (ссылка на старую тему)
Ответить с цитированием
  #10 (permalink)  
Старый 27.11.2014, 05:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

MallSerg прав. Обязательно ознакомиться с css3 анимациями, если этого мало - с нативным animate(), его полифилом, и requestAnimationFrame - для ознакомления или написания своего 'animate()'
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация в JS и KineticJS Straj Общие вопросы Javascript 1 14.08.2014 22:53
Проекты на чистом js kidar2 Общие вопросы Javascript 7 09.01.2014 14:26
data-click на чистом js diman91 Events/DOM/Window 13 09.01.2014 00:45
аналог ajaxupload на чистом js Гугл-мен Общие вопросы Javascript 1 04.11.2013 13:49
Анимация из PNG и JS. Solovei95 Ваши сайты и скрипты 6 14.10.2011 05:57