Первый выпуск «Еженедельника веб-анимации»: начало хорошего шоу

Запускается еженедельник веб-анимации! Собирайте самые свежие и лучшие веб-анимации и представляйте их всем в виде еженедельного отчета. Если вы хотите улучшить внешний интерфейс технологии анимации, дизайнер ищет вдохновения или просто хотите насладиться интересной веб-анимацией, вы не можете пропустить Web Animation Weekly!

Web Animation Weekly, один раз в неделю, выходит каждую пятницу. Давайте поговорим о веб-анимации и историях, стоящих за ней.

Еженедельник делит веб-анимацию на три широкие категории: анимация CSS, анимация SVG и анимация WebGL/Canvas. Все анимации будут отображаться по категориям, что удобно для целенаправленного изучения читателями.

1. «Похвалите» Мерта Цукурена.

Это чистая css анимация,<label>Фоновое изображение — звезды, поставив галочку<input type="radio".../>Проверялось ли это чеком?<label>Переключение фоновых изображений и смещение выражений.

2. «Онигири» Кэссиди Уильямс

Вам кажется, что цвет чаши очень фактурный, это не картинка. Автор в миске первый<div>Я набил изображение .jpg со всеми серыми пятнами в качестве фона, а затем установил его в качестве фона.radial-gradient, и, наконец, используйтеbackground-blend-modeСмешивание фонового изображения с фоновым градиентом дает эффект, который вы видите сейчас.

3. «Матричный цифровой дождь» Юань Чуань.

Несколько дней назад г-н Юань Чуань написал в Твиттере, прося всех указать любой атрибут CSS, и он использовал данный атрибут для создания анимации. Поэтому все начали усложнять. Свойства, которые я дал в то время, былиwriting-mode, этот используетwriting-modeСоздано анимационное произведение. Учитель Юаньчуань является автором библиотеки CSS-Doodle, которая хороша для создания различных генеративных рисунков, ежедневно активных в двадцать. (Сяобянь теперь является освобожденной суммой учителя Юань Чуань.)

4. «Воспроизведение/пауза анимации» от dev_loop

Симпатичная кнопка воспроизведения/паузы.

5. «Составная панель навигации» от создателей ключевых кадров

Очень интересный эффект двойного слоя. Стоит отметить, что автором ключевых кадров на самом деле является колонка веб-анимации, совместно организованная Шоу и Дэвидом. Они вдвоем каждую неделю анимируют прямую трансляцию на YouTube. Заинтересованные студенты могут перейти на YouTube для поиска.

6. «Эффекты прожигания изображения» Джейми Коултер

Первая реакция на эту анимацию: Мама, это так круто. Тогда посмотрите на код: боже мой, этот спецэффект на самом деле написан на css! Да, этот эффект сделан с помощьюmix-blend-modeЗавершенный. Однако эта анимация в настоящее время намного меньше 60 кадров в секунду на обычных компьютерах, что можно считать фатальным недостатком этой анимации.

1. Меню наклона Микаэля Айналема

Забавные иконки и тонкая анимация. Тем не менее, анимация использует многоclip-path, поэтому не совместим с IE и старым Edge. Я думаю об этой анимацииtransfrom: skewРазве это не реализуемо? Сам не пробовал, чтобы сделать выводы. Желающие могут попробовать сами.

2. Кнопка «Омлет» Криса Гэннона

На самом деле, это анимация, которая была завершена в 2017 году. Причина, по которой она до сих пор выпускается, заключается в том, что это анимация уровня учебника. Интересный креатив, деликатная деконструкция экшена, В нем есть все! Когда я впервые увидела эту анимацию, то заказала этот омлет раз 500. Стоит отметить, что в этой анимации используется подключаемый модуль bodymove Adobe After Effects, который сначала записывает анимацию в AE, затем экспортирует ее в файл JSON, а затем управляет воспроизведением анимации, прослушивая события. Что еще стоит упомянуть, так это то, что автор анимации Крис Гэннон является мастером анимации SVG, и его анимационные работы SVG чрезвычайно деликатны и креативны. (Редактор также является его младшим братом-фанатом.)

1. «Неоновая панель загрузки» от Masuwa

Это 3D-анимация WebGL с использованием three.js, но автор дал только 2D-перспективу. Неоновый эффект достигается с помощью постобработки UnrealBloomPass от three.js. Слияние Греха и Коса всегда так прекрасно. Но редактор думает, так как нужна только 2D перспектива, эта анимация должна быть достижима с помощью CSS, неоновый эффект может использовать box-shadow, свет можно регулировать непрозрачностью, а степень восстановления должна быть очень высокой. Вы можете попробовать.

2. «Ложная тень» Шона Кодеса

Это собственная анимация 2D Canvas без использования какой-либо библиотеки. Динамически генерируйте путь, слушая положение мыши, и заполняйте его цветом. Можно сказать, что это очень хардкорная анимация.

Этот выпуск Web Animation Weekly уже здесь. Если у вас есть какие-либо комментарии или предложения по еженедельному отчету, пожалуйста, оставьте сообщение ниже. Вы также можете внести свой вклад в еженедельную газету, добавив свою собственную анимацию.CodepenПросто отправьте ссылку в комментариях под еженедельной газетой. Web Animation Еженедельно, раз в неделю, выходит каждую пятницу, увидимся на следующей неделе!