Роль анимации во внешнем интерфейсе заключается в улучшении пользовательского опыта и привлечении внимания пользователей. В интернет-индустрии это также постоянная горячая тема. Как правило, на платформах электронной коммерции или развлекательных проектах много анимационных сцен (Kuishou, Pinduoduo, Taobao, Tencent Video, Douyin и т. д.). Итак, с помощью этой статьи, какие аспекты осознания вы можете улучшить?
1. 前端人员实现动画的技术有哪些？
2. 每种动画的实现技术有什么特点，适合什么样的场景？
2. 拿到需求稿或者动画demo的时候，如何选择最合适的技术栈？
（选择合适的技术栈在任何时候都是对程序员非常重要的一个考验）
3. 制作一系列的动画，各岗位的人该如何配合，每个人分别做什么
Наиболее успешные проекты Kuaishou в отрасли в этом году - проекты серии Spring Festival
Во всей серии проектов много анимационных элементов, но в каждом месте необходимо выбрать наиболее подходящую технологию в соответствии с характеристиками анимации, чтобы достичь высочайшего уровня производительности и отображения, чтобы интерпретировать самую продвинутую анимацию. Затем персонал отдела исследований и разработок и дизайнеры должны сотрудничать и общаться, чтобы разработать наиболее совершенную техническую структуру анимации, когда они получат спрос.
предварительное рассмотрение
Совместимость, стабильность, размер, производительность, пользовательское оборудование (тест на недорогих машинах).
стек технологий
APNG, css Animation, SVG, Lottie, Canvas, WebGL, cocos, webp, TransparentVideo...
APNG
Введение: Полное название — Animated PNG, созданное в 2004 году.
характерная черта:
PNG, который поддерживает прозрачную анимацию (по сути, растровое изображение), является расширением png. Таким образом, на устройстве, которое не поддерживает apng, он может понизить версию до отображения неподвижного изображения png. Хотя и gif, и apng являются движущимися изображениями, качество apng намного лучше, чем у gif, и его должен создавать дизайнер (на рисунке ниже показано сравнение между gif и apng). Метод использования во внешнем интерфейсе такой же, как и для изображений в других форматах, которые можно напрямую вставлять на веб-страницу в виде изображений.
преимущество:
(1) 24-битный истинный цвет (gif — это 8-битный цвет, биты здесь можно понимать как степень 2, а 8-битный цвет — это 8-я степень 2, то есть 256 цветов, что означает, что gif может отображать до 256 видов цветов, поэтому переход уровня gif будет намного хуже, чем у apng),
(2) 8-битный альфа-канал прозрачности (формат gif не поддерживает альфа-канал, то есть не поддерживает полупрозрачность, но все мы знаем, что часть пикселей на краю графики в растровом изображении полупрозрачна, т.к. показано на рисунке ниже, поэтому gif не поддерживает полупрозрачность, потому что края графика будут неровными).
Каждый пиксель изображения имеет три канала RGB (красный, зеленый, синий), а затем альфа-канал. Растровое изображение, хранящееся с использованием 32 бит, каждые 8 бит представляют красный (8), зеленый (8), синий (8) и альфа-каналы (8).
В этом случае альфа-канал может представлять 256 (2 в 8-й степени) уровней прозрачности, а прозрачностью можно управлять более плавно, а у gif нет альфа-канала, поэтому он может отображаться только как прозрачный или непрозрачный, Нет возможности контролировать прозрачность.
Недостатки: На данный момент совместимость не очень хорошая, но есть некоторые инструменты, которые поддерживают создание анимированных изображений PNG.
css Animation
Разработчики интерфейса должны быть знакомы с CSS-анимацией.
Если вы начнете глубоко понимать CSS, вы обнаружите: все может быть CSS.
Преимущества: Браузер провел большую оптимизацию анимации CSS3, например, создал новый слой для запуска анимации и принудительного аппаратного ускорения.
Недостатки: Анимацию можно пройти от начала до конца, но сложно сделать интерактивное управление по нашим пожеланиям в процессе анимации.
Вы можете попробовать эту небольшую демонстрацию вместе, чтобы почувствовать особенности написания CSS Animation и эффект сотрясения живота:
<div class="belly"></div> /* 第一步：画个肚皮 */
.belly { /* 第二步：给DOM元素选择器里设置属性animation */
width: 80px;
height: 90px;
position: absolute;
background: #eeeeee;
border-radius: 10% 20% 40% 40%;
animation: wave2 0.08s infinite alternate;}
@keyframes wave2 { /* 第三步：写@keyframes + 动画名 描述动画 */
from {
top: 76px;
left: 8px;
border-radius: 10% 20% 40% 60%;
}
to {
top: 74px;
left: 12px;
border-radius: 10% 20% 30% 30%;
}
}
В настоящее время более зрелая библиотека анимации CSS:Animate.css
Вдохновленные блогеры CSS-анимации:chokcoco
Онлайн-инструменты редактирования, подходящие для отладки анимации CSS:CodePen
SVG-анимация
Анимация, показанная на рисунке выше, должна быть реализована с различными технологическими стеками, а также необходимо использовать JavaScript для управления жизненным циклом вращения светоизлучающего блока (предварительно вращение, обратный отсчет вращения, вращение до последней сетки, и т. Д.) И сделайте это во времени на точке фиксированной карты. Очистка данных.
Часть кода:
<svg>
<clipPath id="svgTextPath"> /* 这里可以定义不规则形状的动画容器（带阴影的魔盒外形）*/
<path class="box" d="..."/>
</clipPath>
</svg>
.out-motion {
clip-path: url(#svgTextPath); /* 在有动画的元素上 做个剪切蒙版，镂空的部分就是刚刚的svg图形 *、
... ...
.inner-light {
will-change: transform;
animation: sun 4s linear infinite;
... ...
}
}
Преимущества: Форма, описываемая svg, может быть полностью настроена, а это значит, что мы можем произвольно вогнутую форму этого контейнера анимации, прямо как сжигание бумажной керамики (спасибо, я могу понять это).
Мы также можем сначала описать фигуру, а затем добавить в нее элемент анимации для анимации:
<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
<animate
attributeName="width"
attributeType="XML"
from="200" to="20"
begin="0s" dur="5s"
fill="freeze" />
</rect>
характерная черта:
(1) Векторная графика, масштабируемая, хорошо работает на разных платформах или носителях, без неровностей и размытия.
(2) Структурой DOM можно управлять с помощью специального синтаксиса или Javascript, что позволяет легко реализовать анимацию.
Растровые изображения и векторы
Растровое изображение: как показано слева, оно состоит из одной сетки и одной сетки, каждая сетка имеет только один цвет, а изображение формируется путем сращивания множества одноцветных сеток (сетка здесь — это пиксель).
Векторное изображение: Как показано справа, картинка образована двумерными координатами через соединительные линии, поэтому, как бы ни была велика площадь картинки, она не имеет пилообразной формы, потому что эквивалентна картинке, координаты которой равны рассчитываются по математическим формулам, а затем соединяются.
Lottie
Как использовать: после того, как дизайнер завершит анимацию в AE, он экспортирует файл json во внешний интерфейс через подключаемый модуль AE BodyMovin, и внешний интерфейс использует файл json для рендеринга (подробности об использовании см. на официальном сайте Lottie). .
Преимущества: мягкое движение, естественный переход.
Недостатки: Плагин BodyMovin нуждается в доработке, а некоторые эффекты AE нельзя экспортировать.
Электронная анимация
Все знают, что Echarts — это библиотека диаграмм, но на самом деле она может делать анимацию. Мы говорили в начале статьи, что технический подбор анимации должен сочетаться с конкретными сценариями и потребностями, что действительно требует хранилища в нашей голове.
Например, если мы хотим сделать страницу отображения для пользователей управления рисками, у каждого пользователя есть значение риска, и нам нужно показать уровень риска этого пользователя риска (то есть срочность работы с этим пользователем риска) в анимации, мы можем использовать диаграмму жидкого водного поло echart (то есть, чем больше число, тем более турбулентным является течение воды). Диаграммы могут не только визуализировать данные, но и визуализировать эмоции, потому что, в конце концов, люди, которые просматривают эту страницу, все равно хотят быстро воспринимать две вещи: одну — эмоции, а другую — то, что было количественно определено. Этот дисплей максимизирует эмпатию.
Пример кода карты жидкого водного поло:
const liquidChart= echarts.init(document.getElementById("liquidChart"));
const liquidOpt = {
series: [{
type: 'liquidFill',
radius: '95%',
label: {
show: false
},
shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
/* 这里可以用svg设置自定义的形状（水流容器的形状）,也有一些预设选项如矩形rect、钻石菱形diamond */
amplitude: 0, /* 波的振幅 */
waveAnimation: false, /* 水波动画 */
outline: {
show: false
},
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
data: [0.6, {
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: 'red'
}
}
}, 0.4, 0.3]
/* 这个数组里有几个元素，就有几层水波，每层水波可以设置自己的属性 */
}]
};
liquidChart.setOption(liquidOpt);
Canvas
Преимущества: хорошо справляется с обработкой пикселей, динамическим рендерингом и отрисовкой больших объемов данных.
Недостаток: более низкая производительность для больших холстов в зависимости от пикселей.
Особенности: обратите вниманиеРисовать анимациюощущение, что рисуешь ручкой по белому холстурисовать свободноощущение чего-либо.
Применимые сценарии: скретч-музыка, автомобильные циферблаты, рисование диаграмм (Baidu Echarts — библиотека иконок на основе html Canvas), небольшие игры.
webGL
3D научно-фантастический вентилятор на основе html5 webGL
преимущество:
1.Хорошо визуализирует данные;
2.Рендеринг графики с использованием базовой функции аппаратного ускорения графики, поэтому он может плавно отображать 3D-сцены и модели;
3.Flash, который похож на него, требует, чтобы браузеры загружали плагины, но webGL можно просматривать напрямую, не загружая плагины;
Недостатки: Трудно начать работу, его стиль языка больше похож на C++, а персонал, работающий с интерфейсом, может потребовать определенных затрат на обучение.
Введение. Технология рендеринга 3D-анимации по сути представляет собой JavaScript API. Если использовать самые распространенные (вульгарные) и вульгарные (вульгарные) слова, то это: создайте шейдер, затем передайте данные в GPU, а затем GPU выведет анимацию по содержанию с обеих сторон.
шаг:
1. Инициализировать
2. Скомпилируйте шейдер
shader = gl.createShader(gl.VERTEX_SHADER);
shader = gl.createShader(gl.FRAGMENT_SHADER);
3. Передать входные данные в GPU
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, positionsData, gl.STATIC_DRAW);
4. Рисование
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
Безусловно, фронтенд предполагает широкий спектр знаний, и технологии реализации анимации не ограничиваются вышеперечисленными, и в будущем появятся еще новые технологии. Но всякий раз, когда появляется новая технология, мы все равно должны поддерживать способность мыслить независимо и наше собственное критическое мышление, и помнить, что нельзя слепо следовать тренду. В большинстве случаев, когда речь идет о интерфейсе, выбор стека технологий по-прежнему зависит от производительности и пользователей.
Цитировать:
1. История дизайна мероприятия Весеннего фестиваля Куайшоу
использованная литература
[1] дай мне.Али CDN.com/IMG extra/i1…:
[2] animate.style/:
link.juejin.cn?target=https%3A%2F%2Fanimate.style%2F
[3] Талант /user/233062…:
[4] codepen.io/:
link.juejin.cn?target=https%3A%2F%2Fcodepen.io%2F
[5] lottiefiles.com/:
link.juejin.cn?target=https%3A%2F%2Flottiefiles.com%2F
[6] woohoo.zcool.com.ca/article/Z Mt…:
link.juejin.cn?target=https%3A%2F%2Fwww.zcool.com.cn%2Farticle%2FZMTI1MzY5Mg%3D%3D.html