| Kosten | Среда, 12 Февраля 2020 | Сообщение 1 |
| Как известно, что HTML5, это новейший стандарт HTML, который содержит множество новых элементов и атрибутов, где также улучшают семантику, возможности подключения, производительность, доступ к устройствам, 2D и 3D графику, анимацию и стилизацию в интернете.
С HTML5 анимация теперь может быть запрограммирована в браузере. После этого зрители могут наслаждаться всевозможными анимациями на основе HTML5, CSS3 и JavaScript. Помимо таких элементов, как теги video и audio, HTML5 также предлагает элемент canvas, который позволяет создавать игры и создавать привлекательные анимации.
Прежде чем показать вам, как создавать анимацию с помощью элемента HTML5 canvas, мы объясним, как две сопутствующие технологии - CSS3 и JavaScript - делают возможной анимацию в браузере, вместе с примерами.
CSS3 анимации
CSS3 поставляется с transformation и animation свойствами. Свойство transformation сообщает браузеру, чтобы вычислить промежуточные кадры между двумя состояниями. Всего существует восемь свойств анимации, а именно:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Для воспроизведения анимации укажите animation-duration свойство.
Кроме того, CSS3 поставляется с keyframes основой CSS анимации, где keyframes и animation идет рука об руку с keyframes определением того, как анимация выглядит на каждом этапе своей временной шкалы.
Проверьте этот пример:
Код div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: SkrrrPaPaPum;
animation-name: SkrrrPapaPum;
}
Здесь имя анимации, как указано animation-name, где есть SkrrrPapaPum, что также определяем, как выглядит анимация keyframes.
Например:
Код @keyframes SkrrrPapaPum {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
Не стесняйтесь определить свой собственный стиль анимации, указав все свойства, подходящие для области keyframesдействия.
Ниже приведены велеколепные примеры анимации с помощью CSS3.
Капли дождя, это градиентные формы капель, которые анимируются так, чтобы попадать в определенные промежутки времени, где войство keyframes определяет направления.
See the Pen
CSS дождь by Kocsten (@kocsten)
on CodePen.
Квадрат выполнен с возможностью поворота на 360 градусов, а продолжительность анимации составляет 10 секунд.
Анимированная солнечная система
See the Pen
An animated solar system by Kocsten (@kocsten)
on CodePen.
Теперь взглянем на некоторые примеры суперхолодной анимации HTML5 Canvas.
Водопад
See the Pen
Canvas Waterfall by Kocsten (@kocsten)
on CodePen.
Обратите внимание на JavaScript в приведенном выше CodePen. В игре много вычислений: от проверки наличия элемента canvas до получения контекста 2D-анимации и определения логики перехода частиц водопада к использованию браузера requestAnimationFrame и cancelAnimationFrameAPI.
Этот requestAnimationFrame метод предоставляет вам более плавный и эффективный способ построения анимации, вызывая кадр анимации, когда система готова его нарисовать. Количество обратных вызовов обычно составляет 60 раз в секунду и может быть уменьшено при работе в фоновых вкладках.
| | Страна: (RU) |
| |
