Можно ли указать пользовательские функции синхронизации для CSS-переходов? - PullRequest
Новая
       60

Можно ли указать пользовательские функции синхронизации для CSS-переходов?

9 голосов
/ 01 июня 2011

Я использую CSS-переходы довольно часто, но нахожу ограничивающим доступ только к упрощениям, замедлениям и т. Д. Опция «кривая Безье», по-видимому, обеспечивает максимальный контроль, но даже это не позволяет указывать фактическиеуравнение замедления, которое имитирует упругое ослабление и т. д. Есть ли другой вариант или нужно прибегнуть к JavaScript для выполнения этого типа анимации?

Ответы [ 4 ]

12 голосов
/ 01 июня 2011

Вы можете использовать Цезарь для генерации CSS для различных уравнений.

2 голосов
/ 16 мая 2012

На самом деле вам не нужна библиотека JavaScript для поддержки сложных функций замедления, таких как bounce-ease-in или эластичное облегчение.Вот инструмент CSS3 Animation Generator, который генерирует ключевые кадры для вас и включает 12 дополнительных функций замедления, не поддерживаемых спецификацией w3c:

http://www.css3animationgenerator.com/

2 голосов
/ 23 июня 2011

Я обнаружил, что нет способа сделать эластичный переход с чистым CSS. Однако вы можете обмануть и сделать CSS-анимацию. Вот что Apple использует на своем сайте: 

@-webkit-keyframes open-1 {
    from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
    25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
    30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
    35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
    45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
    50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
    60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
    65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
    75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
    80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}

Эти анимации в значительной степени используются на собственном веб-сайте Apple: http://www.apple.com/mac/

Очевидно, что это в некоторой степени мощно - поскольку анимации выражены в процентах, вы можете легко изменить его длительность и сохранить эффект.

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

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

0 голосов
/ 01 июня 2011

я знаю, что если вы используете mootools, вы можете написать собственное уравнение:

http://mootools.net/docs/core/Fx/Fx.Transitions

Класс: Fx.Transition

Этот класс полезен только для гениев-математиков, которые хотят написать свои собственные уравнения замедления.Возвращает функцию перехода Fx с методами 'easeIn', 'easeOut' и 'easeInOut'.

Возможно, другие библиотеки, такие как jquery или prototype, имеют такой же класс, возможно, они имеют что-то похожее.

Удачи!

...