Вот надумал начать написание библиотеки анимации. Написал основную функцию, потестите, пожалуйста, может кому и пригодится. Если будете создавать тестовые страницы, то чтобы зря не пропадало, оформите красиво и в примеры. В страницы можно включать любую цензурную рекламу.

Описание.

Демо 1

Демо 2

Файл библиотеки.



Это сообщение отредактировал(а) Ghirik - 26.6.2008, 11:16

Хоть подобных вещей существует уже дофига (и больше), но мне нравится (здорово оно все летает )) =)) Как говорится, изобретение велосипеда повышает скилл и экспириенс =) Основное на что стоит давить (опять же в виду большого количества подобных фич в различных фреймворках) - это высокая производительность, быстрота работы и легковесность относительно ресурсов и кода.

Я пытался гуглить  с целью поиска библиотек с подобной производительностью, но так ни чего и не нашел. Обычно изменяют один-два параметра, изменение же всех размеров, цветов и прозрачности одновременно, приводит все скрипты, какие мне удалось найти, к забвению. Мой скрипт вытягивает плюс к этому ещё и анимирование нескольких объектов одновременно. Ну как не похвастаться!   Попробуйте пощелкать быстро по зеленым кнопкам в этом примере, почти что видео   Как правило, при таком режиме, скрипты затыкаются и появляются рывки. Этот же, начинает тормозить, но плавность не теряет.

Действительно, если у кого есть на примете анимационные библиотеки/функции с подобной производительностью, дайте пожалуйста ссылочку. Будет очень полезно посмотреть, как эти вопросы решают другие люди. Я сам так и не освоил ни одного фреймворка, и сужу о их анимационных способностях в основном по демонстрационным страницам.

Это сообщение отредактировал(а) Ghirik - 27.6.2008, 09:31

Интересное начинание. Заметил следующие. Сказано что изменение координат линейно зависимо но в demo 1 заметил такую вещь как смешение по горизонтали опережает смещение по вертикали из-за этого наблюдаю эффект упирания в стенку и потом непродолжительное сползания по ней. Код ещё не глядел поэтому возможно так и задумано. Я так понял что счас используется линейный способ движения от начальных к конечным координатам. В дальнейшем вы планируете использовать функцию пользователя для вычисления координат. А планиркете ли вы задание траектории набором точек не описываемых какой либо функцией, с возможностью движения по ним как линейно последовательно от точке к точке так и с использованием аппроксимационного вычисления траектории по уже заданным точкам?

Это есть результат влияния разного размера сторон и конечного положения точек объекта. Приращение каждой величины происходит в процентах(step), переданных вами инициализирующей функции. Например Если указано 0.1, то с каждым шагом, оставшееся расстояние будет умножено на 0.1 и результат прибавлен к изменяемой величине. Поскольку все размеры и расстояния разные, то у самых коротких конечное положение наступает раньше. И в целом, при линейном приращении получается нелинейное движение объекта. В большинстве случаев такое движение смотрится, как так и задуманное, но иногда всё же хочется видеть ровное движение.

Я сейчас решаю два важных момента. Первый связан с желанием сделать возможным многократную инициализацию одного и того же объекта для получения нескольких обработчиков. В нынешнем релизе такое невозможно. Сижу переколпачиваю весь код  .

Второй задачей стоит вопрос вынесения из функции математики создающей троекторию движения. Если всё пойдет как надо, то результатом будет совершенно любая закономерность движения. Задаваться она будет при инициализации, включением одного из предложенных мной вариантов или подключением функции пользователя. Пока я не вижу препятствий, чтобы объект двигался даже по окружности. Т.е., такие троектории, как небольшое проскакивание конечных значений и позледующее додавливание, это простая задача. 



Нет, такого режима не будет, любое перемещение можно описать формулой, есть всего лиш одно ограничение - каждое новое перемещение происходит всегда через одинаковые промежутки времени. Это необходимо, чтобы не нарушалась частота кадров.



Вот почему я и написал про использование полиномиальных функций. Если всё получится, то можно будет составить табличку в MS Excel, исходя из полной шкалы в 100%, и наглядно посмотреть на графике построение полинома. Для построения оного, нужно иметь хотя бы три точки. Выданную Excel-ом формулу можно будет передать функции, а она уже проаппроксимирует значения.

Говоря о создании нескольких обработчиков для объекта, я имел ввиду вот такие возможности функции. Т.е., сейчас, легкость кода позволяет всё это делать, но задать два движения одному объекту нельзя. В приведенной страничке вначале вылазять "олбасы"   , а потом они же разворачиваются. Скоро и моя так сможет....

Отгулял заслуженный...

Новые моменты.
По рекомендациям в разных форумах,  получил представление, что стоит сделать из этого начинания.
Переписал полностью всю библиотеку, в результате...

1. В главной функции полностью удален анализ некорректного ввода параметров, что привело к сокращению кода до "ужасно" малого размера. 
2. Провел несколько сравнительных экспериментов с анимационными способностями Квери, Акулы..., позже покладу результаты (моя, безусловно побеждает).
3. Как и обещал, сейчас, пользователь может сам задавать формулу, которая будет определять траекторию движения. Из за этой особенности, немного усложнен механизм инициализации, но размер результирующего кода, остается несоизмеримо малым с первым вариантом.
4. Открываю код, но без комментов и только основную функцию...  Пока нет времени, а для себя я комменты не пишу, ещё не так стар, чтобы забыть и пишу не сложно, чтобы запутаться... Позже прокомментирую. Код будет всегда открытым, просто в новом релизе будут довольно много дополнительных, непосредственно сопутствующих и помогающих процессу анимации функций.  Жду крититеских или опровергающих политику сообщений. Вопросы задавайте здесь или на форуме поддержки.


Самое главное.
Перевожу общение с библиотекой в качественно иной уровень.
Здесь находится ссылка на Developer Tool для этой библиотеки.

При написании Developer Tool возникла масса вопросов, которые мне не решить без Вашего участия.

Основная задача, стоящая перед этим продуктом (и передо мной), заключается в упрощении механизма создания инициализирующих функций. Кнопка code будет выдавать результирующий код инициализации, определенных в Developer Tool настроек.

Показанная мной ссылка на Developer Tool - это только макет.

Задумка такая.

Пользователь библиотеки подключает одной строчкой скрипт к любой из страниц своего сайта, на которой хочет создать анимационные эффекты. В результате, на его странице появляется кнопка с позицией фиксед, нажатие на которую приведет к открытию Developer Tool. Developer Tool берет со страницы, на которой он активирован, все объекты с абсолютным позиционированием и пользователь может выбрать объект, над которым будет издеваться.
Пользователь настраивает для каждого CSS-свойства предпочетаемую траеткторию движения, задает время анимационного процесса, указывает количество шагов анимации, и т.д...
Переключается на вкладку code(пока не работает, занимаюсь подсветкой кода), на которой получает готовый код инициализации выбранного объекта. Мало того, он может закрыть Developer Tool и посмотреть движение объекта, изменить траекторию и снова посмотреть... короче, отладить в реальных условиях. Пока, сохранение настроек пользователя будет выполняться через файлы хранящиеся на сервере (малость php), чтобы пользователь мог посмотреть движение в разных браузерах, не проводя повторных манипуляций с настройками.

Сейчас у меня возникает несколько вопросов к людям сведующим и часто занимающимся такими задачами.
Не хочется делать бесполезную работу. Хочется, чтобы продукт стал действительно полезным потребителям. Developer Tool, как и библиотека будет бесплатным. Давайте обсудим задачи, которые должен выполнять Developer Tool, выскажите свои пожелания.
Изначально, мной было задумано использование интерактивного корректирования траектории анимации. Я уже даже сделал драгин для точек диаграммы. Вы можете их перемещять по вертикали мышкой, но написать математику для создаваемой пользователем вручную диаграммы у меня не хватает уму.    Хотелось, чтобы пользователь потянул точку, и получил в результате искривление диаграммы (это то я могу!), но ещё, получил соответствующую этому искривлению формулу. Т.е., функцию, которая опишет все его манипуляции. Понимаю, что это не так уж сложно, с математической точки зрения, но с моей  - мама не горюй!  
Потому, расположенное в правой части меню фильтров, пока не задействованно.

Что то,  я уже сильно много написал... задавайте вопросы...

Очень сожалею, но пока сложно применить новый релиз, не выложил ещё примеры инициализации.
Сейчас мне нужна Ваша поддержка и ваши пожелания по поводу функциональности Developer Tool. Что добавить, что убрать за ненадобностью... где чего исправить... и т.д....

Добавлено через 10 минут и 32 секунды
да, я там очень много нафлудил между тэгами <style>, может кто поможет с оптимизацией?

Это сообщение отредактировал(а) Ghirik - 22.8.2008, 20:22

А что за формула то ищется?
Если у меня есть отрезок и я "тяну" его за любую из его точек (за исключением точек начало и конец), 
а затем отпускаю, то получаю в итоге два: 
Если конечно не требуется парабола и т.п.

Это сообщение отредактировал(а) Michael.de - 23.8.2008, 20:53

Вот я как раз про это и написал, что треугольник то построить не проблема. Пересчитать позиции точек с коэффициентом и всё, можно даже и изогнуть всяко разно... Но если пользователь несколько раз потянет, подкорректирует, и, к примеру, применит фильтрацию с какой то добротностью, то точки будут перестроены не от начальной до конечной, а только на участке определенной добротностью фильтра. И это уже практически невозможно описать... мне... 

Наверное, и на самом деле невозможно, не прибегая к серьезным вычислениям... А если и получится, то довольно сложные вычисления в цикле, при инициализации, могут надолго затормозить процесс загрузки страницы.

Есть ещё вариант, передавать функции anima готовый массив с позициями ста точек, а потом достраивать недостающие. Достраивание, я кстати, пока тоже смутно себе представляю... Я имею ввиду, если имеем 100 точек - сто шагов, типа сто процентов, то как пересчитать это дело например на 180 точек или на 60, сохранив траекторию. Ну и конечно передача массива - как то не красиво...

Я пока вижу только один способ, позволяющий пользователю прямо в Developer Tool создавать нужную диаграмму, это прямо в JavaScript-е создавать полиномиальные функции. Знаю что для этого нужно всего то решить систему из трёх-черырех уравнений, в зависимости от степени полинома, но мне это самому не сделать. Хотя наверное это будет система из одного-двух уравнений, потому как начальная и конечная точки жестко заданы. Но все равно не знаю как посчитать эти коэффициенты.

Сейчас использую полиномиальные формулы, которые выдает MS Excel. Можно конечно написать простенький макрос для Эксела и дать пользователям, но это, IMHO, кривехонькое решение. Тогда уж проще вообще исключить функции редактирования диаграммы. Сделать десяток вариантов и на этом успокоиться...

В общем, если кто может расчитать коэффициенты для подобного уравнения:
y = 0.0005*x*x*x - 0.0747*x*x + 3.408*x - 2.3338
то покажите на примере механизм расчета.
Полином выше третьей степени считать бессмысленно, но третью то хотелось бы иметь.

В случае с полиномиальным построением диаграммы, уже конечно не будет такой гибкости редактирования графика, но этого вполне хватит для создания практически любых зависимостей.

Входные данные для вычисления коэффициентов такие

Первая точка всегда x = 1,  y = 1
Вторая, имеет произвольные координаты x = от 1 до 100,  y = от 1 до 100
И третья всегда x = 100,  y = 100

И если полином третьей степени, то две точки с произвольным знавением.

Если кто может....


Это сообщение отредактировал(а) Ghirik - 24.8.2008, 08:02

А разве (IMHO) не стоит обратная задача - по N точкам находить проходящую через них ф-цию?
Если нет, то дальше можно не смотреть 

1. Есть три точки с координатами: т.1 (x1,y1), т.2 (x2,y2) и т.3 (x3,y3). Пишем для них 3 уравнения:
y1=A*x1^2+B*x1+C
y2=A*x2^2+B*x2+C
y3=A*x3^2+B*x3+C

2. Вычитаем из одного уравнения по очереди остальные (например из 1го - 2е и 3е):
y1-y2=A*(x1^2-x2^2)-B*(x1-x2)
y1-y3=A*(x1^2-x3^2)-B*(x1-x3)

3. Находим оба коэф. и подставляем значение одного в другое уравнение:
3.a
A=(y1-y2+B*(x1-x2))/(x1^2-x2^2)
B=(A*(x1^2-x3^2)-y3+y1)/(x1-x3)

3.b
A=(y1-y2+ (A*(x1^2-x3^2)-y3+y1)/(x1-x3) *(x1-x2))/(x1^2-x2^2)

3.c
дальше A вытаскивается за скобки и находится его числовое значение. Затем оно подставляется во второе выражение --> теперь мы имеем значение B
Значение C находится подстановкой значений A и B в любое начальное уравнение.

По такому же принципу можно найти расчётные формулы для ф-ции, проходящей через N точек. Например для 4х точек - будет кубическое уравнение с 4мя коэф. и т.д. 
IMHO: Мне кажется, что обойтись можно параболой, а на "пересекающихся" участках считать их среднее арифметическое. Т.е. если есть 5 точек:
A, B, C, D, и E, образованные 3мя параболами: ABC, BCD и CDE, то на участке AB действует расчёт для ABC, на BC - среднее арифм. для ABC и BCD. Ну и т.д.

P.S. Расчёты было-бы неплохо перепроверить, т.к. считал сам и мог ошибиться 

Michael.de, огромное спасибо за расширенный ответ. Я знал только первый пункт из вашего ответа.    А что делать дальше с тремя уравнениями не имел представления. Буду пробовать...



Нет уж....   Если сейчас у меня всё получится, то ограничимся двумя пользовательскими точками, а может и одной, если будет большое торможение при расчете.



Думаю это не подойдет. Будет не добиться плавности приращения/убывания, стыки, как не обсчитывай, будут выбиваться из общей картины, и сами параболы дадут несколько сгущений на диаграмме. Я уже проводил эксперименты с прогрессией, она даже больше параболы подходит.

Если динамически в цикле менять коэффициен прогрессии по можно получать подобные кривые:



с плавным заходом и выходом.
Но результирующая формула получается неоправданно сложной. Увидев всю эту геморойность с несколькими коэффициентами (я имею ввиду, если ползователь несколько раз искривит диаграмму), даже не стал пытаться собирать все вычисления в кучу. Если на странице пользователя будет 20-30 анимируемых объектов, то инициализация может очень на долго затянуться с такими сложными вычислениями.

Пошел считать....




Это сообщение отредактировал(а) Ghirik - 25.8.2008, 09:28

Полином выгоднее тем, что результирующая формула с обсчитанными коэффициентами несравненно проще любого механизма построения кривой из отезков. Дело в том, в инициализирующую функцию нужно отдавать формулу. А представьте, как будет выглядеть формула обсчитывающая диаграмму поделенную на несколько участков. Очень сложно...

Извините, я бегло прочитал написанное выше, поэтому, пожалуйста, не пеняйте. А не проще ли траекторию движения делать с помощью кривых Безье? Они имеют замечательное свойство перехода к более низкому порядку, легко вычисляются. А прекрасный редактор довольно просто реализуется под не-ие браузеры при помощи svg графики и скриптов. Сам видел недавно скрипт, который редактирует кривую Безье.

А подходов к анимации я знаю два вида:
   1. первый через задание свойств объекта style
   2. или через cssText

Мне больше второй нравится, он гарантированно не создает скачков

JSman: да, в Википедии статья о них есть... с примерами: 
...правда результирующая кривая не проходит через заданные точки

Это сообщение отредактировал(а) Michael.de - 26.8.2008, 17:11

Наверное проще, раз везде используется... ещё бы формулу кто подкинул, чтобы ей отдать координату x, а она вернула y. А то у меня видите как с математикой.  



А про гарантию где можно прочитать? Скачки обычно происходят не из за способа отдачи браузеру новых координат/стилей, а от внутренних прерываний, на которые браузер отвлекается, откладывая таймауты при отрисовке.
Вообще, спасибо за подсказку. Обязательно попробую cssText, в случае с AnimaJS, это вообще идеальный способ вывода массива. Надо пересмотреть политику.

Добавлено через 7 минут и 23 секунды
Michael.de, я со вчерашнего дня всё читаю... читаю... читаю...    Так ни чего не сделал. Вот сейчас кривыми Безе загружусь...  

Кстати, преведенный мной выше рисунок диаграммы, как раз построен похожим на построение кривой Безе методом.