Интерфейсная анимация испорчена

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

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

童年.png

анимация это детство

Анимация относится к работе, в которой множество кадров неподвижных изображений воспроизводятся непрерывно с определенной скоростью (например, 16 изображений в секунду), и невооруженный глаз создает иллюзию из-за визуальных остаточных изображений и ошибочно думает, что изображения движутся. -- Википедия

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

超人大战赛亚人.avi

несколько основных понятий

Кратко представлены несколько основных концепций анимации:

Рамка: В процессе анимации каждое неподвижное изображение представляет собой «кадр»;частота кадров: количество неподвижных изображений, воспроизводимых в секунду, в кадрах в секунду (кадр в секунду) или в герцах (Гц);продолжительность кадра: время выдержки каждого неподвижного изображения, единица измерения обычно составляет мс (миллисекунды);выпадающая рамка: в анимации с фиксированной частотой кадров продолжительность определенного кадра намного превышает среднюю продолжительность кадра, что приводит к тому, что последующие кадры сжимаются и теряются;

Анимацию мы видим на дисплее, каждое изменение кадра отрисовывается системой (GPU или CPU). Его максимальная скорость прорисовки ограничена частотой обновления монитора (а не видеокарты, большинство из которых имеют частоту 60 Гц или 75 Гц).

Чем выше частота кадров, тем меньше мерцание картинки на экране и выше стабильность. Человеческому глазу нелегко обнаружить мерцание, вызванное частотой обновления выше 75 Гц.

Метод реализации

Обычно мы реализуем несколько основных реализаций анимационных эффектов в передней части следующим образом:

  • JavaScript: изменяйте стили элементов через определенные промежутки времени с помощью таймеров (setTimeout и setIterval) или используйте requestAnimationFrame;
  • CSS3: переход и анимация;
  • HTML5: используйте методы рисования, предоставляемые HTML5 (холст, svg, webgl);

Animations.png

requestAnimationFrame

requestAnimationFrameЭто интерфейс, используемый браузерами для операций с временным циклом, аналогичныйsetTimeout, основное использованиеПерерисовывать веб-страницу кадр за кадром.

Целью настройки этого API являетсяЧтобы различные эффекты анимации веб-страницы (анимация DOM, анимация Canvas, анимация SVG, анимация WebGL) имели единый механизм обновления, тем самым экономя системные ресурсы, повышая производительность системы и улучшая визуальные эффекты.. Использование этого API в коде должно сообщить браузеру, что он хочет выполнить анимацию, и позволить браузеру запланировать перерисовку страницы в следующем кадре анимации.

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

<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;"></div>

<script>
var demo = document.getElementById('demo');
function render(){
    demo.style.left = parseInt(demo.style.left) + 1 + 'px'; //每一帧向右移动1px
}
requestAnimationFrame(function(){
    render();
    //当超过300px后才停止
    if(parseInt(demo.style.left) <= 300) requestAnimationFrame(arguments.callee);
});
</script>

Метод cancelAnimationFrame используется для отмены перерисовки:

var requestID = requestAnimationFrame(repeatOften);
cancelAnimationFrame(requestID);

использоватьrequestAnimationFrameПреимущества API заключаются в следующем:

  • Все операции DOM в каждом кадре будут объединены и завершены за одну перерисовку или перекомпоновку, а временной интервал перерисовки или перекомпоновки близко соответствует частоте обновления дисплея (60 Гц или 75 Гц);
  • В скрытых или невидимых элементах не будет перерисовки или перекомпоновки, что, конечно, означает меньшее использование процессора, графического процессора и памяти;

В настоящее время все основные браузеры (Firefox 23/IE 10/Chrome/Safari) поддерживают этот метод. Вы можете использовать следующий метод, чтобы проверить, поддерживает ли браузер этот API. Если он не поддерживается, смоделируйте развертывание метода самостоятельно.

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.oRequestAnimationFrame || 
          window.msRequestAnimationFrame || 
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

Итак, так сказать,requestAnimationFrameЭто версия с оптимизированной производительностью, предназначенная для анимации.setTimeout, разницаrequestAnimationFrameВместо того, чтобы указывать время запуска функции обратного вызова, она выполняет обратный вызов в соответствии со встроенной в браузер частотой обновления, что, конечно, позволяет достичь наилучшего эффекта анимации, которого может достичь браузер.

ДЕМО Портал

Transition

Свойство перехода в CSS позволяет плавно изменять свойства блочных элементов в течение заданного времени.Просто взгляните на его синтаксические правила:

transition: property duration timing-function delay;

Конкретные значения атрибутов описываются следующим образом:

стоимость описывать
transition-property Задает имя свойства CSS, задающего эффект перехода. (нет/все/свойство)
transition-duration Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода.
transition-timing-function Определяет кривую скорости для эффекта скорости. (линейный, легкий, легкий вход, легкий выход, легкий вход, кубический Безье (n, n, n, n))
transition-delay Определяет, когда начинается эффект перехода.

ДЕМО Портал

Animation

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

грамматика

animation: name duration timing-function delay iteration-count direction;

Конкретные значения атрибутов описываются следующим образом:

стоимость описывать
animation-name Задает имя ключевого кадра, которое необходимо привязать к селектору. Имя ключевого кадра, НЕТ
animation-duration Задает время в секундах или миллисекундах для завершения анимации.
animation-timing-function Определяет кривую скорости для анимации. (линейный, легкий, легкий вход, легкий выход, легкий вход, кубический Безье (n, n, n, n))
animation-delay Определяет задержку перед запуском анимации.
animation-iteration-count Указывает, сколько раз должна воспроизводиться анимация.
animation-direction Указывает, должна ли анимация по очереди воспроизводиться в обратном порядке. (обычный, альтернативный)

ДЕМО Портал

Canvas

<canvas>Это новый элемент в HTML5, который используется в качестве контейнера для рисования графики на странице и может использоваться для рисования графики с помощью скриптов в JavaScript. Например, его можно использовать для рисования графики, создания фотографий, создания анимации и даже для обработки или рендеринга видео в реальном времени.Canvas имеет следующие характеристики:

  • Зависит от разрешения, на основе растрового изображения;
  • Обработчики событий не поддерживаются;
  • Слабые возможности рендеринга текста;
  • Возможность сохранения полученного изображения в формате .png или .jpg;
  • Лучше всего подходит для игр с интенсивным использованием графики, где многие объекты часто перерисовываются;

Большинство API-интерфейсов рисования Canvas не определены в самом элементе, а определяются через холст.getContext()метод на полученном объекте «среда рисования».Canvas APIТакже используется обозначение пути. Однако вместо того, чтобы описываться как строки букв и цифр, пути определяются серией вызовов методов, таких как вызовbeginPath()а такжеarc()метод. Как только путь определен, другие методы, такие какfill(), все работают на этом пути.

ДЕМО Портал

SVG

SVG — это сокращение от Scalable Vector Graphics на английском языке, что означает «Масштабируемая векторная графика». Он используется для определения векторной графики для Интернета. Он использует формат XML для определения изображений и имеет следующие характеристики:

  • Независимый от разрешения, векторный;
  • Поддержка обработчика событий;
  • Лучше всего подходит для приложений с большими областями рендеринга (таких как Google Maps);
  • Высокая сложность замедляет рендеринг (любое приложение, чрезмерно использующее DOM, не работает быстро);
  • Не подходит для игровых приложений;

Давайте рассмотрим простой пример рисования круга в SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

Код SVG начинается с<svg>Элемент начинается, включая открывающие метки<svg>и закрытие вкладки</svg>. Это корневой элемент.widthа такжеheightсвойства, чтобы установить ширину и высоту этого документа SVG.versionатрибут для определения используемой версии SVG,xmlnsАтрибуты определяют пространство имен SVG.

SVG<circle>Используется для создания круга.cxа такжеcyСвойства определяют координаты x и y центра круга. Если эти два свойства опущены, точка будет установлена ​​на (0, 0).rСвойство определяет радиус окружности.

Далее в основном представлены несколько элементов, используемых для анимации в SVG, а именно:

: обычно размещается в элементе изображения SVG, чтобы определить процесс изменения анимации атрибута элемента изображения;: элемент также помещается в элемент изображения, который может ссылаться на предопределенный путь анимации, так что элемент изображения перемещается способом, определенным путем;: Элемент имеет больший контроль над движением и трансформацией графики, он может задавать трансформацию, масштабирование, поворот и искажение графики и т.д.;: Использование элемента появилось в приведенном выше примере, это вспомогательный элемент, через который,<animateMotion>и т. д. элементы могут ссылаться на внешне определенный<path>. сделать элемент изображения нажмите это<path>движение по траектории;

ДЕМО Портал

WebGL

WebGL позволяет веб-страницам поддерживать HTML<canvas>В браузере тега не нужно устанавливать никаких плагинов, можно использоватьOpenGL ESAPI 2.0 выполняет 3D-рендеринг на холсте. Программа WebGL состоит из кода управления JavaScript и кода специальных эффектов (код шейдера, код рендеринга), выполняемых графическим процессором компьютера (GPU).

WebGL.png

WebGL — это, по сути, API, основанный на растеризации, а не на основе 3D. WebGL заботятся только о двух вещах: координатах матрицы проекции и цветах матрицы проекции. Задача использования программы WebGL заключается в реализации объекта WebGL с координатами и цветами проекционной матрицы. Вы можете использовать «шейдеры» для выполнения вышеуказанных задач. Вершинный шейдер может предоставлять координаты матрицы проекции, а фрагментный шейдер — цвет матрицы проекции.

Поскольку система WebGL относительно велика и не может быть описана в двух словах, ниже представлены только различные порталы (не говорите, что я ленив!!):Справочник по WebGL WebGL API

Несколько часто используемых анимационных библиотек

Ani.js — библиотека обработки жизни на основе CSS-анимации. Dynamics.js — js-библиотека для создания анимации с эффектами физического движения. Animate.css — полная библиотека анимации CSS3. Three.js — библиотека классов, которая позволяет пользователям создавать проекты webgl с помощью javascript.

Категории