Заставляем синус и косинус работать на нас

12.04.2008, автор Stormit, рубрики: ActionScript, Анимация

Очень часто анимацию, которую люди привыкли делать твинингом во флэше, можно заменить скриптами. Это полезно для как для баннеров (файл весит меньше), так и для игр (повышается контроль над движением, можно использовать как игровой момент).

Ни о чем таком сложном я говорить не буду - есть простые вещи, знакомые всем еще со школы. Это функции синуса и косинуса, которые во флэше доступны как Math.sin() и Math.cos(). Для их осознанного использования, достаточно понимать, что они имеют колебательный характер (как маятник - внизу ускоряется, по бокам - замедляется), принимают всего один параметр - число(момент времени) и возвращают результат в этот момент времени (от 0 до 1). Обычно нет разницы что использовать, sin или cos, отличаться будет только начальное состояние.
(шепотом, 3cbc8ca6613ce62cc455d8ac747fc112.)

Главное, что можно результат, возвращаемый функциями присваивать любому свойству. Если делать это каждый кадр, то свойство будет колебаться. На примере ниже, я меняю таким образом _x, _y, _width, _height, _rotation. Еще ниже есть Actionscript для каждого случая.

Код просто вешаем на клип.

1) Просто меняется свойство _y для самолета

 onClipEvent (load) {
    y0 = _y;
    t = 0;
    onEnterFrame = function(){
        _y = y0 + Math.sin(t += .15)*4;
    }
}

2) Меняем для каждой пчелы _x и _y. У каждой своя переменная времени, которая изменяется с разным шагом. Это рассинхронизирует движение по осям, если шаг одинаковый, то будет движение - восьмерка.

onClipEvent (load) {
    x0 = _x;
    y0 = _y;
    tx = Math.random()*10000;
    ty = Math.random()*10000;
    onEnterFrame = function() {
        _x = x0 + Math.sin(tx += .3) * 15;
        _y = y0 + Math.sin(ty += .4) * 25;
    }
}

3) Меняем свойство _rotation для кораблика

onClipEvent (load) {
    t = 0;
    onEnterFrame = function () {
        _rotation = Math.sin(t += .1) * 5 - 3;
    };
}

4) Меняем свойство _rotation для лампы, дополнительно смещаем нижний ореол света (символ light) по _x.

onClipEvent (load) {
    t = 0;
    x0 = _parent.light._x;
    onEnterFrame = function(){
        var k = Math.sin(t+= .05)*5;
        _rotation = k;
        _parent.light._x = x0 - k*3;//множитель подбирается
    }
}

5) Эффект Stretch and Squash. Изменяем свойства _width и _height (внимание, разные знаки)

onClipEvent (load) {
    y0 = _y;
    t = 0;
    onEnterFrame = function(){
        t += .5;
        _xscale = 100 + Math.sin(t)*30;
        _yscale = 100 - Math.sin(t)*30;
    }
}

6)Имитация гравитации. Изменяем _y, но значение синуса берем по модулю.

onClipEvent (load) {
    y0 = _y;
    t = 0;
    onEnterFrame = function(){
        _y = y0 - Math.abs(Math.sin(t += .2))*70;
    }
}

7)То же самое, но добавил растяжение-сжатие.

onClipEvent (load) {
    y0 = _y;
    t = 0;
    onEnterFrame = function(){
        _y = y0 - Math.abs(Math.sin(t -= .2))*70;
        _xscale = 100 + Math.sin(t*2)*20;
        _yscale = 100 + Math.cos(t*2)*20;
    }
}

8)То же, плюс _rotation и _x.

 onClipEvent (load) {
    y0 = _y;
    x0 = _x;
    t = 0;
    onEnterFrame = function(){
        _y = y0 - Math.abs(Math.sin(t -= .2))*70;
        _x = x0 + Math.sin(t + Math.PI / 2)*30;
        _rotation = Math.sin(t + Math.PI / 2)*10;
        _xscale = 100 + Math.sin(t*2)*20;
        _yscale = 100 + Math.cos(t*2)*20;
    }
}

Как видно из примеров, многое можно сделать таким способом. Это быстро и просто - идеальный случай для несложных задач. Сам регулярно использую ;)

Интересно на 21%

Хотите почитать позже? Добавьте в социальные сети или закладки

(9) Хитрых на тему «Заставляем синус и косинус работать на нас»

  1. Lerika 14.04.2008 в 12:22

    да, это отличный приём. простой, как 5 копеек, но очень эффективный.
    сама часто его использую :о)

  2. Destroyer 01.08.2008 в 18:18

    А таким способом реально анимировать птиц, которые находятся далеко (черные точечки)?

  3. Stormit 02.08.2008 в 11:59

    А почему нет?
    Хотя, смотря что ты имеешь ввиду - крыльями так не помашешь

  4. IgreX 09.01.2009 в 15:14

    .. Ну если крыльям rotate приписать, сдалека не видно, что крылья не сгибаются!

  5. Дмитрий 14.05.2009 в 07:43

    Я в программинге не очень. Куда именно вешать этот код? Создаю mc, в нем два слоя. Один с кодом, второй с анимируемым объектом. Все работает, но выскакивает ошибка «Clip events are permitted only for movie clip instances». Заранее спасибо.

  6. Stormit 14.05.2009 в 21:31

    Этот код нужно писать не в кадр а “вешать” на клип - писать в окошке Actions при выделенном клипе

  7. Msats 30.05.2009 в 17:48

    Подскажите кто-нибудь!
    Вешаю на клип
    onClipEvent (load) {
    y0 = _y;
    t = 0;
    onEnterFrame = function(){
    tank._y = y0 + Math.sin(t += .15)*4;
    }
    }
    мне пишут
    **Error** Scene=Scene 1, layer=Layer 6, frame=1:Line 1: Clip events are permitted only for movie clip instances
    onClipEvent (load) {

    Total ActionScript Errors: 1 Reported Errors: 1
    Что не так? :(

  8. Stormit 30.05.2009 в 22:44

    Так ты по ошибке код в кадре прописал, а нужно на клип “вешать” (когда нужный MovieClip выделен)

  9. Msats 31.05.2009 в 07:05

    Спасибо :) Протупил чего-то

Оставить комментарий