Простая скелетная анимация на чистом CSS

CSS

1. Предпосылки

Однажды ко мне пришел дизайнер и сказал: "Нехорошо, чтобы эта карточка желаний тупо висела, добавьте эффект движения, просто качайте ее из стороны в сторону, это очень просто!", я подумала, ладно, улучшите видение пользователя, начало.

心愿牌

Десять минут спустя 🥶 Нет, эти качели фейковые, не похожие на эффект дуновения ветра в реальности.

Примечание. Скорость и размах анимации здесь увеличены.

.animate-1 {
    animation: swing1 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
@keyframes swing1 {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}

整体摆动

Спокойно подумайте 🤔, почему у этих качелей нет души. Итак, я взял рабочую карту и начал раскачиваться, чтобы посмотреть, как эффект качания выглядит в реальности.Наконец, я вдруг понял: исходная карта желаний (аналогичная рабочей карте) в действительности не качается целиком, когда на нее воздействуют, но он будет разделен на несколько частей в соответствии с положением узла для качания по отношению друг к другу.На самом деле это простая скелетная анимация! Итак, как этого достичь?

2 Скелетная анимация

Для реализации интерфейсной скелетной анимации см.«Краткий рассказ о принципах скелетной анимации и интерфейсной реализации», в котором кратко упоминаются две реализации css и canvas. В качестве примера возьмем анимацию качания карты желаний и изучим, как использовать css для ее достижения.

2.1 Разделительные элементы

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

元素拆分

2.2 Соединительные элементы

<div>
    <!--元素1-->
    <div class="item-1"></div>
    <!--元素2-->
    <div class="item-2"></div>
    <!--元素3-->
    <div class="item-3"></div>
</div>

Здесь это кажется простым, но если вы не понимаете скелетную анимацию, вы попадете в яму, а приведенное выше — неверная демонстрация. Для того, чтобы углубить всеобщее понимание, специально была вырыта яма 😆.

2.3 Добавить анимацию

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

<div class="animate-2">
    <!--元素1-->
    <div class="item-1"></div>
    <!--元素2-->
    <div class="item-2"></div>
    <!--元素3-->
    <div class="item-3"></div>
</div>

.animate-2 .item-1 {
    /* 设置margin是为了定位，使其部分重叠在一起 */
    margin-bottom: -8px;
    margin-left: 18px;
    position: relative;
    z-index: 1;
    animation: swing2-1 1s ease-in-out infinite;
    transform: rotate(-3deg);
    transform-origin: top center;
}
.animate-2 .item-2 {
    animation: swing2-2 1s ease-in-out infinite;
    transform: rotate(5deg);
    transform-origin: top center;
}
.animate-2 .item-3 {
    margin-top: -5px;
    margin-left: 17.5px;
    position: relative;
    animation: swing2-3 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
@keyframes swing2-1 {
    0% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg);}
    100% { transform: rotate(-3deg);}
}
@keyframes swing2-2 {
    0% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg);}
    100% { transform: rotate(5deg);}
}
@keyframes swing2-3 {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}

Вы закончили 😼? Давайте посмотрим на эффект:

分开摆动

Боже мой😮, что это такое! ! ! Кажется, что замах более реалистичен, чем замах в целом, с разными элементами, имеющими разную амплитуду и направление замаха. Но это неправильно.

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

2.4 Заполнение дыры — реализовать скелетную анимацию из js, чтобы понять ее принцип

Вот еще один рекомендуемый учебный материал:серия "кодирование-математика" - создавайте забавные анимации с помощью математических знаний и холста,вэтот эпизодОбъясняет принцип скелетной анимации, соответствующий исходный код находится вздесь, потому что на YouTube, чтобы некоторые учащиеся не могли видеть Интернет с научной точки зрения, в качестве примера для объяснения процесса реализации js возьмем следующее запущенное действие:

  1. По начальному состоянию бедра и текущей скорости вращения вычислить положение бедра в следующем кадре;
  2. Рассчитать положение теленка в следующем кадре в соответствии с текущим положением бедра и текущей скоростью теленка;
  3. ...Бесконечная петля...

coding-math

Отсюда видно, что положение голени зависит от положения бедра, что не вызовет вышеуказанного вывиха. Грубо говоря, характеристики скелетной анимации таковы:

Ключевой элемент перемещается вместе со своими подэлементами, а подэлементы перемещаются сами по себе на этой основе.

Тогда в реализации js связь реализуется путем вычисления сначала положения бедра, а затем вычисления положения голени из положения бедра, и как это реализовать в css?

2.5 Реализация на чистом CSS

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

<div class="animate-3">
    <!--运动模块1-->
    <div class="s-1">
        <div class="item-1"></div>
        <!--运动模块2-->
        <div class="s-2">
            <div class="item-2"></div>
            <!--运动模块3-->
            <div class="s-3">
                <div class="item-3"></div>
            </div>
        </div>
    </div>
</div>

.animate-3 .s-1 {
    animation: swing3-1 1s ease-in-out infinite;
    transform: rotate(-3deg);
    transform-origin: top center;
}
.animate-3 .s-2 {
    animation: swing3-2 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
.animate-3 .s-3 {
    animation: swing3-3 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
@keyframes swing3-1 {
    0% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg);}
    100% { transform: rotate(-3deg);}
}
@keyframes swing3-2 {
    0% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg);}
    100% { transform: rotate(5deg);}
}
@keyframes swing3-3 {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}

骨骼动画摆动

В этот раз наконец-то получилось 👍. Здесь три элемента, и то же самое верно для большего количества элементов, которые могут быть вложены непрерывно.

3. Финальная демонстрация движения

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

.animate-4 .s-1 {
    animation: swing4-1 5s ease-in-out infinite;
    transform: rotate(-2deg);
    transform-origin: top center;
}
.animate-4 .s-2 {
    animation: swing4-2 8s ease-in-out infinite;
    transform: rotate3d(0, 1, 0, 20deg);
    transform-origin: top center;
}
.animate-4 .s-3 {
    animation: swing4-3 8s ease-in-out infinite;
    transform: rotate(3deg);
    transform-origin: top center;
}
@keyframes swing4-1 {
    0% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg);}
    100% { transform: rotate(-2deg);}
}
@keyframes swing4-2 {
    0% { transform: rotate3d(0, 1, 0, 20deg); }
    50% { transform: rotate3d(0, 1, 0, -20deg);}
    100% { transform: rotate3d(0, 1, 0, 20deg);}
}
@keyframes swing4-3 {
    0% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg);}
    100% { transform: rotate(3deg);}
}

骨骼动画-调整后

4. End

Чистый CSS позволяет использовать скелетную анимацию, но только для простых сцен. В сложных сценах, таких как скелетная анимация во фронтенд-играх, задействовано много узлов.Хотя это можно реализовать с помощью CSS, эффективность невысока, поэтому у сообщества есть много информации о скелетной анимации, которую можно напрямую экспортировать из инструменты проектирования, а затем использовали js. Загрузите работающую программу, если вам интересно, вы можете найти ее в Google.

В этой статье в основном используется простой случай, чтобы углубить понимание каждым принципа скелетной анимации.Что касается того, все ли используют CSS или JS для ее достижения, это вопрос «убить ли курицу или не использовать нож».

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

Категории