Анимация по траектории. Уравнение движения точки по траектории имеет вид. Введение в кинематику

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

Рисуем траекторию

Для этого нам достаточно на самом первом слое нарисовать линию (не обязательно замкнутую), используя, например, «pencil tool ». Я рекомендую вам поставить сглаживание на Smooth в опциях карандаша, чтобы движения были плавными и без рывков.

Шаг 2

Создание «путевого» слоя

Теперь этот слой нам надо преобразовать в «траекторный» слой. Правой кнопкой мыши кликаем на слое, на котором расположена наша траектория и выбираем «Guide ». Иконка перед названием слое дожна измениться с листа на молоток. Если это так, значит вы все делаете правильно правильно и уже близки к конечному результату. Теперь, когда «путевой» слой готов, нам необходимо ему подчинить ему слой с объектом. Для этого создадим новый слой, поместим на него рисунок, который должен двигаться по траектории, затем зажмите левую кнопку мши на новом слое и перетащите под слой траектории так, чтобы слой стал зависим (иконка и название слоя немного сместится вправо, иконка слоя с траекторией тоже изменится).

Шаг 3

Создание движения объекта

Однако это не все. Теперь нам необходимо заставить объект двигаться по траектории. Для этого на слое с объектом передвинем его к началу траектории:

Перейдем на 15 кадр и создадим там KeyFrame нажатием F6 . В этом кадре передвинем объект к концу траектории:

Теперь чтобы тело двигалось, нам нужно создать Motion Tween . Для этого кликаем правой кнопкой мыши на пространстве между первым и последним кадром и выбираем Create Motion Tween , в свойствах необходимо поставить галочку Orient to path . Все, теперь за 15 кадров объект переместится из начала траектории в ее конец.

ВАЖНО: При создании замкнутой траектории не стоит забывать, что флеш выбирает кратчайший путь, и если просто передвинуть объект на последнем кадре ниже по траектории относительно первого кадра движения по окружности не получится, можете убедиться сами. Для этого можно разбить траекторию на три участка, т.е. начальной точкой для второго участка будет конец первого, для третьего - конец второго и т.д. Удачи!

Движение по траектории реализуется аналогично выше рассмотренному примеру. Для реализации движения по прямой приращиваются на определённые константы переменные, являющиеся узловыми точками (в примере переменные x2,y2). Для задания более сложно траектории можно использовать различные параметрические кривые. В случае движения на плоскости обычно изменению один параметр. Рассмотрим пример реализации движения окружности по декартову листу.

Декартов лист - плоская кривая третьего порядка, удовлетворяющая уравнению в прямоугольной системе. Параметропределяется как диагональ квадрата, сторона которого равна наибольшей хорде петли.

При переходе к параметрическому виду получаем:

Программная реализация выглядит следующим образом:

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

namespace WindowsFormsApplication1

public partial class Form1: Form

private int x1, y1, x2, y2;

private double a, t, fi;

private Pen pen = new Pen(Color.DarkRed, 2);

InitializeComponent();

private void Form1_Load(object sender, EventArgs e)

x1 = ClientSize.Width / 2;

y1 = ClientSize.Height / 2;

t = Math.Tan(fi);

private void Form1_Paint(object sender, PaintEventArgs e)

Graphics g = e.Graphics;

g.DrawEllipse(pen, x2, y2, 20, 20);

private void timer1_Tick(object sender, EventArgs e)

t = Math.Tan(fi);

x2 = x1 + (int)((3 * a * t) / (1 + t * t * t));

y2 = y1 - (int)((3 * a * t * t) / (1 + t * t * t));

private void button1_Click(object sender, EventArgs e)

Описание ряда интересных кривых для создания траектории движения можно найти в «Википедии» в статье «Циклоидальная кривая».

Задание по лабораторной работе

Изучите с помощью справки MSDNметоды и свойства классовGraphics ,Color ,Pen иSolidBrush . Создайте собственное приложение дляанимации в соответствии с индивидуальным заданием.

циклоиде .

гипоциклоиде приk =3,k =4,k =6,k =2,1,k =5,5

Создайте программу движения окружности по эпициклоиде при различных значенияхk .

Разработайте программу отображающую процесс построения гипотрохоиды .

Создайте программу моделирующую построение кривых с помощью спирографа .R , r , d задаются произвольно.

синусоиде .

Движение окружности по спирали .

Разработайте программу движения окружности по трактрисе (кривой погони).

Движение окружности по трисектрисе Каталана (Кубика Чирнгауза).

фигур Лиссажу , с произвольными задаваемыми параметрами.

Разработайте приложение, отображающее процесс построения связанных звезд , с произвольным числом вершин.

Создайте программу, отображающую движения маятника с затуханием.

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

Разработайте программу, отображающую процесс построения Лемнискаты Бернулли.

Создайте программу движения объекта по кривой Персея при различных значенияхa ,b ис .

Разработайте программу движения точки вдоль кривой Безье четвертого порядка. Узловые точки задаются произвольно пользователем до построения кривой.

Разработайте программу анимации падения снежинки , которые падают по разным траекториям и с разными скоростями.

Разработайте программу анимации летающего бумеранга .

Создайте программу, показывающую падение нескольких звезд одновременно.

Создайте приложение, отображающее хаотичное движение звезды в окне.

Создайте программу, показывающую движение окружности вдоль многоугольника . Число вершин вводится пользователем до анимации.

Создайте приложение, отображающее броуновское движение молекулы в окне.

Разработайте программу анимации движения планет в солнечной системе.

Создайте программу, показывающую движение квадратика по траектории, состоящей из 100 точек, и хранящихся в специальном массиве.

Для применения естественного способа задания движения точки должна быть известна ее траектория. Траектория может быть задана различными способами :

Уравнениями (возможно с неравенствами), например,

Словесно, например, радиус окружности равен 3м;

В виде графика в масштабе.

Для задания закона движения точки по известной траектории необходимо:

- выбрать на траектории начало отсчета расстояний – точку О и указать направление положительного отсчета (знак «+»);

Выбрать начало отсчета времени t =0, обычно за начало отсчета времени принимают или начало движения или момент времени, когда движущаяся точка М проходит через точку О.

Закон движения точки М по траектории имеет вид:

где - непрерывная дважды дифференцируемая функция, причем это выражение определяет положение точки на траектории, но не пройденный ею путь.

.

Если при , то

.

Если известен закон движения точки в декартовых координатах, то

,

где знак «+» или «–» определяется выбором положительного или отрицательного направления отсчета расстояний по траектории. Это выражение устанавливает связь естественного способа задания движения точки с координатным.

Скорость точки равна:

,

Но единичный вектор направлен по касательной к траектории в сторону движения точки М, следовательно, скорость точки М направлена по касательной к траектории в сторону движения и равна

Совместим с движущейся по траектории точкой М начало подвижной системы координат – оси естественного трехгранника Мtnb. Ось Mt - касательную направим по касательной к траектории в сторону движения точки. Ось Мn – главную нормаль направим перпендикулярно Мt в сторону вогнутости траектории так, чтобы эти оси образовали соприкасающуюся плоскость . Ось Мb- бинормаль направим перпендикулярно соприкасающейся плоскости в сторону, откуда поворот от оси Мt к оси Mn виден против хода часовой стрелки. Образовались еще две координатные плоскости: Mnb - нормальная и Mtb – спрямляющая.

Пусть точка М переместилась в положение М 1 . Векторы ее скорости в этих точках образуют угол смежности φ .

,

k – кривизна кривой в точке М,

ρ – радиус кривизны кривой в точке М.

Ускорение точки М равно:

,

но , следовательно

.

Вектор ускорения точки М разложен на две взаимно перпендикулярные составляющие лежащие в соприкасающейся плоскости.

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

Рис. 4.12 . Привязка объекта к траектории

Рассмотрим последовательность действий при создании анимации с движением объекта по заданной траектории:

1. Создадим анимацию движения одним из способов, рассмотренных ранее.
2. При установке флажка Orient to Path (Ориентация на траекторию) базовая линия группы анимируемых объектов будет двигаться параллельно заданной траектории. Для фиксации на траектории регистрационной точки объекта устанавливается флажок Snap (Привязка).
3. Выполняем команду Insert › Motion Guide (Вставка › Траектория движения). Flash создаст над выделенным слоем новый слой со значком направляющей слева от имени.
4. Используем любой инструмент для рисования, чтобы изобразить желаемую траекторию. В первом кадре зафиксируем объект в начальной точке линии, а в последнем кадре - в конце линии, перемещая объект с помощью мыши за его регистрационную точку.
5. Чтобы сделать траекторию невидимой, следует щелкнуть на пересечении строки направляющего слоя и отмеченного значком глаза столбца.

Рис. 4.13 . Движение по заданной траектории

Рис. 4.14 . Окно Layer Properties

Чтобы связать слой с существующим слоем направляющей, можно выполнить одно из следующих действий:

• Переместить слой с объектами под слой с направляющей. Все анимированные объекты на нем автоматически привязываются к траектории, на что указывает сдвиг названия слоя вправо.
• Создать новый слой под слоем направляющей. Объекты, размещенные на этом слое, к которым будет применена анимация методом расчета кадров (tweened) , автоматически привязываются к траектории.
• Выделить слой под слоем с направляющей и выполнить команду Modify › Layer Guided (Управляемый) для типа слоя в диалоговом окне Layer Properties (Свойства слоя).
• Щелкнуть на слое при нажатой клавише ALT .

Чтобы разорвать связь слоя со слоем направляющей, выполните одно из следующих действий:

• Выделите слой, связь которого надо разорвать, и перетащите его выше слоя направляющей.
• Выполните команду Modify › Layer (Изменить › Слой) с выбором значения Normal (Обычный) для типа слоя в окне Layer Properties (Свойства слоя).
• Щелкните на слое при нажатой клавише ALT .

Четверг, 09 Октября 2014 г. 13:07 + в цитатник

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

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

И так, разберёмся подробнее как же создать движение объекта по заданной траектории. Будем анимировать осенние листики.
Для этого создадим новый флеш документ Action Script 3
Файл - Создать

Далее на Временной шкале Основного рабочего поля (Монтажный кадр 1) создаём 2 слоя
1. Фон
2. Листики
Временная шкала Основного рабочего поля (Монтажный кадр 1) будет выглядеть следующим образом.

Сохраняем созданный проект под каким либо названием, например "Падающий лист"

В Библиотеку программы импортируем любую картинку с осенним фоном и файл AI "Лист", который можно скачать из вложения ниже

Вложение:

Файл - Импорт - Импортировать в библиотеку

После загрузки в Библиотеке будут следующие файлы

Инструментом "Стрелка" на слой "Фон" на основном Рабочем поле Монтажный кадр 1 из Библиотеки перетаскиваем фоновую картинку и, либо изменяем размеры Рабочего поля под размеры картинки, либо трансформируем размеры картинки под размеры Рабочего поля.

После того как в диалоговом окне создания нового символа нажмёте "ОК", то попадаем в окно редактирования символа "Лист". Переименовываем Слой 1 на Временной шкале в "Анимация лист"
Из Библиотеки инструментом "Стрелка" на Рабочее поле символа "Лист" добавляем графический символ "Лист".

На Временной шкале на слое "Анимация лист" щелкаем в кадре 140 и, вызвав контекстное меню, выбираем пункт "Вставить ключевой кадр".

Между кадрами 1 и 140 появились промежуточные кадры. Теперь щелкаем на любом кадре между первым и сто сороковым и, в появившемся контекстном меню, выбираем пункт "Создать классическую анимацию движения". После этого автоматически такая анимация будет создана.

Добавленный на Рабочее поле листик, мы пока не трогаем, а продолжаем работать с Временной шкалой.
На Временной шкале щелкаем 140 (последний и ключевой) кадр нашей анимации и, вызвав контекстное меню, также выбираем пункт "Создать классическую анимацию движения". Таким образом мы включаем последний 140 ключевой кадр в созданную нами классическую анимацию движения.

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

После этого мы увидим, что на Временной шкале появился новый слой - "Направляющая", а слой "Анимация лист" оказался в "подчинении" у этого слоя.

Теперь, траектория для движения объекта, созданная на слое "Направляющая", будет руководством к действию (движению) для слоя "Анимация лист", то есть вся классическая анимация движения созданная на слое "Анимация лист", будет происходит по траектории изображенной на слое "Направляющая".
Слой "Направляющая" при этом является рабочим и вся графика размещённая на нём при публикации флеш ролика отображаться не будет.
Итак создадим (нарисуем) на слое "Направляющая" какую - либо траекторию для падения осеннего листочка сверху вниз.
Для рисования траектории воспользуемся инструментом "Карандаш" в режиме "Режим карандаша со сглаживанием" и, выделив слой "Направляющая" и его первый кадр, изобразим кривую линию для необходимой траектории.

После того как направляющая линия создана, переходим на слой "Анимация лист", выделяем первый ключевой кадр и начинаем создавать классическую анимацию движения для падающего листика. Для этого Инструментом "Стрелка" помещаем листик в начало нарисованной нами траектории. При этом точка регистрации нашего листика (в нашем случае точка регистрации находится в центре) должна обязательно!!! находится на линии траектории направляющей.

При этом щелкните ещё раз на первом кадре слоя "Анимация лист" и убедитесь, что он выделен. Теперь откройте вкладку "Свойства" и найдите там раздел "Анимация". Проставьте галочки в чекбоксах, как указано на картинке.

На слое "Анимация лист" щёлкните 140 (последний) ключевой кадр и Инструментом "Стрелка" поместите наш осенний листик в конец нарисованной траектории. При этом точка регистрации графического объекта листик также должна находится на линии траектории движения.
Либо если привязка к "Направляющей" у вас сработает без всяких проблем, то когда вы щелкните последний кадр анимации, листочек автоматически сам переместиться в конец направляющей.

После этого ещё раз щелкните 140 кадр, чтобы убедиться, что он выделен и открыв вкладку "Свойства" в разделе "Анимация" также проставьте галочки в чекбоксах, как указано на картинке.

Ещё раз щёлкните по выбору любой кадр на слое "Анимация лист", например 40 кадр, и убедитесь, что наш листик двигается строго по нарисованной траектории.

Если всё нормально, то анимация "Падающего листа" по заданной траектории создана и можно вернуться на Основную Рабочую сцену - Монтажный кадр 1.
Находясь на Монтажном кадре 1, выделите слой "листики" и Инструментом "Стрелка" перетащите из Библиотеки на него видеоролик "Лист", поместив его в самом верху фоновой картинки.

Видеоролику "Лист" примените фильтр "Тень" со следующими параметрами. Напоминаю, что раздел "Фильтры" можно найти на вкладке "Свойства".

Зажав клавиши Shift+Ctrl можно размножить видеоролик "Лист" и получить несколько падающих листиков. С помощью Инструмента "Свободное преобразование" можно изменить размер и угол поворота видеоролика "Лист", чтобы листочки падали не совсем одинаково.

Зажав клавиши Ctrl+Enter просматриваем полученный в результате флеш ролик. Если всё устраивает, то сохраняем флешку как проект в формате FLA
Файл - Сохранить
Экспортируем флеш ролик для дальнейшей публикации
Файл - Экспорт - Экспортировать ролик