PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Плавная анимация

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

DeepVarvar	Отправлено: 29 Ноября, 2014 - 23:28:29
Активный участник Покинул форум Сообщений всего: 10377 Дата рег-ции: Дек. 2008 Откуда: Альфа Центавра Помог: 353 раз(а)	Написал на чистом обертку для анимации. Вот она с каментами: CODE (javascript): скопировать код в буфер обмена function animate(elem, style, params) { // сколько "кадров" в секунду var framesPerSec = 30; // задержка между кадрами var frameTimeout = Math.floor(1000 / framesPerSec); // кол-во кадров для переданной длительности var framesCount = Math.floor(params.duration / frameTimeout); // объект состояния var animateData = {}; // единожды бежим по всем переданным к анимации значениям // и забиваем данными объект состояния for (var s in style) { // получаем текущее значение стиля в элементе var currentStyleValue = parseFloat(getStyle(elem, s)); animateData[s] = { current : currentStyleValue, // текущее complete : style[s][0], // конечное incremental : ( style[s][0] > currentStyleValue ), // (ин\|де)кремент step : ( Math.abs(currentStyleValue - style[s][0]) / framesCount ), // шаг (ин\|де)кремента measures : ( style[s].length > 1 ? style[s][1] : false ) // еденицы измерения }; } // сама анимация var _animate = function() { // если еще не все фреймы отыграли if (framesCount > 0) { // обновляем объект состояния var x, current; for (x in animateData) { // если это последний фрейм, то сразу применяем конечное значение // ибо бывает что step не ровный и может либо недожать либо пережать if (framesCount == 1) { animateData[x].current = animateData[x].complete; // инкремент } else if (animateData[x].incremental) { animateData[x].current += animateData[x].step; // декремент } else { animateData[x].current -= animateData[x].step; } // применяем состояние к стилям самого элемента current = animateData[x].current; if (animateData[x].measures) { current += animateData[x].measures; } elem.style[x] = current; } // отнимаем кадр framesCount -= 1; // запускаем таймаут для следующего кадра setTimeout(function() { _animate(); }, frameTimeout); // комплит калбяк } else if (params.complete) { params.complete(); } }; _animate(); } Пример вызова: CODE (javascript): скопировать код в буфер обмена animate( elem, { opacity : [1], top : [top, '%'], left : [left, '%'] }, { duration: 400 } ); Из примера вызова так же видно что я не стал заморачиваться с парсингом едениц измерения, а тупо передаю их вторым элементом массива, если они мне вообще нужны. И вроде все нормально. Но визуально это выглядит как говно. А именно - пока не поставишь кадров эдак 60 в секунду, оно делает все это дергано. Но на 60-ти кадрах уже браузер не успевает применить стили к элементу, если элемент большой и все такое. В jquery есть несколько алгоритмов расчета шага (easing). И дефолтный это - ленивая сюзанна. И это не линейный алгоритм, линейный там тоже есть, и тоже как и у меня, его колбасит. Так вот вопрос такой - чего бы такого плавного придумать? ----- Шта? Репозиторий?

esterio	Отправлено: 29 Ноября, 2014 - 23:39:32
Активный участник Покинул форум Сообщений всего: 5025 Дата рег-ции: Нояб. 2012 Откуда: Украина, Львов Помог: 127 раз(а)	а пробовал requestAnimationFrame? пишут что лучше его использовать и его полифил

Viper	Отправлено: 29 Ноября, 2014 - 23:45:05
Активный участник Покинул форум Сообщений всего: 4555 Дата рег-ции: Февр. 2007 Откуда: Симферополь Помог: 98 раз(а)	DeepVarvar пишет: чего бы такого плавного придумать можно порыть http://jqueryui[dot]com/effect/ Вдруг что сгодится. ----- Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе

DeepVarvar	Отправлено: 30 Ноября, 2014 - 02:43:13
Активный участник Покинул форум Сообщений всего: 10377 Дата рег-ции: Дек. 2008 Откуда: Альфа Центавра Помог: 353 раз(а)	esterio пишет: requestAnimationFrame Да, запилил: CODE (javascript): скопировать код в буфер обмена if (window.requestAnimationFrame) { requestAnimationFrame(_animate); } else { setTimeout(function() { _animate(); }, frameTimeout); } Помогло! А те кто не умеет, пусть пыхтят на 60 фпс. Плюсую. ----- Шта? Репозиторий?

esterio	Отправлено: 30 Ноября, 2014 - 15:26:14
Активный участник Покинул форум Сообщений всего: 5025 Дата рег-ции: Нояб. 2012 Откуда: Украина, Львов Помог: 127 раз(а)	если хочеш еще плавной анимации то лучше с помощью styleSheet создать класс CSS 3 transform и transform, потом добавить этот класс к елементу. потом можно оловить завершение анимации и удалить сгенерированый класс чтобы не висело напрасно. в таком случае подключиться GPU, что будет заметно быстрее но здесь уже поддержа хромает от осла 10 кажись, плюс префиксы нужно делать (Отредактировано автором: 30 Ноября, 2014 - 17:35:31)

DeepVarvar	Отправлено: 30 Ноября, 2014 - 16:51:34
Активный участник Покинул форум Сообщений всего: 10377 Дата рег-ции: Дек. 2008 Откуда: Альфа Центавра Помог: 353 раз(а)	esterio пишет: CSS 3 transform Не, не, нужно именно без трансформов. ----- Шта? Репозиторий?

OrmaJever	Отправлено: 30 Ноября, 2014 - 17:02:41
Активный участник Покинул форум Сообщений всего: 7540 Дата рег-ции: Янв. 2010 Откуда: Чернигов Помог: 299 раз(а)	DeepVarvar кроссбраузерность добавь http://habrahabr[dot]ru/post/114358/ ----- Если вы хотя бы 3-4 раза не решите всё выкинуть и начать заново - вы явно что-то делаете не так.

DeepVarvar	Отправлено: 30 Ноября, 2014 - 17:13:48
Активный участник Покинул форум Сообщений всего: 10377 Дата рег-ции: Дек. 2008 Откуда: Альфа Центавра Помог: 353 раз(а)	Не, щас не буду, просто сделаю пометку что тут у меня узкое место. Тестировать на зоопарке буду потом. ----- Шта? Репозиторий?

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.