Практическое применение функции Lerp
Здравствуйте мои дорогие читатели 
Очень рад что меня комментируют, приходят вопросы в личку и в аську. Значит всё что я тут делаю не пропадает почём зря
Сегодня речь пойдёт о такой замечательной функции Lerp – линейная интерполяция если по научному. Lerp передвигает значения чисел от одного к другому. Работает lerp следующим образом. Мы находим разницу между вторым и первым значением, умножаем на коэффициент между 0 и 1, и в конце складываем с первым значением.
Пример работы функции:
Lerp(100, 200, 0)=100
Lerp(100, 200, 1)=200
Lerp(100, 200, 0.5)=150
Lerp(100, 200, 0.25)=125
Lerp может применятся во множестве случаев, в этом посте я бы хотел рассмотреть один из них – реализация равнозамедленного (или равноускоренного) движения объекта.
Вот тут я накатал примерчик:
Поводите мышкой по экрану – серый маркер будет следовать за мышкой жёстко, а красный с некоторым отставанием.
Если нажать мышкой на флешку – выскочит меню, если нажать ещё раз уберётся. Причём движение это равнозамедленно, что приносит более приятный визуальный эффект
Реализуется всё это довольно просто. В обработчике ENTER_FRAME добавляем:
//Серый маркер жёстко привязан к координатам мыши marker1.x=mousePosX; marker1.y=mousePosY; //Красный маркер летает с некоторым опозданием marker2.x=Lerp(marker2.x,mousePosX,0.2); marker2.y=Lerp(marker2.y,mousePosY,0.2);
Меняя последний коэффициент 0.2 можно менять скорость маркера )
Аналогично можно сделать выпрыгивающее меню(тоже в обработчике ENTER_FRAME):
if(MenuOnScr) menuPanel.y=Lerp(100,menuPanel.y,0.8); else menuPanel.y=Lerp(480,menuPanel.y,0.8);
Булевская переменная MenuOnScr меняется при нажатии мыши.
Вот полный код примера. Функцию Lerp я вынес из математического класса специально для наглядности:
//Находится ли наше меню на экране var MenuOnScr:Boolean=false; //Запоминаем позицию мыши var mousePosX:Number=0; var mousePosY:Number=0; //Устанавливаем обработчики событий stage.addEventListener(Event.ENTER_FRAME, Update); stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove); //Наша замечательная функция LERP :) function Lerp(cx:Number,cy:Number,s:Number):Number { return cx + s*(cy - cx); } //Обновление положения объектов function Update(e : Event):void { //Обновления положения меню if(MenuOnScr) menuPanel.y=Lerp(100,menuPanel.y,0.8); else menuPanel.y=Lerp(480,menuPanel.y,0.8); //Серый маркер жёстко привязан к координатам мыши marker1.x=mousePosX; marker1.y=mousePosY; //Красный маркер летает с некоторым опозданием marker2.x=Lerp(marker2.x,mousePosX,0.2); marker2.y=Lerp(marker2.y,mousePosY,0.2); } //По клику мыши показываем или прячем меню function mouseDown(event:MouseEvent) { MenuOnScr=!MenuOnScr; } //Здесь запоминаем позицию мыши function mouseMove(e : MouseEvent):void { mousePosX=e.stageX; mousePosY=e.stageY; }
Весь код примера, с файлом FLA можно качнуть здесь: http://www.anegmetex.com/devblog/files/sampLerp.rar
Февраль 17th, 2010 at 15:43
Полезная информация. Спасибо…
Апрель 24th, 2011 at 10:14
Очень рад что нашел данную функцию именно на вашем сайте (привет с флешблогов!)
линейная интерполяция очень полезная штука (по старому опыту огл/дх деву)
Октябрь 21st, 2011 at 21:37
Блин. Забавно! Теперь можно не пользоваться TweenLite )))
Спасибо за статью ))))