CSS3 «Broken-Reorganized-Broken» реализует идеальную анимацию деформации в стиле Lowpoly.

внешний интерфейс SVG анимация CSS

получениеАнимация SVG+CSS3 имитирует рекламный ролик Strawberry Music FestivalПосле травмы мне всегда хотелось найти что-то простое и блефовое, чтобы успокоить горе и гнев. Просматривая избранное, я нашел давно заветный инвентарь, фрагментированные анимационные эффекты 30 вымирающих животных. Иногда много творчества исходит от других, не признавайтесь в этом,Посмотрите, это потрясающе. написано раньшеCSS3 реализует эффект низкополигональной анимации, хотя это тоже лоуполи-эффект, на самом деле его реализация гораздо сложнее и сложнее, и он тоже использует селекторы CSS, но все же известное высказывание,Креативность гораздо важнее мастерства, Идея этого фрагмента животного меня удивила. Не бойтесь друзей-дизайнеров, конечный эффект, если вы терпеливо читаете статью, она должна быть в состоянии это сделать, также очень хорошо напугать переднюю часть, что касается передней части детской обуви, вы можете пропустите третью часть напрямую или большую дыру, оставшуюся в четвертой части. Без глупостей, просто уходи.

1. Первый шаг, в любом случае нужно сделать анимацию basemap

Поскольку в оригинальном эффекте 30 видов животных, конечно, я не буду бездельничать, чтобы сделать каждого из них, поэтому я просто выберу несколько, которые мне нравятся. Чтобы не разочаровывать вас, я прикреплю многоразовый код и укажу, как добавить новую графику.Если вы хотите сделать 30 или 300 изображений, не стесняйтесь. Возьмем первый:

Это почти полностью имитируется исходным рисунком в ИИ.Для дизайнеров,если вы будете делать такой рисунок каждую минуту,вы лучше меня,я ленивый человек,накиньте на него базовую карту,а потом сравните Сделали кучу треугольников, это не должно быть слишком точным, а затем каждый фрагмент окрашивается в соответствии с исходным изображением. Если это будут боги фронтенда, которые читают эту статью, эм, иди купи вкусняшек для красивой девушки с пользовательским интерфейсом, я могу только помочь тебе здесь. Сколько всего фрагментов треугольника?33штука, запомни это число,33, о причинах поговорим позже.
Конечно, количество фрагментов не нужно считать по одному, потому что при сохранении в формате SVG при открытии будет некоторое количество<polygon points="" />этикетки, каждая<polygon>Соответствующий фрагмент, просто посмотрите на количество строк (следующее предложение предназначено только для дизайнеров, у которых нет основы кода, перейдите в следующий блокнот, чтобы открыть свой файл SVG, читабельность кода будет улучшена). Конечно, одну картинку деформировать нельзя, а есть места, где лениться нельзя, так что давайте просто сделаем и то, и другое, я выбрал кита и лягушку.

только фрагменты китов30фильм, если вы видели другие мои статьи о морфинге анимациитакой как этот, должно быть базовое понимание, в первую очередь количество осколков должно быть равным, поэтому кит добавил3Кусочек белого облака (или 3, если быть точным)<polygon>), чтобы составить число.

Вот в чем суть, независимо от того, какое программное обеспечение для рисования вы используете, AI или эскиз, помните, что основная форма должна быть треугольником, и не вводите никакие другие формы. То есть каждый экспортируемый<polygon poins="">Количество координат в нем одинаковое, групп будет три или четыре. (SVG, сгенерированный двумя методами сохранения и экспорта ИИ, отличается, но последняя группа из четырех групп такая же, как и первая группа. Рекомендуется сохранять в формате SVG. Эта яма уже наступила)

2. Второй шаг, теперь найдите способ деформировать фрагменты

Во-первых, нам нужно изменить DOM-структуру файла SVG.Текущий экспортируемый файл SVG имеет фоновый прямоугольник, кроме одного<rect>теги, остальное должно быть<polygon>Маркированные, например, чтобы увидеть, совпадает ли ваш с моим. Это любой фрагмент в нем (например, птица).Общая идея этой анимации заключается в сочетании деформации каждого фрагмента.Возьмем приведенный выше пример, деформируемый кит.<polygon>Теги следующие:

<polygon points="W1,W2 W3,W4 W5,W6" style="fill: #…"/>

Если это встроенный стиль, то CSS3 может напрямую покинуть сцену, как насчет анимации. Теперь нам нужно добавить все эти встроенные свойства в раздел CSS, а затем передатьd:pathАтрибут изменяется, чтобы получить анимацию деформации.

@keyframes p2{
0% {d:path('MB1,B2LB3,B4LB5,B6z');fill:#…}  /*绘制bird其中之一碎片*/
100%{d:path('MW1,W2LW3,W4LW5,W6z');fill:#…} /*绘制whale其中之一碎片*/
}
#p2{animation:p2 2s ease both;}

А в структуре DOM сохраните простое<polygon>тег, вы можете получить это свойство анимации.

<polygon id ="p2" />

При использовании свойств CSS для отрисовки фрагментов помните, что формат должен быть правильным, а цвет заливки более понятным, но все координаты вершин прописаны вd:pathпора превращаться вMxy Lx1y1 Lx2y2 Lx2y2 zЭтот стиль, который не будет подробно объясняться, относится к базовым знаниям.

Какой бы метод здесь не применялся, короче говоря, все фрагменты соответствуют<polygon>изpointsЗначение преобразуется в CSS3dстоимость. Например, например, я использовал мощную формулу Find всемогущего excel (очень хлопотно вкладывать несколько) (я никогда не думал, что однажды буду использовать excel для сращивания кодов...), все великие боги Там может быть другие методы, регулярные выражения или еще что-то, я не знаю, у вас у всех свои навыки, короче, если результат стандартный, то это основа нашей анимации деформации. Что касается порядка, это не имеет значения, просто следуйте сгенерированному по умолчанию порядку. Структура CSS3 и DOM всего преобразования очень проста, если не перечислить все 33 фрагмента. Поэтому этот динамический эффект просто громоздкий, далеко не сложный.

@keyframes bg{
0%{fill:#A4C5EA}
100%{fill:#73DBE0}
}
#bg{animation:bg 2s ease both;}
/*定义背景色的变化*/

@keyframes p(n){
0% {d:path('');fill:#…}
100%{d:path('');fill:#…;}
}
#p(n){animation:p(n) 2s ease both;}
/*n=1,2,3,4……33  一共需要定义33个*/

Структура DOM выглядит следующим образом

<rect width="" height="" id="bg" />
<!--背景变色动效-->
<path id="p(n)" />
<!-- n=1,2,3,4……33  一共需要33个 -->

Сначала наслаждайтесь результатами своего упорного труда:

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

3. Третий шаг более оптимизирован, чем исходный эффект, мы поддерживаем взаимодействие

Спасибо за помощь Hevo, гуру Java. Да, JavaScript - это просто немного случайного понимания. После предоставления идеи анимации деформации легко бросить несколько строк JavaScript-скриптов, которые я не могу понять. реализовать взаимодействие, и, кстати, его можно расширить позже. Эффект движения оригинального веб-сайта заключался в переключении между передним и обратным кликами.Поскольку я обратился за помощью к Hevo, я, естественно, хотел сделать его более красивым и подвижным. Конечным эффектом является поддержка деформации между произвольными формами. Теперь ставлю детали обратно. Часть javascript выглядит следующим образом

$(function(){
	$("button").bind("click", function(){
		var turnTo = $(this).attr("turnTo");
		// for backgroud changing
		var bg = $("#p_bg");
		var bg_fill = bg.css("fill")
		bg.css("fill", bg_fill).css("animation", turnTo + "_bg 2s ease both")
		
		// for lowpoly changing
		$.each($("path"), function(i, n){
			var d = $(n).css("d");

			var fill = $(n).css("fill");
			
			$(n).css("d", d).css("fill", fill);
			$(n).css("animation", turnTo + "" + (i+1) + " 2s ease both");
		});
		
	})
})

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

Часть CSS выглядит следующим образом

@keyframes bird_bg{
to{fill:#A4C5EA;}
}
/* 定义bird的背景色 */

@keyframes bird(n){
to{d:path('');fill:#…;}
}
/*定义bird碎片最终变形的效果 n=1,2,3……33*/、

@keyframes whale_bg{
to{fill:#73DBE0;}
}
/* 定义whale的背景色 */

@keyframes whale(n){
to{d:path('');fill:#…;}
}
/*定义whale碎片最终变形的效果 n=1,2,3……33*/

@keyframes frog_bg{
to{fill:#ffcffc;}
}
/* 定义frog的背景色 */

@keyframes frog(n){
to{d:path('');fill:#…;}
}
/*定义frog碎片最终变形的效果 n=1,2,3……33*/

#p_bg{
fill:#ffd480;
animation:bird_bg 2s ease both;
}
/*定义初始画面的背景*/
#p(n){
d:path('');fill:#…;
animation:bird(n) 2s ease both;
}
/*定义初始画面的路径 n=1,2,3……33*/

/* 定义按钮样式 */  
此处省略若干…… 喜欢什么样式去copy些下来吧

раздел DOM

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	width="960"  height="720" viewbox="0 0 960 720">
<rect width="960" height="720" id="p_bg"/><!--此为背景-->
<path  id="p(n)" />  <!--n=1,2,3……33-->
</svg>
<p>
<button type="button" turnTo="bird" class="">BIRD</button> 
<button type="button" turnTo="frog" class="">FROG</button> 
<button type="button" turnTo="whale" class="">WHALE</button> 
</p>

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

Теперь этот анимационный эффект был на ступеньку выше. О начальном экране, которыйLOW, Стена не означает, что эффект слишком низкий, я очень хочу сделать лоуполи эффект LOWPOLY, но мне ничего не остается, как генерировать более 33 фрагментов, а менять другие части мне лень (например, Я могу добавить пустые пути ко всем из них)d:path('M0,0L0,0L0,0L0,0z')(Если вы понимаете правила рисования путей, вы должны легко увидеть, что это виртуальный путь), чтобы составить все числа, но если вы ленивы и хлопотливы, скажем так, низкие.

Поскольку формат gif относительно большой и ограниченный, просто нажмите несколько быстрых кликов и перейдите по адресу демо-версии, если вы хотите играть с удовольствием. В конце статьи я опубликую адрес моего демо codepen.

Так как же его используют дизайнеры? Взгляните на правила именования моего демо. Я постараюсь, чтобы названия всех элементов были одинаковыми. Например, если вы хотите добавить картинку, это овца (я знаю, что это антилопа антилопа, но это слово выходит за рамки познания, см. не знаю). Затем, чтобы определить Цвет фона изображения — sheep_bg, атрибут d:path каждого фрагмента овцы (n) и кнопка для добавления turnTo="sheep", вот и все. Тест на человеческую плоть эффективен, см. рисунок ниже:

Поскольку исходный веб-сайт поддерживает только просмотр вверх и вниз, а мы поддерживаем произвольное переключение, здесь должны быть аплодисменты.

4. Этот эффект может быть лучше, но я не знаю, как им управлять с помощью JavaScript.

Основная часть этой анимации — деформация между животными, но есть еще мелкие детали, например, определенная часть тела все еще может двигаться. При исходном превращении птицы в кита, до анимации трансформации хвост птицы подвижен.После трансформации плавники кита подвижны.Эффект я сделал сам,который наверное заключается в следующем.

Идея очень проста. Переопределить атрибут анимации для той части, которая должна двигаться. Возьмем в качестве примера хвост птицы. Поскольку движение конечностей является совместным, используется атрибут деформации вращения.transform:rotate().

@keyframes bird_tail{
to {transform:rotate(6deg);}
}
#bird_tail{animation:bird_tail 0.5s ease-in-out 4 alternate;transform-origin:} 
/*准确定义旋转的基点transform-origin很重要，就是关节位置*/

Кит вкладывает две части, смещение целого, **transform:translateX()** и вращение нескольких локальных комбинаций, и установить временную задержку не очень сложно.

Поскольку эта яма слишком глубокая, я не собираюсь ее трогать. Осознав этот эффект, я оставил остальное Hevo, чтобы посмотреть, сможем ли мы использовать JavaScript для достижения круговой анимации локальной деформации между двумя переключателями кнопок.

В конце концов, чтобы подвести итог, для этого динамического эффекта кажется, что он полон силы, но на самом деле это простоd:path()Эффект деформации изменения значения свойства. Но из-за того, что существует много одиночных изменений, создается этот удивительный эффект. кодовый адресLowpoly transform animation, вы можете перейти к предварительному просмотру, как изменить графику, которую вы хотите, я думаю, что я сказал это очень ясно выше, давайте играть.

Категории