Перемещение объекта
Правильно ли я понял, что 1 — это линейное перемещение, 2 — перемещение с постоянным ускорением, 3 — перемещение с плавным увеличением скорости и плавной остановкой?
Отслеживать
задан 15 мая 2019 в 3:51
Владимир Михайлов Владимир Михайлов
29 1 1 серебряный знак 5 5 бронзовых знаков
Точно не помню в чем отличие,но операция GetComponent очень затратная и лучше ее не использовать когда нужно часто обращаться к объекту,а только когда 1 раз,например в функции Start()
15 мая 2019 в 4:45
transform.translate плохой способ, он нарушает состояние физ. движка..
15 мая 2019 в 5:22
1) движение способом перерысовывания 2) Движения способом изменения вектора скорости 3) Движение способом применения силы к объекту (толкая)
15 мая 2019 в 6:19
@ВиталийШебаниц, что такое «способ перерисовывания»?
– user302909
15 мая 2019 в 11:54
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Чтобы лучше ориентироваться в вопросе, посмотрите следующие 2 вопроса:
- Правильная реализация передвижения персонажа
- Движение с коллизией через Update и FixedUpdate, что такое “телепортация” в контексте физического движка в Unity?
Теперь кратко по вашему вопросу:
- Translate() — перемещение персонажа с помощью простого изменения его координаты, точнее сдвига позиции объекта, относительно его текущего положение. Это скорее не линейное перемещение, а «телепортация» объекта, так как объект резко меняет свое положение в пространстве. Это не физический способ перемещения, то есть прибегать к такому методу стоит только тогда, когда вы не используете физику для перемещения объекта, иначе могут случаться проблемы с коллизиями объектов (например несмотря на правильно настроенные Rigidbody и Collider один объект может застрять в другом. Кроме того, использовать такое перемещение стоит только в методе Update() , а не FixedUpdate() . Чем меньшее значение вы передадите в качестве параметра, тем менее «отрывистым» и плавным будет выглядеть ваше перемещение (но по факту, все-равно останется телепортацией)
- Rigidbody2D.velocity — мгновенное изменение скорости физического объекта. Стоит применять с осторожностью, так как может приводить к физически нереалистичному поведению. В целом, при использовании физики в Unity скорость объекта будет вычисляться с учетом всех сил, которые действуют на физическое тело и массы физического объекта. По этому, если получится так, что физический движок посчитает за вас скорость объекта по всем силам, которые на него действуют, а затем вы измените ее руками, по средствам изменения Rigidbody2D.velocity — это может выглядеть неправильно. К этому методу стоит прибегать только в исключительных случаях, когда надо резко изменить движение объекта (сами Unity в документации приводят пример с прыжком персонажа). Стоит применять только в FixedUpdate() , и ни в коем случае не в Update() , а также избегать изменения позиции персонажа ( transform.Translate() и изменение transform.position )
- Rigidbody2D.AddForce() — добавить действие силы к объекту. Как уже писал в предыдущем пункте, физический движок вычисляет скорость и направление движения объекта опираясь на силы, которые действуют на объект, а также его массу. При этом способе «разгон» физического объекта будет более плавным. Если провести аналогию — применение этого способа — как будто вы толкнули физический объект в определенном направлении. Стоит применять только в FixedUpdate() , и ни в коем случае не в Update() , а также избегать изменения позиции персонажа ( transform.Translate() и изменение transform.position )
Добавление эффекта анимации пути перемещения
PowerPoint для Microsoft 365 PowerPoint для Microsoft 365 для Mac PowerPoint 2021 PowerPoint 2021 для Mac PowerPoint 2019 PowerPoint 2019 для Mac PowerPoint 2016 PowerPoint 2016 для Mac PowerPoint 2013 PowerPoint 2010 PowerPoint 2007 PowerPoint для Mac 2011 Еще. Меньше
Вы можете применять эффекты анимации пути перемещения, чтобы перемещать объекты на слайдах в той последовательности, которая лучше всего подходит для описания информации.
Например, на плоскости справа (ниже) показана начальная точка плоскости, а пунктирная линия между двумя плоскостями показывает путь, который она будет проходить при воспроизведения анимации. Прозрачное изображение слева — это место, где плоскость будет в конечном итоге, когда будет выполнена анимация пути движения.
Microsoft 365 подписчики имеют возможность экономии времени для эффектов анимации на основе движения: Morph
Добавление пути перемещения объекта
- Щелкните объект, к которому нужно применить анимацию.
- На вкладке Анимация нажмите кнопку Добавить анимацию.
- Прокрутите коллекцию вниз до пункта Пути перемещения и выберите подходящий вариант.
Совет. При выборе параметра Пользовательский путь вы сможете нарисовать путь, по которому будут перемещаться объекты. 
Чтобы завершить рисование пользовательского пути, нажмите клавишу ESC.
Дополнительные параметры пути перемещения
- Если необходимый путь перемещения не отображается, нажмите кнопку Другие пути перемещения в нижней части коллекции.
Щелкните анимацию для предварительного просмотра способа перемещения объекта на слайде. 
- Выбрав необходимый путь перемещения, нажмите кнопку ОК. Чтобы удалить анимацию, щелкните на слайде путь перемещения (пунктирная линия со стрелкой) и нажмите клавишу DELETE.
Изменение путей перемещения
- Если нужно изменить направление пути перемещения, изменить отдельные точки пути перемещения, заблокировать (сделать так, чтобы другие пользователи не могли изменить анимацию) или разблокировать анимацию, нажмите кнопку Параметры эффектов.
- Для предварительного просмотра пути перемещения щелкните объект на слайде и выберите Просмотр на вкладке Анимация. Совет. Кнопка Просмотр находится на вкладке Анимация непосредственно под вкладкой Файл с левого края.
Использование предопределенных путей
В большинстве случаев одна из основных анимаций пути прекрасно подходит для того, чтобы сделать слайд более интересным. В приведенном ниже примере к графическому объекту применяется анимация пути «Поворот», при этом используются Параметры эффекта для изменения направления пути и команда Обратить направление пути для получения конечного результата.
Пример: применение предопределенной анимации пути к графическому объекту
- В пустом слайде выберите Вставка >Фигуры >Прямоугольник (или другую фигуру по вашему выбору), а затем щелкните в левом верхнем углу слайда, чтобы вставить фигуру.
- Оставив прямоугольник выделенным, щелкните Анимация >Анимация пути и в разделе Основные выберите Поворот.
- Дождитесь, когда сформируется предварительное изображение анимации, щелкните Параметры эффектов на вкладке Анимация и выберите Вниз и вправо.
- Наведите указатель на конечную точку анимации, чтобы она приняла вид двунаправленной перечеркнутой стрелки, а затем щелкните и перетащите объект в правый нижний угол слайда.
- Наконец, щелкните Параметры эффектов >направление обратного пути.
Теперь анимация перемещает рисунок из наименее видимого места на слайде (в правом нижнем углу) в наиболее видимый (верхний левый).
Использование пользовательских путей
Чтобы нарисовать настраиваемую анимацию пути, выберите объект, который нужно анимировать, и щелкните Анимация > Анимация пути, а затем выберите параметр в разделе Настраиваемый. Способ рисования будет зависеть от типа выбранного пути.
Если вы выбрали путь типа Кривая или Свободная кривая:
- Щелкните начальную точку, а затем щелкайте в каждой точке, в которой нужно изменить направление.
- Дважды щелкните для завершения.
Если вы выбрали путь типа Линия или Рисованная кривая:
- Щелкните и, удерживая нажатой кнопку мыши, очертите нужную фигуру, а по окончании отпустите кнопку.
Чтобы изменить уже нарисованный пользовательский путь:
-
Щелкните пользовательский путь, удерживая нажатой клавишу CONTROL, или щелкните его правой кнопкой мыши и выберите команду Начать изменение узлов.
Совет: Если вы никогда раньше не пробовали изменять пути в программах для работы с графикой, вам будет проще удалить эффект и создать его заново.
Применение пути перемещения к объекту или тексту
- Выделите текст или объект, к которому вы хотите применить анимацию.
- На вкладке Анимация в разделе Движение выберите команду Пути и в группе Простой или Сложный щелкните нужный тип пути перемещения.
- Стрелки, которые указывают на путь перемещения при редактировании анимации, не будут видны вашей аудитории во время слайд-шоу.
- Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Задание пользовательского пути перемещения
- Выделите текст или объект, к которому вы хотите применить анимацию.
- На вкладке Анимация в разделе Движение выберите команду Пути и щелкните Кривая, Полилиния, Линия или Рисованная кривая.
- Чтобы нарисовать выбранный путь перемещения, выполните одно из следующих действий:
Необходимые действия
Щелкните то место на слайде, откуда вы хотите начать путь, а затем перемещайте курсор вдоль линии. Щелкните точки, в которых линия должна искривляться. Дважды щелкните, чтобы завершить рисование пути.
Рисование полилинии, состоящей из прямых линий
Щелкните место на слайде, с которого вы хотите начать путь, переместите указатель, чтобы нарисовать прямую линию, а затем щелкните там, где вы хотите создать угол. Кроме того, вы можете нажать и удерживать кнопку мыши, перемещая указатель в любом направлении, чтобы нарисовать путь от руки. Изменить способ рисования можно щелчком. Дважды щелкните, чтобы завершить рисование пути.
Щелкните место на слайде, с которого вы хотите начать путь, нажмите кнопку мыши и, удерживая ее, переместите указатель в нужном направлении, чтобы нарисовать прямую линию. Отпустите кнопку мыши, чтобы прекратить рисование.
Рисование пути от руки
Щелкните место на слайде, с которого вы хотите начать путь, нажмите кнопку мыши и, удерживая ее, переместите указатель в нужном направлении. Отпустите кнопку мыши, чтобы прекратить рисование.
- Если вы хотите, чтобы кривая или полилиния заканчивалась там же, где и начиналась (такой путь называется замкнутым), щелкните начальную точку пути, чтобы завершить его рисование, вместо того чтобы дважды нажать или отпустить кнопку мыши.
- Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Настройка пути анимации
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Совет: Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Изменение направления пути
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Совет: Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Замыкание и размыкание пути
Путь перемещения называется замкнутым, если он заканчивается там же, где и начинается. Он считается открытым, если его начало не совпадает с концом.
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Необходимые действия
Удерживая клавишу CONTROL, щелкните путь перемещения на слайде и выберите команду Разомкнуть кривую в контекстном меню.
Удерживая клавишу CONTROL, щелкните путь перемещения на слайде и выберите команду Замкнуть кривую в контекстном меню.
Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Перемещение пути на слайде
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Добавление эффекта анимации пути перемещения
PowerPoint для Microsoft 365 PowerPoint для Microsoft 365 для Mac PowerPoint 2021 PowerPoint 2021 для Mac PowerPoint 2019 PowerPoint 2019 для Mac PowerPoint 2016 PowerPoint 2016 для Mac PowerPoint 2013 PowerPoint 2010 PowerPoint 2007 PowerPoint для Mac 2011 Еще. Меньше
Вы можете применять эффекты анимации пути перемещения, чтобы перемещать объекты на слайдах в той последовательности, которая лучше всего подходит для описания информации.
Например, на плоскости справа (ниже) показана начальная точка плоскости, а пунктирная линия между двумя плоскостями показывает путь, который она будет проходить при воспроизведения анимации. Прозрачное изображение слева — это место, где плоскость будет в конечном итоге, когда будет выполнена анимация пути движения.
Microsoft 365 подписчики имеют возможность экономии времени для эффектов анимации на основе движения: Morph
Добавление пути перемещения объекта
- Щелкните объект, к которому нужно применить анимацию.
- На вкладке Анимация нажмите кнопку Добавить анимацию.
- Прокрутите коллекцию вниз до пункта Пути перемещения и выберите подходящий вариант. Совет. При выборе параметра Пользовательский путь вы сможете нарисовать путь, по которому будут перемещаться объекты. Чтобы завершить рисование пользовательского пути, нажмите клавишу ESC.
Дополнительные параметры пути перемещения
- Если необходимый путь перемещения не отображается, нажмите кнопку Другие пути перемещения в нижней части коллекции. Щелкните анимацию для предварительного просмотра способа перемещения объекта на слайде.
- Выбрав необходимый путь перемещения, нажмите кнопку ОК. Чтобы удалить анимацию, щелкните на слайде путь перемещения (пунктирная линия со стрелкой) и нажмите клавишу DELETE.
Изменение путей перемещения
- Если нужно изменить направление пути перемещения, изменить отдельные точки пути перемещения, заблокировать (сделать так, чтобы другие пользователи не могли изменить анимацию) или разблокировать анимацию, нажмите кнопку Параметры эффектов.
- Для предварительного просмотра пути перемещения щелкните объект на слайде и выберите Просмотр на вкладке Анимация. Совет. Кнопка Просмотр находится на вкладке Анимация непосредственно под вкладкой Файл с левого края.
Использование предопределенных путей
В большинстве случаев одна из основных анимаций пути прекрасно подходит для того, чтобы сделать слайд более интересным. В приведенном ниже примере к графическому объекту применяется анимация пути «Поворот», при этом используются Параметры эффекта для изменения направления пути и команда Обратить направление пути для получения конечного результата.
Пример: применение предопределенной анимации пути к графическому объекту
- В пустом слайде выберите Вставка >Фигуры >Прямоугольник (или другую фигуру по вашему выбору), а затем щелкните в левом верхнем углу слайда, чтобы вставить фигуру.
- Оставив прямоугольник выделенным, щелкните Анимация >Анимация пути и в разделе Основные выберите Поворот.
- Дождитесь, когда сформируется предварительное изображение анимации, щелкните Параметры эффектов на вкладке Анимация и выберите Вниз и вправо.
- Наведите указатель на конечную точку анимации, чтобы она приняла вид двунаправленной перечеркнутой стрелки, а затем щелкните и перетащите объект в правый нижний угол слайда.
- Наконец, щелкните Параметры эффектов >направление обратного пути. Теперь анимация перемещает рисунок из наименее видимого места на слайде (в правом нижнем углу) в наиболее видимый (верхний левый).
Использование пользовательских путей
Чтобы нарисовать настраиваемую анимацию пути, выберите объект, который нужно анимировать, и щелкните Анимация > Анимация пути, а затем выберите параметр в разделе Настраиваемый. Способ рисования будет зависеть от типа выбранного пути.
Если вы выбрали путь типа Кривая или Свободная кривая:
- Щелкните начальную точку, а затем щелкайте в каждой точке, в которой нужно изменить направление.
- Дважды щелкните для завершения.
Если вы выбрали путь типа Линия или Рисованная кривая:
- Щелкните и, удерживая нажатой кнопку мыши, очертите нужную фигуру, а по окончании отпустите кнопку.
Чтобы изменить уже нарисованный пользовательский путь:
-
Щелкните пользовательский путь, удерживая нажатой клавишу CONTROL, или щелкните его правой кнопкой мыши и выберите команду Начать изменение узлов.
Совет: Если вы никогда раньше не пробовали изменять пути в программах для работы с графикой, вам будет проще удалить эффект и создать его заново.
Применение пути перемещения к объекту или тексту
- Выделите текст или объект, к которому вы хотите применить анимацию.
- На вкладке Анимация в разделе Движение выберите команду Пути и в группе Простой или Сложный щелкните нужный тип пути перемещения.
- Стрелки, которые указывают на путь перемещения при редактировании анимации, не будут видны вашей аудитории во время слайд-шоу.
- Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Задание пользовательского пути перемещения
- Выделите текст или объект, к которому вы хотите применить анимацию.
- На вкладке Анимация в разделе Движение выберите команду Пути и щелкните Кривая, Полилиния, Линия или Рисованная кривая.
- Чтобы нарисовать выбранный путь перемещения, выполните одно из следующих действий:
Необходимые действия
Щелкните то место на слайде, откуда вы хотите начать путь, а затем перемещайте курсор вдоль линии. Щелкните точки, в которых линия должна искривляться. Дважды щелкните, чтобы завершить рисование пути.
Рисование полилинии, состоящей из прямых линий
Щелкните место на слайде, с которого вы хотите начать путь, переместите указатель, чтобы нарисовать прямую линию, а затем щелкните там, где вы хотите создать угол. Кроме того, вы можете нажать и удерживать кнопку мыши, перемещая указатель в любом направлении, чтобы нарисовать путь от руки. Изменить способ рисования можно щелчком. Дважды щелкните, чтобы завершить рисование пути.
Щелкните место на слайде, с которого вы хотите начать путь, нажмите кнопку мыши и, удерживая ее, переместите указатель в нужном направлении, чтобы нарисовать прямую линию. Отпустите кнопку мыши, чтобы прекратить рисование.
Рисование пути от руки
Щелкните место на слайде, с которого вы хотите начать путь, нажмите кнопку мыши и, удерживая ее, переместите указатель в нужном направлении. Отпустите кнопку мыши, чтобы прекратить рисование.
- Если вы хотите, чтобы кривая или полилиния заканчивалась там же, где и начиналась (такой путь называется замкнутым), щелкните начальную точку пути, чтобы завершить его рисование, вместо того чтобы дважды нажать или отпустить кнопку мыши.
- Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Настройка пути анимации
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Совет: Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Изменение направления пути
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Совет: Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Замыкание и размыкание пути
Путь перемещения называется замкнутым, если он заканчивается там же, где и начинается. Он считается открытым, если его начало не совпадает с концом.
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Необходимые действия
Удерживая клавишу CONTROL, щелкните путь перемещения на слайде и выберите команду Разомкнуть кривую в контекстном меню.
Удерживая клавишу CONTROL, щелкните путь перемещения на слайде и выберите команду Замкнуть кривую в контекстном меню.
Чтобы просмотреть все эффекты анимации на слайде, на вкладке Анимация в разделе Просмотр нажмите кнопку Воспроизвести.
Перемещение пути на слайде
- В области навигации выберите слайд с эффектом анимации, который вы хотите изменить, а затем щелкните вкладку Анимация. Выбор слайдов в области навигации
- В меню Вид выберите пункт Обычный.
- Вверху области навигации откройте вкладку Слайды и щелкните слайд. В зависимости от ширины области навигации в ней отображаются вкладки и или значки Слайды и Структура .
- Каждый эффект анимации представлен на слайде числом () рядом с объектом, которое обозначает его номер в последовательности воспроизведения. Если два эффекта анимации должны воспроизводиться одновременно, они обозначены стопкой из чисел: .
- Чтобы выбрать эффект анимации из набора чисел , необходимо открыть полный список эффектов анимации на слайде. На вкладке Анимация в разделе Параметры анимации нажмите кнопку Изменить порядок и щелкните нужный эффект анимации.
Как задать свой путь перемещения объекта
Траектория — это путь движения анимированного объекта или текста по слайду.
Перейдите в режим Обычный.
Перейдите к слайду, в который хотите добавить анимацию.
Выделите текст или объект, который хотите анимировать.
В меню Показ Слайдов выберите пункт Настройка анимации.
В области задач Настройка анимации выберите Добавить эффект, затем — Пути перемещения. Раскроется меню.
Bы можете задать один из стандартных путей либо выбрать сложные пути, используя команду ^ Другие пути перемещения.
Можно создать собственный путь движения объекта, выбрав подменю Нарисовать пользовательский путь, а затем — инструмент рисования пути.
Для рисования отрезков прямых линий выберите инструмент Линия. Подведите курсор к точке начала отрезка, нажмите левую кнопку мыши и, удерживая ее, переместите указатель к конечной точке отрезка.
Для создания кривых линий выберите инструмент Кривая. Передвигая указатель мыши, нарисуйте кривую линию, щелкая в тех точках, через которые она должна проходить. Для завершения работы дважды щелкните левой кнопкой мыши. Чтобы получить замкнутую траекторию, щелкните в начальной точке.
Выберите инструмент Полилиния для создания траектории в виде ломаных линий. Приемы работы с этим инструментом аналогичны приемам работы с инструментом Кривая.
Для создания произвольной траектории можно воспользоваться инструментом Рисованная Кривая. Подведите указатель мыши к начальной точке, нажмите левую кнопку мыши и, удерживая ее, нарисуйте произвольную траекторию. Для завершения достаточно отпустить кнопку в конечной точке.
Использование SVG путей в canvas для движения объектов
Если для анимации объекта в canvas (и не только), нужно перемещать его по некоторому желаемому пути, возможно даже по нескольким, которые могут выбираться случайным образом или последовательно, то это можно сделать с помощью svg путей. Давайте, для начала, запустим по траектории простой но зеленый квадрат.
Для этого сделаем или позаимствуем svg, с одним или несколькими путями.
Создадим элемент с помощью функции document.createElementNS. MDN сообщает нам, что метод имеет базовую поддержку во всех современных браузерах. Затем добавим созданному элементу путь.
Здесь, в атрибуты, внесен первый попавшийся на глаза путь из какого-то svg файла, методом копируй-вставляй. Конечно это не единственный и более того, не самый удобный способ, но достаточно наглядный для использование в первом примере.
Теперь в цикле, будем получать координаты точек пути и назначать их нашему объекту. Для этого нам хватит двух методов SVGGeometryElement:
возвращает вычисленное значение общей длины пути и
Получает аргументом float число, а возвращает объект SVGPoint у которого есть, интересующие нас, координаты x и y. При значениях аргумента, меньше нуля или больше длины пути, в качестве результата будет возвращаться первая или последняя точки соответственно.
При обновлении кадра, получим точку и используем ее координаты для движения.
→ Полный код примера на codepen
Но, можно использовать более интересный вариант двигать объект по координатам нескольких путей, например такой:
Опять же, возьмем svg файл с несколькими путями. Тот который был использован в примере, сделан в редакторе Inscape. Теперь надо получить эти пути, это возможно через разбор объекта или, если svg был получен в виде текстового файла, то следующей функцией, с помощью регулярных выражений, можно получить их как строки.
После создания массива путей, остается извлекать их по очереди и обрабатывать, таким же образом, как и единственный путь для движения квадрата. получая интересные эффекты.
Полный код примера смотрите ниже.Что бы добавить больше контроля при движение объекта по координатам пути можно использовать твины. Для тестовых примеров я взял первую попавшуюся на глаза библиотеку GreenSock, но это могла оказаться и любая другая.
В первом случае при движении квадрата по единственному пути, создадим промежуточный объект помощник, и передадим его при создании твина.
Увидеть движение квадрата по пути с использованием твина, в первом примере на codepen, можно поставив галочку use tween.
Как я разрабатывал скрипт анимации перемещения элемента по кривой Безье на Javascript
И мы с пути кривого ни разу не свернем, а надо будет снова пойдет кривым путем — х/ф Айболит 66.
Существует великое множество готовы решений, позволяющих работать с перемещением по Кривыми Безье. В большинстве случаев практического применения готовых решений будет предостаточно. Но самостоятельная имплементация очень полезна для саморазвития, поэтому когда мне понадобилось в одном из проектов создать такую анимацию, я пошел в обход.
В данной статье я лишь описываю поток своего сознания, а не обучающий материал. Я не могу гарантировать, что конечные расчеты являются самыми оптимальными, но они работают — а это главное.
Если вы решили написать собственную функцию для расчета движения по кривым Безье, всегда стоит начинать с изучения материала.
Кривая Безье названа в честь французского инженера Пьера Безье, который является одним из ее авторов. Кубическая кривая Безье — параметрическая кривая, задаваемая выражением (1), состоит из 4 пар значений, где каждая пара — это x и y координаты точек, по которым образуется кривая.
Таким образом, кривая Безье состоит из двух точек и хотя бы одного вектора. Длинна вектора указывает насколько нужно подтягивать линию изгиба в его направлении. В идеальном случае у одной кривой имеется два вектора, у начальной и у конечной точки:
Как и в случае рисования кривой, так и в случае движения по кривой участвует одна и та же формула, которую можно найти на Википедии:
Для произведения расчетов нужно значение прогресса движения (t), (т.е. разбиваем условную анимацию на любое количество кадров, которое нам будет удобно, или использует относительное значение каждого кадра).
Делаем имплементацию
Предположим, мы планируем дойти от точки до точки двухсегметной кривой за четыре секунды с частотой кадров 12 fps. Тогда делим секунду на 12 и получаем отрезок времени, которую принимаем за единицу анимации (фрейм).
Теперь зная время, за которое мы хотим пройти кривую и количество кадров, мы можем получить полное количество кадров, входящих во всю анимацию. Для этого делим 4 секунды на количества кадров в секунду.
Зная общее количество кадров, мы, используя курсор текущего кадра, можем получить значение прогресса анимации t, просто поделив текущий кадр на общее количество кадров анимации;
Таким образом, у нас есть значение начальной точки — P0x, P0y; первой контрольной точки — P1x, P1y; второй контрольной точки — P2x, P2y; и завершающей точки — P3x,P3y, и значение прогресса анимации t. Остается подставить всё это в формулу
и мы получаем нужные нам координаты объекта в любой момент времени (t).
Поворот к вектору движения
Когда наш объект движется, он обладает некоторым вектором направления движения. Птица не может лететь боком, она всегда должна смотреть по направлению движения. И именно этого нам не хватает для качественного результата.
Что бы узнать угол вектора, нам нужно найти угол, который образуют две ближайших точки на кривой, по отношении к друг другу. Т.е. мы берем координаты текущего положения объекта, и координаты положения объекта в предыдущем фрейме. Назовем их x0,y0 и x,y.
Фактически x0-x, y0-y — это две стороны треугольника, зная которые мы можем найти угол по формуле решения треугольника по двум сторонам и прямому углу между ними.
Но только вот какая незадача: угол вектора может варьироваться от 0 до 360, а угол в треугольнике у нас от 0 до 179,9. Нам нужно найти угол между двумя векторами:
- вектором, который образуется между двумя ближайшими точками на кривой
- вектором системы координат браузера, который всегда смотрит направо.
Я пошел опытным путем и рассмотрел каждый из возможных вариантов поворота вектора и убедился в том, что одной формулой на всех тут не обойтись.
— Когда направляющая смотрит снизу вверх, слева направо, искомый угол нашего воображаемого треугольника находит внизу слева. В таком случае стороной a становится разница между x и x0, а b разница между y и y0. Результативный угол мы получаем через сумму квадратов всех сторон, деленных на двойную сумму катета и гипотенузы.
A=arccos((b2+c2-a2)/2bc)
— Но когда вектор смотрит слева на право, сверху вниз, наши стороны треугольника меняются местами. В этом случае стороной a становится разница между y и y0, а b x и x0 соответственно. Т.е. всё наоборот от предыдущего случая. Но решение остается таким же.
— Всё бы ничего, но когда направляющая начинает движение сверху вниз, слева на право, предыдущая схема перестает работать. Во-первых мы снова меняем стороны местами, а искомый угол становится противоположным. И находим его уже по вспомогательной формуле 90-$A, кроме того прибавляем 90, что бы наш объект смотрел в правильном направлении.
— В четвертом же случае, когда направляющая смотрит снизу вверх, справа налево, мы опять ищем угол $B, но на этот раз прибавляем к его значению 180 градусов.
Плюс ко всему нужно не забывать, что существует варианты нулевой длинны сторон, что приведет к ошибке расчетов. Поэтому важно не забыть проводить проверку одного из 4-х направлений движений, и кроме того проверку на нулевую длину сторон, при значениях угла 0, 90, 180 и 270.
Функция для расчета поворота по вектору движения получилась не из компактных, но с задачей справилась.
Парсинг Svg
Осталось сделать так, что бы скрипт, создающий анимацию, мог принимать в качестве траектории сразу SVG путь. Мне не удалось найти ни одного качественного конвертера SVG-PATH в CUBIC-BEZIER POINTS, поэтому написал собственную реализацию парсинга SVG пути в javascript-читабельный формат.
В этот процесс я не стану углубляться, скажу лишь, что английская литера M в устанавливает начало линии, далее команды s/S (smooth curveto) или c/C (curvet) позволяют создавать контрольные точки, причем значения могут быть как абсолютными, так и относительными. И хотя в SVG PATH типов команд достаточно много (M, L, H, V, C, S, Q, T, A, Z), я изучил и создал парсер только для 3-х из них. Результатом 6 часовых стараний стала функция svgPathToCubicBezierPoints, которая конвертит путь SVG в в массив точек в процентном эквиваленте.
Заключение
Вот, пожалуй и все. Если вам просто необходимо создать анимацию, основанную на движениях на кривым Безье, то не стоит изобретать велосипед, а стоит воспользоваться существующими библиотеками, такими как Raphael или d3.
Но если ваш случай требует особого внимания или вы просто любите пытливый путь, надеюсь моя статья оказалась для вас полезной.
Похожие публикации:
- Как в ворде сделать просмотр по одной странице
- При смене языка в ворде появляются буквы как убрать
- Что за знак в ворде кружочек с 4 палочками и как его убрать
- Как загрузить страницу