Все про ActionScript в деталях и не только... - wfsection-Движение: замедление и отскакивание

Это руководство охватывает тему «замедление движения». часто задают урок: «Как сделать так, чтобы объект, движущийся к определенной точке, плавно замедлял свое движение по мерке приближения к цели, аккуратно вставая на пространство?»

Представьте, что вы ведете машину по шоссе со скоростью 60 км/ч, направляясь домой. Вы же не станете ехать со скоростью 60 км/ч вплоть до подъезда вашего дома чтобы мгновенно остановиться как только прибудете на пространство. Вы замедлите скорость до 40, затем до 25, 15, 10, 6, 4, 2, 1 и остановитесь. И начинаете движение вы подобным ликом, постепенно набирая скорость. Это будет «разгон». Я собираюсь в этом руководстве поговорить о «замедлении» и постараюсь сделать это поподробней.

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

Ну ладно, давайте разбираться с физикой.

Вы находитесь в каком-то одном пространстве и хотите попасть в другое.

Сначала давайте сделаем это в лике прыжка. Мы создадим объект и ситуацию, к какими будем работать на протяжении всего этого руководства. Создайте что-нибудь выкройки по вашему отбору, сконвертируйте это в мувиклип и вставьте последующий код:

onClipEvent(load){
_x=0;
_y=0;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}

onClipEvent(enterFrame){
_x=targetx;
_y=targety;
}

что он делает:

1. Сначала помещает объект в 0,0
2. Когда нажимается кнопка мыши, то координаты мыши помещаются в targetx и targety
3. Перемещает координаты мувиклипа в targetx и targety

Проверьте. Где бы ни был объект, когда вы кликаете мышкой, объект перемещается под мышиный курсор. Он делает это мгновенно, в одном фрейме.

Отлично, теперь давайте сделаем первое замедление. Теория последующая:

1. Мы знаем, где мы находимся.
2. Мы знаем, куда мы хотим перейти.
3. Мы можем оценить расстояние отсюда до сюда.
4. Мы перемещаемся ровно на половину расстояния.
5. С нашей новой позиции...

1. Мы опять знаем, где находимся.
2. Куда мы идем, мы тоже знаем – оно не менялось.
3. Вычисляем новое расстояние.
4. Перемещаемся ровно на половину расстояния.
5. Опять начинаем с п. 1.

С ежедневным витком цикла мы движемся все меньше и меньше. Так мы начинаем движение довольно быстро и движемся все медленнее и медленнее по мерке приближения к цели. Духовно, мы никогда по-действительному не достигнем цели, ведь не важно насколько мы близки к ней, мы всегда делаем половину шага. Но когда вы на расстоянии 1/100-й пикселя от цели, вы можете спокойно считать, что достигли ее!

Итак, переводя все это на ActionScript, я сначала, для ясности, проведу каждое вычисление в особой линии кода. Позже я покажу вам укороченную формулу, какая должна намертво запечатлеться в вашем мозгу. Также, для простоты, мы начнем с движения только по _x. Затем мы просто добавим подобные же черты для _y.

Вот оно:

onClipEvent(load){
_x
_x=0;
distx
_y=200;
}

onClipEvent(mouseDown){
targetx=_root._xmouse;
movex
}

new _x
onClipEvent(enterFrame){
distx=targetx-_x;
movex=distx/2;
_x+=movex;
}

(замечание: Некие люди спрашивали, что такое «+=». Это оператор инкрементирующего присваивания. Он берет переменную, прибавляет к ней значение и присваивает результат обратно той же переменной. Т.е. _x+=movex означает то же самое, что самое, что и _x=_x+movex )

Говоря диалектом шагов, описанных нами ранее:

1. Мы находимся в _x.
2. Мы хотим попасть в targetx.
3. Дистанция равна targetx-x или distx
4. Половина distx равна distx/2, какую мы присваиваем movex и затем прибавляем к _x: _x+=movex.
5. Последующий фрейм начинается с п.1.

Проверьте это. Теперь, когда мы кликаем мышкой, объект не просто сразу прыгает в эту точку, но плавно скользит туда. Да, конечно на этой стадии мы движемся лишь в горизонтальной плоскости, т.к. мы еще ничего не делали с _y. До того, как мы займемся ей, давайте сделаем наш код более тесным и избавимся от нескольких излишних переменных. Надеюсь, вы сможете разобраться в этих изменениях:

onClipEvent(load){
_x=0;
_y=200;
}

onClipEvent(mouseDown){
targetx=_root._xmouse;
}

onClipEvent(enterFrame){
_x+=(targetx-_x)/2;
}

Теперь в одной линии: _x+=(targetx-_x)/2 мы определяем расстояние, делим его на 2 и прибавляем к _x.

Если вы следили за мыслью до этого пространства, то можете спокойно сами добавить свой код для _y. Не забудьте targety в первом блоке кода:

onClipEvent(load){
_x=0;
_y=0;
}

onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}

onClipEvent(enterFrame){
_x+=(targetx-_x)/2;
_y+=(targety-_y)/2;
}

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

Если я вижу цифру в коде, вида «2» в нашем, это меня раздражает. Я почти всегда стремлюсь заменить их переменными, особенно, если я могу захотеть поменять их в определенный момент (это то, что мы собираемся сделать). Вот безапелляционный код, который мы будем использовать:

onClipEvent(load){
_x=0;
_y=0;
speed=2;
}

onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}

onClipEvent(enterFrame){
_x+=(targetx-_x)/speed;
_y+=(targety-_y)/speed;
}

Теперь довольно очевидно и естественно поиграть с переменной speed. Если вы установите ее в 1, то увидите, что клип ведет себя точно так же, как настоящий первый, который мы сделали. Объект просто прыгнет в цель за один шаг. чем выше значение переменной speed, тем медленнее будет движение.

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

И еще один бонус. Попробуйте установить переменную speed где-то между 0.5 и 1.0. Я обнаружил, что 0.6 приводит к вкусному эффекту. Создается эффект «отскакивания» или «резинки». Вы теперь делите расстояние на дробное количество. Это заставляет объект двигаться дальше, чем дистанция до цели. Он перелетает цель и улетает дальше. Затем он летит обратно, снова перелетает, но уже не настолько далеко, как в первый раз. И так далее, пока не остановится.

Вот и все, что я хотел сказать про замедление. На настоящем действии, существуют более затейливые формулы, которые используют разные математические функции, но я думаю, что вы обнаружите, что приведенная формула довольно беглый и простой путь достижения необычайного результата в 99% инцидентов. Привыкнув к ней, вы можете экспериментировать с иными качествами мувиклипов: _rotation, _alpha, scale и так далее. В мнение, я хочу привести всеобщую формулу, какую вы должны запомнить:

СледующийШаг = (КудаМыХотимПойти – ГдеМыСейчасНаходимся)/Скорость;

Все обычно заканчивается на формуле:

Качество = (Цель – Качество) / Скорость;

Сочинитель : Кейт Петерс (Вакансии в Ставрополе. Работа для студентов. )
Перевод: Антон Жучков