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

Вращение элемента вокруг собственного центра

Это самое простое действо, которое совсем не сложно представить теоретически: необходимо, чтобы центр вращаемого элемента совпал с центром рамки.

Для проведения этого эксперимента для наглядности нам понадобится графическая фигура, по которой будет заметно вращение. Просто круг здесь не подходит - нужна шестерня или звезда. Благо, в inkscape имеется инструмент для создания звезды с указанным количеством вершин.

Для центрирования мы уже применяли неоднократно инструменты расстановки (Ctrl+Shift+A) и сейчас мы создадим рамку 400*300 и внутри ее центрируем звезду с произвольным количеством вершин. Сделаем два фрейма, при чем второй - на основании дубликата первой рамки, но повернутого против часовой стрелки относительно своего центра на 90 градусов.

Вращение элемента вокруг своего центра в SOZI

Я даже подумал, что неплохо бы нарисовать колесо со спицами, которое мне пригодилось бы для второй части статьи. Если интересно: я поигрался с параметрами звезды и вписал ее в окружность, затем оконтурил их обводку и суммировал обе фигуры, получив одну - колесо.

Время анимации (Duration) лучше поставить 3 секунды, чтобы анимация была медленной и более плавной.

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

Вращение элемента вокруг своего центра в SOZI

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

Вращение элемента в произвольном месте экрана без смещения

Так как же заставить вращаться колесо в произвольном месте экрана без его смещения по осям? Ответ на этот вопрос скрывается все в той же теории изменения координат рамки при анимации.

Вращение элемента вокруг своего центра в SOZI

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

  1. Нарисовал две рамки так, чтобы координаты одного угла у них совпадали (Точка А) и построил анимацию, сняв отметку Hide (видеть сами рамки)
  2. Определил центры рамок и соединил их по прямой  (опытным путем определил, что смена рамок происходит именно по этой прямой)
  3. Предположил, что для того, чтобы Точка А была всегда в одном месте, необходимо задать траекторию анимации по дуге, точки которой всегда были бы равно удалены от Точки А, то есть находились бы на окружности радиусом r (расстояние от Точки А до центра любой из рамок)
  4. Изобразил все это и на основании сектора окружности, соединяющего центры рамок, создал дугу, имя которой привязал к анимации (рассматривали в прошлой статье траекторию анимации)

Вращение элемента вокруг своего центра в SOZI

Направление дуги должно совпадать с направлением вращения рамки, то есть карандашом первый маркер нужно поставить на центре первой рамки, иначе будет кривая анимация.  

Вращение элемента вокруг своего центра в SOZI

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

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

Вращение элемента вокруг своего центра в SOZI

Выглядит это все очень сложно, и на самом деле так оно и есть, но со временем получается делать это гораздо быстрее.

Чтобы получить поворот на 360 градусов, мне пришлось создать 5 фреймов, причем:

  1. На пятом фрейме используется первая рамка
  2. Время автоматической смены слайда 0,00 сек
  3. Duration 2-5 фреймов 3,00 сек, 1-го 0,00 сек
  4. Траектория к первому фрейму отсутствует

Таким образом я получил анимацию бесконечного вращения колеса в 360 градусов. Аналогично можно поступить, используя дуги в половину окружности, но правильную дугу построить гораздо сложнее. Можно использовать колесо, которое симметрично по четвертям, тогда оно всегда будет вставать на исходную, поворачиваясь всего на четверть.

Интересный эффект был получен мной при попытке направить по полной окружности траекторию движения рамок: я нарисовал круг и вторую рамку, которая на 180 градусов повернута относительно первой. Центры круга и колеса совпадают, координаты рамок тоже - и получился маятник.

В итоге мне захотелось создать имитацию движения какого-нибудь транспорта и вот что у меня получилось.

Если вам интересна данная технология - делитесь этим в комментариях, а также присылайте мне свои работы или задавайте вопросы, будем вместе разбираться.

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле

Комментарии   

viktor
0 # viktor 16.03.2017 23:26
Прикольно. Не знал об этом плагине.
ЧЕ так редко пишешь?
Ответить | Ответить с цитатой | Цитировать
Юрий Деменский
0 # Юрий Деменский 17.03.2017 09:03
Виктор, привет. Плагин на самом деле довольно прикольный. Пишу как находит вдохновение и если есть что писать. По Сози еще одна тема осталась, не знаю когда доберусь до нее.
Ответить | Ответить с цитатой | Цитировать
Madonna
0 # Madonna 28.09.2017 01:17
Welp, I have 2 hours for that 10 page research paper. I think my procrastinating skills have reached mastery
levels.

( >.
Ответить | Ответить с цитатой | Цитировать