Идея исходит из шедевра великого бога Codepen, группа роботов танцует богоподобными шагами, но, но, открой, чистая js реализация, js! В любом случае, я хочу попробовать получить такой эффект с помощью SVG+CSS3, o(￣ヘ￣o#). Это предпосылка.
1. Базовая графика и базовая анимация
Начнем с простой версии робота, так как упор сделан на анимацию, поэтому проще не бывает.Используются все прямоугольники со скругленными углами в стиле капсулы, но для облегчения замены рук и ног в будущем я по-прежнему послушно ставится Каждая часть, готовая к перемещению, разделяется на другой слой, и к соединению прикрепляется винт. Хорошо, хорошо, простой винт, просто нажмите на черную точку После того, как рисунок будет завершен в AI, этот продукт выглядит следующим образом. (Чтобы облегчить суперпозицию, я добавил прозрачность, а позже узнал, что у прозрачности есть свой смысл дизайна, так тому и быть)
Хотя толку от техники нет, а странные черные пятна по всему телу делают его похожим на 18 бронзовых фигур или что-то вроде акупунктуры и акупунктуры в традиционной китайской медицине, но это не мешает нашему движению робота, давай, передавай привет все, сначала подвигайте головой, подойдите.
Те, кто хоть немного знаком с частью CSS, знают, что проще не бывает.transform:rotateProperties, единственное, что здесь следует отметить, это то, что при определении анимации необходимо определить transform-origin, начало вращения, вот в чем смысл кучи черных точек на стыках. Потому что в SVG, экспортированном моим ИИ, каждый косяк, т.е.<circle>центр кругаcxа такжеcyЗначение - это начало вращения каждой части.
Очень хороший, очень послушный. Теперь, когда он движется и имеет жизнь, независимо от того, основан ли он на кремнии или углероде, дать «ему» красивое имя также удобно называть. Дабая (●—●) нельзя дозвониться, поэтому давайте позвоним Сяобину. «Привет~, я Сяобин»
Сяобин, а теперь я приказываю тебе еще немного пошевелить левой ногой.
Хорошо, дальше другие части движутся вместе.
Что ж, тест завершен, все в норме. Подождите, кажется, что-то не так, если вы сообразительны, вы наверняка обнаружили странность, то есть - в эффекте движения дистальная часть конечности движется, икра движется, а бедро не движется, рука двигается, а локоть не двигается, кашляет, кашляет, да это киборг приколотый и может только бороться. Это была куча «шурупов», которые пригвоздили Сяобина. Почему ты делаешь это? Причина проста, я позволю своему бедру двигаться и посмотрю, что произойдет.
Это? Все выбрасывают, никого не волнует кто? Пожалуйста, вы целое. Теперь возникает вопрос: когда мы определяем свойства анимации CSS, началу вращения каждой подвижной формы присваивается фиксированное значение, так что в этом случае, как мы можем заставить начало координат конечного плеча перемещаться вместе с поворотом верхней конечности? ?
2. Решение для анимации пути SIML
Делать все следует медленно, причем первый этап разборки следует проводить, а двигать следует только верхней половиной конечностей.
Чтобы было легче видеть (теперь ослепленный и неспособный смотреть прямо), Сяобин выслушал приказ, сначала приостановил замах и двинул правым бедром и правой икрой. (Бедро и икра определяются с помощью одной и той же анимации вращения, включая исходную точку, которая единообразно определяется как исходная точка вращения бедра)
Здесь что-то не так? имеют! Это не соответствует законам физики. Давайте сначала разберем его с картинкой, а потом назначим правильное лекарство.
Перебрасывая бедро из положения А в положение Б, я хочу, чтобы эффект голени оставался все время внизу. Оно эквивалентно движению голени без амплитуды маятника, то есть движению по пунктирной линии на рисунке. Подожди, помнишь что-нибудь? отслеживать? Мы упоминали в анимации пути, что можно управлять качанием,
<animateMotion rotate="auto">Это определение качания с путем. Если он не определен, он не будет качаться по умолчанию. Поскольку круг также может быть путем, давайте воспользуемся здесь анимацией пути, чтобы увидеть, как это сделать. Я уже писал подробное объяснение анимации пути, а здесь я смотрю только на эффект:
Кажется, решить проблему. Однако возникла новая проблема, а именно, когда я хочу качать бедро, моя икра естественно качается, что мне делать?
3. Разобрать SVG и использовать независимые решения системы координат
Перейдите к его анимации пути, правильное решение здесь, потому что SVG - это система координат, то есть мы должны следовать тем же правилам при определении начала вращения, В анимации вращения куба мы сделали шесть граней , шесть SVG, в котором каждая анимация выполняется, не мешая друг другу, эта идея все еще осуществима в нашей анимации.
Проще говоря, я поместил четыре крайние конечности, которые нужно качать, в четыре SVG, взяв в качестве примера правую ногу. Посмотри на картинку, посмотри на картинку. Независимая SVG, в которой икра находится сначала, поддерживает то же вращательное движение, что и бедро.Конечно, начало вращения бедра также используется O2, а форма теленка внутри перемещается в соответствии с началом вращения O1 собственной координаты. системе, потому что в процессе движения SVG система координат также находится в движении, поэтому, хотя начало движения теленка относительно исходной системы координат продолжает меняться, оно остается неизменным в своей собственной системе координат. Это немного сложно, но после понимания идеи анимации все понятно.
Вставьте код, чтобы объяснить, кстати
Прежде всего, самое главное, что при размещении в html атрибут position SVG должен быть определен как абсолютный.Я не буду здесь хвастаться.Все мои друзья знают, потому что наши SVG накладываются друг на друга, поэтому
SVG{position:absolute}
Код CSS для движения выглядит следующим образом (размещена только правая нога):
@keyframes rightLeg{ /*定义右腿大腿的摆动(旋转动画)*/
0%{transform:rotate(0deg); }
100%{transform:rotate(-90deg); }
}
.rightLeg{
animation:rightLeg 1s ease alternate infinite;
transform-origin: /*旋转原点O1*/
}
@keyframes rightLeg2{ /*定义右腿小腿的摆动(旋转动画)*/
0%{transform:rotate(-50deg); }
100%{transform:rotate(50deg); }
}
.rightLeg path{
animation:rightLeg2 0.4s ease alternate infinite ;
transform-origin: /*旋转原点O2*/
} Часть DOM, бедро, локоть, голова и тело — это один и тот же SVG, а часть голени — отдельный SVG.
<svg class="rightLeg">
<path d=""/> <!--这里可能是path，也可能是rect，总之AI导出什么就是什么啦。-->
</svg>Ладно, Сяобин, послушай пароль, а теперь пусть все посмотрят на нормальные механические ноги.
Отлично!Теперь икра и бедро могут быть бесшовно соединены между собой, вы можете двигаться как хотите, скорость движения, амплитуду качания вы можете определить по своему желанию.
Остальное опять физический труд, а теперь остальные части можно разобрать по изложенным выше идеям. Я определил его казуально (говорят, что казуально, но каждый должен определяться много, от чего тоже кружится голова), и тут у меня получилась следующая анимация.
Механический танец, достаточно волшебный.
Конечно, если вы достаточно креативны, вы можете играть, как вам нравится. Во всяком случае, Xiaobing - это не моя раса, поэтому вы можете тренировать, как вы хотите. Например, левые и правильные качели кисти (левая рука и правая рука определяются как одинаковую анимацию, а левые и правые ноги определяются как такая же анимация)
Короче говоря, любое определение будет делать, все произвольно.
Помните нашу анимацию с пропуском кадров, смотрите эту статьюnuggets.capable/post/684490…
В нем сделаны некоторые эффекты, например, часы «клик-клик», а еще наш Сяобин умеет двигать «клик-клик-клик». При определении анимации анимации удалите значения легкости, линейного или кубического жаровни, определяющие скорость, и замените их наsteps(), вы получите мало льда, в котором отсутствует смазочное масло, примерноsteps(n)В определении значения n вы не можете быть слишком произвольным.В зависимости от времени анимации вращения будет более строго поддерживать постоянную частоту щелчков. Я сделал это, и вы можете увидеть эффект:
Другой пример — у нас крутой процесс сборки. (Первая часть анимации — это сборка частей, которая в основном основана на анимации преобразования: перевод смещения)
Вот именно, рвать его невыносимо.
Если вы чувствуете, что часть тела неподвижна и слишком жесткая, не проблема, сначала очистите свое мышление.Во-первых, все части движутся вместе.При этом бедро вращается в своей системе координат, а икра вращается в своей системе координат. система. . В этом случае добавьте еще один контейнер в исходную структуру DOM.<div>. Поместите все SVG в это<div>середина.
Часть CSS остается неизменной, а определение добавления части движения тела выглядит следующим образом:
@keyframes base{
0%{transform:translateX(-100px); }
100%{transform:translateX(100px); }
}
.base{
animation:base 1s ease alternate infinite;
}Или добавьте еще немного взмаха, и вы получите следующий эффект:
На основе базового динамического эффекта робот Xiaoice можно разнообразить, заменив компоненты SVG, например следующие:
Не забудьте переопределить начало вращения! !
Ключевым моментом в связи динамического эффекта является использование относительной системы координат, то есть, если элемент нуждается в «автоматическом» и «общественном движении» (производном от вращения и вращения, самодельных слов), метод заключается в том, чтобы поместить это в отдельном SVG, каждый SVG имеет свою собственную независимую систему координат, и компоненты, из которых состоят элементы, «автоматически» следуют своей собственной системе координат.
Как только вы освоите этот метод, вы сможете делать с анимацией все, что захотите. Легко сделать колесо обозрения, не так ли? Заинтересованные друзья могут попробовать сами.
Кроме того, кроме того, я действительно знаю, что лучше всего использовать js.Например, в нашей анимации мы можем использовать js для получения значения координаты суставной части, а затем присвоить его началу вращения.Однако, это невозможно~~ Вручную (*￣ ︶￣)