Реализовать динамический эффект передней пружины

Эффект пружинящего движения — это собственный эффект системы IOS.Например, эффект отображения большего изображения на iPhone представляет собой анимацию пружины, как показано на следующем рисунке:

У него есть процесс подпрыгивания, один большой и один маленький масштаб попеременно, как подпрыгивает пружина, а не простое линейное увеличение в прошлом.

Если вы используете функцию времени анимации CSS, вы меняете только скорость движения, а не направление движения.

И вручную напишите CSS, чтобы имитировать этот эффект увеличения, а затем уменьшения:

@keyframes spring-show {
    0% {
        transform: scale(0);
    }
    90% {
        transform: scale(1);
    }
    /* 先放大一点 */
    95% {
        transform: scale(1.1);
    }
    /* 然后再缩回去 */
    100% {
        transform: scale(1);
    }
}

Такого упругого движения нет.

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

Так как считать? пустыня в "Как реализовать эффект весенней анимации в CSS" также подробно обсудил этот эффект и написал функцию SASS для его достижения, но CSS, сгенерированный таким образом, как правило, относительно велик, поэтому я переключился на реализацию JS, принцип заключается в том, чтобы вычислить анимацию ключевых кадров CSS в 1% , 2%, 3%, ..., 100%, каким должно быть значение атрибута, а затем динамически вставить тег стиля. Заимствовано здесьcss springБиблиотека, которая занимает всего 3 КБ после gzip, используется следующим образом:

import spring, { toString } from 'css-spring';
const keyframes = spring(
    { scale: 0 }, // from
    { scale: 1 }, // to
    // precision表示精度有2位
    { damping: 14, stiffness: 170, precision: 2}
);
const keyframeString = toString(keyframes);
console.log(keyframeString);

Сгенерированный CSS выглядит так, как показано на рисунке ниже:

У него будет процесс изменения размера: 0 -> 1 -> 1,1 -> 0,99 -> 1. Интуитивнее изобразить эти значения в виде графика:

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

В дополнение к увеличению и уменьшению масштаба, его также можно обрабатывать таким образом, и его также можно применять к вращению.Эффект показан на следующем рисунке:

Это генерируется с помощью следующего кода:

const keyframes = spring(
    { rotateZ: 30 }, // from
    { rotateZ: 0 }, // to
    { damping: 14, stiffness: 170, precision: 3}
);

Когда нам нужно использовать анимацию-задержку, чтобы 3 звезды появлялись одна за другой, нам нужно скрыть видимость: сначала скрыто, а затем снова появиться.В это время нам нужно добавить атрибут видимости к ключевым кадрам, как показано на следующий код:

let from = {rotateZ: '30', visibility: 'hidden' },
    to = {rotateZ: '0', visibility: 'visible' };
if (from.visibility) {
    keyframes['0%'].visibility = from.visibility;
    keyframes['1%'].visibility = to.visibility;
    // 最后结束animate-fill-mode: forwards使用
    keyframes['100%'].visibility = to.visibility;
}

Наконец, сгенерируйте ключевые кадры:

@keyframes spring-rotate {
    0% {transform:rotateZ(29.1deg);visibility:hidden;}
    1% {transform:rotateZ(27.507deg);visibility:visible;}
    /* ... */
    100% {transform:rotateZ(0deg);visibility:visible;}
}

Затем пусть анимация-задержка каждой звезды увеличивается по очереди:

.star {
    visibility: hidden;
    animation: spring-rotate .59s linear forwards;
}
.star:nth-of-type(2) {
    animation-delay: .15s;
}
.star:nth-of-type(3) {
    animation-delay: .3s;
}

Таким образом можно добиться эффекта, который появляется один за другим, как показано на следующем рисунке:

Этот пружинящий эффект усиливает ощущение движения и выглядит более динамично, чем обычный односторонний эффект.

В реальной реализации я написал утилиту, которая генерирует ключевые кадры при инициализации страницы, а затем вставляет тег стиля в заголовок. Потому что, если вы добавите префикс webkit, один ключевой кадр будет иметь 4 КБ, а 10 ключевых кадров будут иметь 40 КБ, Непосредственное использование метода динамического расчета JS сэкономит место и будет более гибким.

【Другие статьи】Реализация WebRTC P2P-соединений