Easing Generator и анимация движения в ActionScript 3.0

Easing Generator - это узкоспециализированное AIR-приложение, которое помогает в визуальном режиме создать сложные эффекты замедления и ускорения анимации. Программа поддерживает несколько движков анимации движения, написанных на ActionScript 3.0:

- Tweener;

- BetweenAS3;

- KTween;

- TweenMax.

Интерфейс программы прост:

В правой части программы сосредоточены основные настройки программы. Там вы можете выбрать движок, с которым хотите работать, а также настроить основные параметры анимации движения: функции ускорения/замедления; скорость анимации и её продолжительность. А кнопки «Copy» и «Show source» вам понадобятся, чтобы скопировать или просмотреть сгенерированный программой код анимации движения.

Внизу расположены окна предпросмотра, в которых отображается текущая анимация движения.

Остальное пространство занимает визуальный редактор для создания уникальной анимации замедления и ускорения. Просто изменяем линию-путь и смотрим на результат в окне предпросмотра.

Давайте испробуем программу в работе. В качестве движка я выбрал KTween. Теперь изменяем на свой вкус прямую в основном окне программы и жмём кнопку «Show source». Появляется код, автоматически созданный программой на основе введённых нами данных. У меня получился следующий код...

Код ActionScript 3.0:



import flash.geom.Point;
import fl.motion.BezierSegment;
import net.kawa.tween.KTween;

// Custom Easing Function for KTween
var ease:Function = function(t:Number):Number {
    var points:Array = [
        {point:[0,0],pre:[0,0],post:[0.2,0.2]},
        {point:[0.66,0.64],pre:[0.66,1.61],post:[0.66,-0.33]},
        {point:[1,1],pre:[0.8,0.8],post:[1,1]},
    ];
    var bezier:BezierSegment = null;
    for (var i:int = 0; i < points.length - 1; i++) {
        if (t >= points[i].point[0] && t <= points[i+1].point[0]) {
            bezier = new BezierSegment(
                new Point(points[i].point[0], points[i].point[1]),
                new Point(points[i].post[0], points[i].post[1]),
                new Point(points[i+1].pre[0], points[i+1].pre[1]),
                new Point(points[i+1].point[0], points[i+1].point[1]));
            break;
        }
    }
    return bezier.getYForX(t);
};

// Apply easing function such as...
KTween.to(target_mc, 4, {x:400}, ease);

Обращаю ваше внимание, что target_mc в данном коде - это тот MovieClip, к которому мы и применяем анимацию движения. Поэтому перед тем, как проверить работу кода, нам надо создать мувик target_mc.

А теперь давайте добавим созданный ранее в программе Easing Generator код в наше небольшое flash-приложение. Приложение будет состоять из кнопки btn и мувиклипа target_mc. Клик по кнопке btn будет вызывать анимацию мувика target_mc.

Код ActionScript 3.0:



/*
импортируем классы
*/
import flash.geom.Point;
import fl.motion.BezierSegment;
import net.kawa.tween.KTween;
/*
создаём кнопку
*/
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(event:MouseEvent):void
{
	/*
	устанавливаем для мувика target_mc начальное положение по оси x
	*/
	target_mc.x = 100;
	/*
	далее идёт код, скопированный из генератора
	*/
	// Custom Easing Function for KTween
	var ease:Function = function(t:Number):Number {
	    var points:Array = [
	        {point:[0,0],pre:[0,0],post:[0.2,0.2]},
	        {point:[0.66,0.64],pre:[0.66,1.61],post:[0.66,-0.33]},
	        {point:[1,1],pre:[0.8,0.8],post:[1,1]},
	    ];
	    var bezier:BezierSegment = null;
	    for (var i:int = 0; i < points.length - 1; i++) {
	        if (t >= points[i].point[0] && t <= points[i+1].point[0]) {
	            bezier = new BezierSegment(
	                new Point(points[i].point[0], points[i].point[1]),
	                new Point(points[i].post[0], points[i].post[1]),
	                new Point(points[i+1].pre[0], points[i+1].pre[1]),
	                new Point(points[i+1].point[0], points[i+1].point[1]));
	            break;
	        }
	    }
	    return bezier.getYForX(t);
	};
	// Apply easing function such as...
	KTween.to(target_mc, 4, {x:400}, ease);
}

Получили вот такой флеш-ролик: