В поисках «легкого» раскачивания, которое можно выразить как с помощью jQuery, так и CSS3 - PullRequest
Новая
       13

В поисках «легкого» раскачивания, которое можно выразить как с помощью jQuery, так и CSS3

8 голосов
/ 12 февраля 2012

Я должен выполнить две анимации на объекте одновременно.
По ряду причин я хочу использовать jQuery для вертикальной анимации и CSS3 для горизонтальной.

На стороне jQuery swing замедление работает отлично:

jquery swing

swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}

Я ищу способ выразить эту функцию замедления в переходе CSS3.

Если это невозможно, я ищу функцию замедления (например, кривую Безье), которая наиболее похожа на swing
и может использоваться и в jQuery и CSS3. Пожалуйста, включите ссылку на все необходимые плагины.

Ответы [ 3 ]

26 голосов
/ 12 февраля 2012

TL; DR

Я обнаружил, что [.02, .01, .47, 1] Кривая Безье обеспечивает достаточно хорошее приближение.

CSS3 

-webkit-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
-moz-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
transition: all 1s cubic-bezier(.02, .01, .47, 1);

jQuery 

$(element).animate({ height: height }, 1000, $.easie(.02, .01, .47, 1));

с jquery.easie (вы также можете использовать bez ).

Квест

Я использовал этиграфики из ответа Sparky672 , чтобы узнать точную функцию и ее аргументы:

enter image description here

Это то же самое, что y = –x • (x – 2), где xмежду 0 и 1.
Поэтому я создал график с помощью abettercalculator :

enter image description here

Я обрезал его и выложил в сеть.
Затем использовал position: absolute для наложения cubic-bezier.com , предложенный Джимом Джефферсом.

enter image description here

Полученное приближение, которое я использовалбыло [.02, .01, .47, 1].

3 голосов
/ 12 февраля 2012

Согласно W3C , вам разрешено использовать только следующие функции замедления для свойства transition-timing-function.

  • легкость
  • линейный
  • легкость в
  • легкость из
  • легкость в выкатывания
  • кубический Безье (<number>, <number>, <number>, <number>)

Если вы можете перевести "swing" в функцию кубического Безье , вы можете сделать это.

Также, глядя на графическое представление здесь , кажется, что ease-out, встроенный в transition-timing-function, очень похож на форму swing.

РЕДАКТИРОВАТЬ на основе комментариев:

Если вы предпочитаете просто использовать jQuery, то вам даже не нужен плагин. Вы можете просто определить предпочитаемую функцию и использовать ее ...

Функции jQuery замедления без использования плагина

1 голос
/ 12 февраля 2012

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

bounceDownTransition = new Sauce()
bounceDownTransition.recipe( (element) ->
   element.change("y").from(-200).using(Easie.bounceOut)
   element.change("scale").from(0).using(Easie.circOut)
)

bounceDownTransition.duration(2).delay(0.5).putOn("element_with_this_id")

Вы можете оформить заказ здесь: https://github.com/jimjeffers/Sauce

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

Мой движок замедления использует порт уравнений Роберта Пеннера. Тот, который соответствует jswing, должен быть таким: 

@sineIn: (time,begin,change,duration) ->
    -change * Math.cos(time/duration * (Math.PI/2)) + change + begin

https://github.com/jimjeffers/Easie/blob/master/easie.coffee#L218

UPDATE:

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

http://cubic -bezier.com / #. 41, 0,66, 0,54, 0,91

...