Как реализовать замедление easeOutBack в анимации css transform - PullRequest
Новая
       33

Как реализовать замедление easeOutBack в анимации css transform

4 голосов
/ 18 апреля 2011

Я работаю с анимацией CSS. Но я обнаружил, что CSS-переход поддерживает только функцию замедления.

легкость | линейный | легкость в | облегчение | легкость в выходе | кубических Безье ()

Я хочу использовать что-то вроде easyOutBack, замедление анимации с помощью чистого CSS. Я думаю сделать это с помощью анимации webkit. Но только сафари поддерживают это.

Движение EasyOutBack - это движение где объект будет выходить за пределы границы и обратно. Подробнее о другой функции движения. Вы можете увидеть эту ссылку ниже.

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

У кого-нибудь есть предложения о том, как реализовать замедление easeOutBack в анимации преобразования css?

Ответы [ 3 ]

8 голосов
/ 20 мая 2011

Вы можете указать собственную кривую с помощью свойства -webkit-animation-timing-function CSS.

Формат функции: cubic-bezier(P1x, P1y, P2x, P2y), где P1 и P2 - две средние точки кубической кривой Безье от (0,0) до (1,1). В вашем случае вы хотите что-то похожее -

EaseOutBack http://i56.tinypic.com/adg8yo.png

Таким образом, точки, которые вы бы указали на этой кривой, - (0,0) и (0.2,1). Это делает кривую - cubic-bezier(0,0,0.2,1).

Увы, спецификация кубической кривой webkit не позволяет анимации превышать границы 1,1 куба. Таким образом, чтобы фактически анимировать кривую, как вам нужно, вам нужно добавить дополнительный ключевой кадр, который определяет «переполнение». 

@-webkit-keyframes snapback {
    0% {
        -webkit-transform:translateX(0px);
    }
    60% {
        -webkit-transform:translateX(140px);
    }
    100% {
        -webkit-transform:translateX(100px);
    }
}

Взгляните на пример, который я бросил вместе - http://jsfiddle.net/Heqs8/

1 голос
/ 16 мая 2012

Другой альтернативой является Генератор анимации CSS3 , который позволяет использовать 12 функций замедления, не поддерживаемых спецификациями W3C, включая обратное замедление. Вместо использования кубических кривых, которые имеют ряд ограничений, генератор анимации CSS3 использует вычисленные ключевые кадры.

1 голос
/ 18 апреля 2011

Похоже, что следующий код добавит анимацию easeOutBack в jQuery, и тогда вы сможете использовать ее. 

jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
});

Найдено из http://jsfiddle.net/marcofucci/rRtAq/, в котором упоминается http://gsgd.co.uk/sandbox/jquery/easing/.

...