Блог

Главная - Вопросы по программированию - Анимационная головоломка Sass: Сначала сделайте кольца толстыми, а затем утончайтесь по мере их расширения

Анимационная головоломка Sass: Сначала сделайте кольца толстыми, а затем утончайтесь по мере их расширения

#css #animation #sass

Вопрос:

Цель

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

  1. Взрыв (полуфабрикат)
    • Он должен расширяться за пределами экрана без полосы прокрутки.
    • Он должен начинаться с твердого расширяющегося большего внутреннего круга с небольшим отверстием в центре
    • Внешние кольца должны расширяться за пределы внутреннего круга
    • Кольца должны начать толстеть, а затем истончаться по мере расширения
  2. Втянись (Готово)
    • Это должно произойти очень быстро
    • Анимация должна «подпрыгивать»
  3. Цикл сердцебиения (Дела)
    • Пульс должен начинаться с середины и быстро расширяться наружу
    • Это сердцебиение, так что два удара, затем пауза.

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

Вот что у меня есть:

 body
    background-color: black
    margin: 0

/* Get it all in the center */
.container
    display: flex
    width: 100vw
    height: 100vh
    align-items: center
    justify-content: center
    vertical-align: 50%

/* Here's the animation for the first inner circle. It's outside of the loop because it doesn't follow the same pattern */
.donut
    display: inline-block
    position: fixed
    border-radius: 50%
    visibility: hidden
    transform: scale(50%)

@keyframes donut_1
        0%
            transform: scale(0%)
        0.01%
            transform: scale(4em)
        95%
            transform: scale(150%)
        100%
            transform: scale(40%)
            visibility: visible

.donut:nth-child(1)
    border: 2.75em solid #eee
    width: 1em
    height: 1em
    animation: donut_1 6.6s cubic-bezier(.23,.74,.74,1.2) 0.8s 1 forwards

/* Setting up the variables: */

/* b = border width */
/* s = size (width and height of the circle) */
/* d = amount of donuts */
/* ti = animation timing */
/* de = delay start */

$b: 2
$s: 7
$d: 24
$ti: 4
$de: 4.3
$c: 10

@for $i from 2 through $d
    @keyframes donut_#{$i}
        0%
            transform: scale(0%)
        .01%
            transform: scale(10%) 
            /* this is my effort to start animating from outside of the inner circle this doesn't seem to work... */
            border: #{$b * 2}em solid #eee
            /* my botched effort to start with fat rings */
        80%
            transform: scale(120%)
            visibility: visible
            border: #{$b}em solid #eee
            /* then to have them thin out as they expand */
        100%
            transform: scale(40%)
            visibility: visible

@for $i from 2 through $d
    .donut:nth-child(#{$i})
        animation: donut_#{$i} #{$ti}s cubic-bezier(.24,.79,.46,1.46) #{$de}s 1 forwards
        border: #{$b}em solid #eee
        width: #{$s}em
        height: #{$s}em
        $b: $b - 0.1
        $s: $s   5
        $de: $de - .18
        $ti: $ti   .2

And here’s the HTML — very simple! Thanks :nth-child!

 <body>
  <div class="container">
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
    <div class="donut"></div>
  </div>
</body>

So two big blockades.

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

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

По какой-то причине это не работает на codepen.io но вы можете увидеть рабочую версию по адресу atomu.me.

Я надеюсь, что кто-нибудь там сможет помочь брату!

Метки: ,