Можно ли использовать режим заполнения между кадрами? - PullRequest
Новая
       7

Можно ли использовать режим заполнения между кадрами?

0 голосов
/ 22 ноября 2018

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

Следующий код пытается заставить объект вращаться, изменить его цвет на 50% анимации идержите его до 100%, проблема, которую я получил, состоит в том, что, когда он изменяется с 50% до 100%, он не сохраняет предыдущий ключевой кадр (50%), он снова становится прозрачным при 100%.

I 'Мы работали с некоторыми анимационными программами, такими как blender или animate cc, и поведение по умолчанию - сохранять значения свойств, заданных в последнем ключевом кадре, если вы активно не изменяете его на что-то другое.

Я знаю, что могу установить фонСвойство снова на красный на 100%.но для реальной сложной анимации, которая означала бы повторение МНОЖЕСТВА значений, я также осведомлен о свойстве animation-fill-mode, которое сохраняет конечное состояние анимации, если оно установлено в «forward», поэтому я решил, чтоесли бы я делал это на каждом шаге, он вел бы себя так, как мне хотелось бы, но он не работал: (

Есть ли хороший обходной путь для этой проблемы без необходимости повторять каждое свойство в каждом кадре? Могу ли я изменить значение по умолчанию?поведение?

Примечание: я думал, что если свойство не установлено для каждого кадра, оно по умолчанию будет иметь начальное значение (кадр 0%), однако я не установил никакого свойства transform: rotate на 50% и значение по умолчанию не равно 0%, поскольку оно интерполирует значение между 0% и 100%, поэтому я понятия не имею, как это на самом деле работает: /, некоторые пояснения о том, почему это происходит, были бы действительно оценены 

    .test{
        all: unset;
        animation-name: rotate_and_change_color;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-direction: normal;
    }



    @keyframes rotate_and_change_color{
        0%{transform: rotate(0deg);
            animation-fill-mode: forwards;  
        }
        50%{
            background: red;
            animation-fill-mode: forwards;  
        }
        100%{transform: rotate(360deg);
            animation-fill-mode: forwards;  
        }
    }

1 Ответ

0 голосов
/ 22 ноября 2018

Один из способов - рассмотреть несколько анимаций, в которых вы можете легко контролировать каждое свойство: 

.test {
  animation-name: rotate, change_color;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-direction: normal;
  
  width:200px;
  height:200px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes change_color {
  50%,
  100% {
    background: red;
  }
}
<div class="test">
</div>

Относительно вашей заметки это относится только к последнему и первому состоянию, где, если вы не укажете какое-либо значение, вычисленное значение будет рассматриваться (начальное илиопределенный в стиле элемента)

Если ключевой кадр 0% или не указан, то пользовательский агент создает ключевой кадр 0%, используя вычисленные значения анимируемых свойств.Если ключевой кадр 100% или to не указан, то пользовательский агент создает ключевой кадр 100%, используя вычисленные значения анимируемых свойств. ref

Для других состояний у вас фактически есть интерполяция с учетом значения, которое вы определили, и значения, выполненного автоматически (в случае, если вы не определили 0% и 100%)

...