Еженедельная фронтенд-анимация № 3: анимация, похожая на твиттер

внешний интерфейс

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

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

исходный анимационный эффект

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

Анализ реализации

мы должны помнить«Одна из еженедельных анимаций внешнего интерфейса: реализация анимации отображения командой браузера UC»Временные функции упоминаются вanimation-timing-function, в его свойствах есть ступенчатая функция steps(), которую мы можем использовать. Используйте изображение спрайта, содержащее набор эффектов градиента (как показано ниже), установите соответствующее количество шагов, пока мы перемещаем изображение, прыгая по горизонтальной оси, мы можем добиться нашего эффекта.

Код

Используйте один из специальных спрайтов, упомянутых выше, в качестве фона.

.HeartAnimation {
    background-image: url(web_heart_animation_edge.png);
    background-position: left;
}

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

.like-active {
    animation-timing-function: steps(28);
    animation-name: heart-burst;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    display: inline-block
}
@keyframes heart-burst {
    0% {
        background-position: left
    }

    100% {
        background-position: right
    }
}

Показать результаты

Интерпретация ключевых моментов

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

Код был загружен на github, и вопросы приветствуются.

Последняя практика, вставкамой блог, добро пожаловать, чтобы следовать

Категории