Эта статья научит вас шаг за шагом использовать GreenSock для достижения эффекта рукописной анимации.
Чтобы добиться такого эффекта, в основном необходимо выполнить две части работы: во-первых, использовать инструменты векторного дизайна, такие как Adobe Illustrator, для проектирования траектории текста, необходимого для создания эффекта анимации от руки. Например, вышеуказанный эффект требуетhandwritingпуть к этому слову.
Давайте следовать за мной шаг за шагом, чтобы реализовать эффект рукописной анимации с нуля.
найти шрифты
Прежде всего, найдите шрифт, который вам нравится, я использую здесьHaloHandletter Bold. Этот шрифт отлично работает и является моноширинным шрифтом. Если вы используете шрифты разной ширины, вам может потребоваться использовать метод маскирования для достижения одинаковой ширины. Эффект шрифта выглядит так:
Вы можете подумать, что было бы очень просто использовать его для получения контура шрифта.
Но на самом деле такой путь не то, что нам нужно. Конечно, в некоторых сценариях мы можем захотеть сначала нарисовать контур текста, а затем заполнить его. Однако путь, необходимый для эффекта рукописной анимации, не такой.
Используйте инструмент «Перо»
Создайте новый слой на текстовом слое, чтобы нарисовать путь.Мне вообще нравится устанавливать фон текста темного цвета, что удобно для последующего рисования пути пером.
Нам нужно получить путь к тексту, и использование Pen Tool очень удобно. Дважды щелкните инструмент «Перо» и отрегулируйте плавность штрихов пера до максимального значения справа.
Далее самая трудная часть всего эффекта.Используйте инструмент «Перо» на текстовом слое, чтобы перерисовать текст на только что созданном слое. При рисовании следите за тем, чтобы кривые были плавными, особенно вокруг углов. за этоhandwritingЭто слово, я в основном разделил на четыре части для рисования.HЭта буква разделена на две части, средняя часть разделена на путь, а последняя часть разделена на две части.TБуквы также занимают путь.
При рисовании не просто рисуйте все сразу, вы можете нарисовать часть, остановиться, увеличить детали, а затем продолжить рисовать. Это гарантирует, что нарисованный путь соответствует нашим требованиям. Следует напомнить, что рисуя путь, старайтесь максимально имитировать ощущения людей, пишущих текст, например, иногда при написании может потребоваться написать дважды в одном и том же месте.
Затем настройте путь к тексту так, чтобы он соответствовал тексту. Перед началом настройки рекомендуется заполнить границу контура и настроить прозрачность слоя контура на 75%, чтобы текстовый слой под ним был виден прямо через контур, а затем выбрать цвет заливки для границы контура, Я выбрал зеленый, в При доработке анимационных эффектов их можно настроить в любой момент. В этом примере я установил ширину границы контура равной 10 пикселям, деленной на первую букву.HУстановите 14 пикселей, это в основном связано с выбранным вами шрифтом.
После рисования на некоторых дорожках может быть много острых углов, да и ремонт тоже очень простой.
Для этих острых углов можно использовать этот элемент управления для исправления закругленных углов. Используйте инструмент Path Direct Selection, затем нажмите на контрольную точку на пути, где есть острые углы пути, вы увидите белый круг в углублении под контрольной точкой, дважды щелкните его, чтобы вызвать элемент управления скруглением, установите круглый размер угла может быть помещен в закругленные углы, его положение можно регулировать перетаскиванием.
После настройки получается требуемый путь. Что касается того, как использовать перо и инструмент Безье для настройки кривой, я не буду здесь вдаваться в подробности, в Интернете есть много ресурсов.
Самая трудоемкая часть всего анимационного эффекта — рисование пути. Для ветерана ИИ это может занять всего несколько минут, для новичка ИИ это может занять большую часть времени, час или больше. Для инструментов это может быть только больше практики, практика делает совершенным.
Что касается степени соответствия между путем и текстом, то, если она достаточно близка, она не обязательно должна быть 100%-ной.
Ниже приведено сравнение окончательного нарисованного пути и исходного текстового слоя:
Самая трудоемкая часть работы сделана, и следующая часть — анимационная часть. Прежде чем приступить к написанию кода анимации, присвойте каждому пути класс для облегчения последующих операций, здесь рекомендуется использовать именно его.GreenSockизTweenMaxа такжеDrawSVGа такжеMorphSVGдля завершения анимации.
Затем посмотрите вниз.
Анимация рукописного ввода с GreenSock
После завершения рисования пути следующим шагом будет использование GreenSock для достижения эффекта рисованной анимации.
Прежде чем мы начнем, давайте представим TweenMax и два других подключаемых модуля, которые мы будем использовать.
1,РисоватьSVG:Этот плагин в основном используется для достижения эффектов анимации рисования пути. Конечно, вы также можете использовать JavaScript для достижения эффектов анимации рисования, но использование этого плагина может решить проблемы совместимости браузера, а также предоставляет множество функций для лучшего контроля рисования путей.
2,МорфСВГ:Из названия плагина вы можете узнать, что он используется для достижения анимации деформации SVG, а также предоставляет очень полезный методMorphSVGPlugin.pathDataToBezier(), вы можете использовать его для достижения эффекта анимации элемента, следующего за движением пути. С его помощью мы можем добиться анимационного эффекта написания текста ручкой.
Разумеется, эти два плагина платные и их нужно добавить вClub GreenSockчтобы использовать его, но вы можете использовать его бесплатно на CodePen для некоторых упражнений, проверьте этодемонстрационная коллекция.
рисовать путь
использоватьDrawSVGПлагины могут быть очень удобными для достижения эффектов анимации рисования пути, таких как:
<path id="path1" d="M169.2,107c-.71,70.36,47.26,138.58,113.71,161.71s146.42-.56,189.55-56.15c17.44-22.48,29-49,45.37-72.22s40-44.08,68.32-46.44c24.27-2,47.89,10,66,26.36s31.74,36.83,46.67,56.07c25.95,33.43,56.77,64,94.37,83.42s82.7,26.77,122.9,13.54,73.74-49.21,77.86-91.33" fill="none" stroke="#fff" stroke-linecap="round" linejoin="round" stroke-miterlimit="10" stroke-width="4"/>
Эффект анимации чертежа пути может быть достигнут только одним строкой кода:
TweenMax.fromTo("#path1", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
Это так просто, анимационный эффект рукописного текста такой же, и строки достаточно. Вы можете использовать TweenMax для рисования каждого параметра по очереди, чтобы реализовать рукописные эффекты. Однако, если мы все же хотим сделать рукописные анимации более реалистичными, если при прорисовке пути есть карандаш, как вы будете следовать пути вместе? Если это было раньше, для достижения такого эффекта может потребоваться много времени, но сейчас это легко.
следовать по пути
использоватьMorphSVGMorphSVGPlugin.pathDataToBezier()path1Этот путь, использоватьMorphSVGPlugin.pathDataToBezier()Хорошо определено:
var motionPath1 = MorphSVGPlugin.pathDataToBezier("#path1", {align: "#target"});
Затем используйте метод to в TweenMax.bezierсвойство для вызова выше, используяMorphSVGPlugin.pathDataToBezier()Определите путь к реализации пути последующего действия:
// in this case, our target is a simple circle, but you can use anything
// including groups or images... well, anything...
TweenMax.to("#target", 3, { bezier:{values:motionPath1, type:"cubic"}})
Теперь вы можете комбинировать эффекты рисования по траектории и движения по траектории, чтобы получить анимацию отрисовки по траектории. В этом примере вы можете видеть, что круг рисует два пути соответственно, и оба они следуют траектории пути. Видно, что таких анимационных эффектов можно легко добиться с помощью GreenSock.
Дополнительные данные о местоположении
Благодаря приведенному выше небольшому примеру я понимаю принцип реализации отслеживания пути и рисования анимации. Но при рисовании от первого сегмента пути ко второму сегменту пути возникает эффект анимации движения круга. Здесь нам нужно дополнительно определить некоторые данные о положении карандаша, чтобы он следовал по пути, так как же определить положение начальной точки пути? На самом деле, это совсем не сложно, это просто положение начальной точки следующего пути.Например, после того, как первый путь нарисован, начальную точку второго пути нужно переместить, а не резко прыгать ко второму пути, чтобы начать рисовать, поэтому здесь необходимо добавить эффект анимации.
Откуда берутся координаты? Вы можете вывести данные двух определенных путей пути под консольным выводом, и вы можете узнать координаты начальной точки пути:
// this will give us the array of points in the motion path
console.log(motionPath2);
// open the array and we'll see several objects
// check out the first one and you'll see the coordinates we need
// you should see something like this
0:Object
x:160.52
y:479.74
Просто добавьте координаты движения круга в последовательность анимации, и вы сможете создать эффект анимации движения при движении круга. Подобным образом, эффект анимации письма текста также может быть выполнен таким же образом.Когда карандаш заканчивает рисовать первый сегмент пути и начинает рисовать второй сегмент пути, используйте описанный выше метод, чтобы заставить карандаш двигаться с эффект анимации движения.
Независимо от того, сколько путей у вас есть, использование описанного выше метода может привести к тому, что вы переусердствуете. Из примера с кругом, следующим по указанному выше пути, вы заметите, что когда круг заканчивает рисовать второй путь, я немедленно перемещаюсь в начальную точку первого пути, так что можно добиться эффекта анимации кругового рисования.
окончание
Все подготовительные работы выполнены, далее идут финальные отделочные работы для достижения эффекта рукописной анимации. Вам нужно только заполнить соответствующие данные в соответствии с вышеуказанным методом, чтобы завершить эффект анимации рукописного ввода.
Определите четыре пути соответственно, получите координаты начальной точки второго пути и поместите их в последовательность анимации:
TweenMax.set("path", {drawSVG:0});// set all path strokes to 0
var tl = new TimelineMax();
tl.add("start") // use a label to start tweens at the same time
tl.to("#path1", 3, {drawSVG:true}, "start"); // draw path 1
tl.to("#target", 3, { bezier:{values:motionPath1, type:"cubic"}}, "start"); // follow path 1
tl.to("#target", 2, {x:100, y:500}); // move to path 2 starting point
tl.add("label"); // use a label to start tweens at the same time
tl.to("#path2", 3, {drawSVG:true}, "label"); // draw path 2
tl.to("#target", 3, { bezier:{values:motionPath2, type:"cubic"} }, "label"); //follow path 2
tl.to("#target", 2, {x:500, y:800}); // move to path 3 if you have more
// lather, rinse, repeat
Наконец, вы можете настроить данные анимации, такие как скорость движения и цвет пути заполнения. Похоже, вам нужно написать много кода, но когда вы понимаете его принцип, это на самом деле очень легко и просто писать, особенно функция управления временем управления, она обеспечивает очень удобную для управления последовательностями анимации. Наконец, давайте посмотрим на последний эффект анимации:
Суммировать
Официальный сайта такжеФорумСмотри, есть много полезных знаний, специальный форум стоит часто ходить по магазинам.
допустимыйTwitterилиФорумСм. мой последний пост на GreenSock.
Эта статья в основном изAnimated handwriting effectВ этой статье разобрали, есть пропуски, пропуски или непонятные места, дайте пожалуйста еще совет!