Можно ли выполнить эту последовательность в HTML5?

Я не буду давать какие-либо рекомендации по библиотекам по тем же причинам, на которые указывает @Diodeus, но, возможно, я могу помочь вам в процессе выбора. То, что вы пытаетесь сделать, прямо сейчас можно сделать в браузере несколькими способами: анимация Canvas, SVG и/или CSS3.

Приведенный выше пример представляет собой несколько векторных рисунков, составленных вместе с градиентом на центральном круговом таймере. Из-за этого я бы склонялся к использованию S V G, особенно если вы хотите разрешить взаимодействие с вашим компонентом (каждый элемент SVG может иметь обработчики событий).

Элемент canvas лучше подходит для попиксельного управления вашим визуальным контентом на странице. Добавление контента в canvas не увеличивает DOM (как в случае с SVG), поэтому обычно он работает лучше, но вы теряете такие вещи, как встроенные обработчики событий и анимацию, которые вам в конечном итоге придется заново реализовывать самостоятельно.

Подробнее о выборе между SVG и Canvas и пример анимации SVG< /а>

1. Масштабирование
2. Выцветание фона
3. Вращение
4. "Странный таймер круговой диаграммы градиента" пример с CSS3

Это можно сделать с помощью анимации CSS, анимации SVG или простого старого JavaScript. Выбор зависит от того, что вы будете анимировать. Если бы я выбирал библиотеку, я бы хотел найти ту, которая пытается использовать более новые методы (SVG/CSS3), когда это возможно, и изящно деградирует, когда не может.

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

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

Конечно, это не так уж и сложно, если разбить его на части.

Вот некоторые технологии и приемы, с которых можно начать.

Вы используете Canvas для (1) отображения некоторых рисунков, (2) стирания, (3) отображения некоторых новых рисунков.

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

Html Canvas использует context для рисования (думайте об этом как о ручке для холста)

• рисование пути: context.beginPath + context.moveTo + context.lineTo определяет путь, который создает полигоны ваших «лопастей вентилятора». Вы можете использовать context.fillStyle для заполнения полигонов вашими цветами.

• fading: context.globalAlpha изменит непрозрачность новых рисунков.

• вращение: context.translate(centerX,centerY) + context.rotate(radianAngle) будет поворачивать новые рисунки (например, ваши вращающиеся многоугольники, ваши деления и т. д.)

• масштабирование: context.translate(centerX,centerY) + context.scale(scaleX,scaleY) будет масштабировать ваши полигоны.

• дуги: context.arc(centerX,centerY,radius,beginningAngle,endingAngle) нарисует дугу с указанной центральной точкой и протянется от начального угла к конечному углу.

• math: circleCircumferenceX = centerX+radius*Math.cos(radianAngle) circleCircumferenceY = centerY+radius*Math.sin(radianAngle) использует тригонометрию для вычисления координаты xy на окружности окружности. Вы можете комбинировать этот триггер + Math.random, чтобы поместить свои «крапинки» по дуге вокруг вашей центральной точки.