17. FPTween Part3. Разработка собственных функций замедления

Серия статей посвященных библиотеке FPTween:

В статье FPTween Part1 Базовая анимация свойств Sprite, мы познакомились с библиотекой FPTween, которая позволяет быстро создать анимацию свойств объекта Sprite. Для анимации можно использовать стандартные адобовские функции замедления. Но это не предел, вы можете написать свои собственные функции замедления, что бы создать свой уникальны спец эффект.

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

  • t:Number — Текущее значение времени в секундах
  • b:Number — Начальное значение свойства
  • c:Number — Разница между начальным и конечным значениями
  • d:Number — Длительность анимации в секундах

Вернуть функция должна значение свойства интерполяции в заданное время.

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

Для разработки более сложного эффекта, необходимо создать функцию которая определят значение по кривой безье. Методы для работы с кривыми безье во флеше реализует класс BezierSegment . Для использования класса BezierSegment нужны 4 точки (две контрольные и две направляющие). Ниже приведен пример того как можно нарисовать кривую безье имея четыре точки:

Здесь должна быть флешка. Установите Flash Player


В этом примере точки a и d я вляются контрольными, а точки b и c – направляющими. Контрольные точки всегда имеют фиксированные координаты {0,0} и {1,1}. В зависимости от положения направляющих точек – видоизменяется кривая безье.

Для того что бы задать свою собственную функцию замедления используя кривую Безье воспользуйтесь классом FPCubic, из библиотеки FPTween:

Флешка в которой используется замедление по кривой безье с помощью направляющих b={1.59, 0.16}, c={-0.61, 1.02}:

Здесь должна быть флешка. Установите Flash Player


, и её исходный код:

Для эксперементов с кривой безье можно воспользоваться флешкой ниже. Измените координаты направляющих флешек и нажимайте на объекты View. Изменения тут же отобразятся в анимации:

Здесь должна быть флешка. Установите Flash Player

P.S. С помощью класса FPCubic можно создать функцию замедления только по двум опорным точкам, если же вам требуется создание кривой с более чем двумя опорными точками, необходимо строить более сложный график кривой безье. Как это сделать расскажу в следующей статье.

Скачать исходники можно здесь.

Да прeбудет с вами Flash.
Serious Sam
Эту статью прочитали 968 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress: