Как использовать CSS \cubic-bezier для реализации функции синуса?

Я собираюсь реализовать анимацию ширины CSS в синусоидальной функции, например:

Но с cubic-bezier я могу установить только четыре параметра, таких как transition: all 500ms cubic-bezier(0.695, 0.015, 1.000, 0.275);.

Можно ли добиться этого с помощью анимации CSS? Или еще как это сделать в JS?


javascript css css-animations
person Ovilia    schedule 11.08.2014    source источник
comment
cubic-bezier нельзя анимировать. Посмотрите humblesoftware.com/demos/trig для решения javascript.   -  person Morpheus    schedule 11.08.2014

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете имитировать функцию синуса, используя cubic-bezier()

Взгляните на этот ресурс для аппроксимации синуса: Аппроксимация синуса с использованием кубических кривых Безье

Используя 4 ключевых кадра и cubic-bezier() со значениями:

cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)
cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)

будет перемещать объект по траектории синусоидальной функции.

Я сделал демонстрацию для вашего случая. Чистое решение CSS, пожалуйста, посмотрите:

ДЕМО

.box {
    width: 20px;
    height: 20px;
    background-color: royalblue;

    animation-fill-mode: forwards;
    animation:
            sine1-1 0.3s 1 0s cubic-bezier(0,0,0.3642,1),
            sine1-2 0.3s 1 0.3s cubic-bezier(0.6358,0,1,1),
            sine1-3 0.3s 1 0.6s cubic-bezier(0,0,0.3642,1),
            sine1-4 0.3s 1 0.9s cubic-bezier(0.6358,0,1,1),
            sine2-1 0.3s 1 1.2s cubic-bezier(0,0,0.3642,1),
            sine2-2 0.3s 1 1.5s cubic-bezier(0.6358,0,1,1),
            sine2-3 0.3s 1 1.8s cubic-bezier(0,0,0.3642,1),
            sine2-4 0.3s 1 2.1s cubic-bezier(0.6358,0,1,1),
            sine3-1 0.3s 1 2.4s cubic-bezier(0,0,0.3642,1),
            sine3-2 0.3s 1 2.7s cubic-bezier(0.6358,0,1,1);
}

@keyframes sine1-1 {
    0% {transform: translateY(0)}
    100% {transform: translateY(-100px)}
}

@keyframes sine1-2 {
    0% {transform: translateY(-100px)}
    100% {transform: translateY(0)}
}

@keyframes sine1-3 {
    0% {transform: translateY(0)}
    100% {transform: translateY(80px)}
}

@keyframes sine1-4 {
    0% {transform: translateY(80px)}
    100% {transform: translateY(0)}
}

@keyframes sine2-1 {
    0% {transform: translateY(0)}
    100% {transform: translateY(-60px)}
}

@keyframes sine2-2 {
    0% {transform: translateY(-60px)}
    100% {transform: translateY(0)}
}

@keyframes sine2-3 {
    0% {transform: translateY(0)}
    100% {transform: translateY(40px)}
}

@keyframes sine2-4 {
    0% {transform: translateY(40px)}
    100% {transform: translateY(0)}
}

@keyframes sine3-1 {
    0% {transform: translateY(0)}
    100% {transform: translateY(-20px)}
}

@keyframes sine3-2 {
    0% {transform: translateY(-20px)}
    100% {transform: translateY(0)}
}

.horizontal {
    animation: move-horizontal 3s 1 linear;
}

@keyframes move-horizontal {
    0% {transform: translateX(0)}
    100% {transform: translateX(400px)}
}

.wrap {
    background-color: #bfbfbf;
}

.margin {
    width: 100px;
    height: 100px;
}
<div class="margin"></div>
<div class="wrap">
    <div class="horizontal">
        <div class="box"></div>
    </div>
</div>

person Yerke    schedule 22.07.2020