Как мне увеличить амплитуду этого эластичного анимационного эффекта? - PullRequest
Новая
       16

Как мне увеличить амплитуду этого эластичного анимационного эффекта?

1 голос
/ 31 декабря 2011

Я использую Raphael.js для анимации радиуса круга SVG при наведении курсора. Мне нравится эффект elastic, который предлагает библиотека, но я бы хотел увеличить амплитуду - то есть, чтобы круг увеличивался и уменьшался с большим удовольствием, когда он парил, - не с дополнительной скоростью, а для увеличения и увеличения сжиматься меньше при запуске эффекта.

Я скопировал функцию elastic и переименовал ее в super_elastic, и тут с ней возился:

http://jsfiddle.net/ryWH3/

Я понятия не имею, как работает функция, поэтому я просто возился с ее числовыми значениями, чтобы посмотреть, что произойдет. Пока что я не нашел ничего, что могло бы делать то, что я хочу. Кто-нибудь может порекомендовать какие-либо модификации функции (или другую функцию в целом), которые могли бы сделать то, что я ищу?

Спасибо!

<ч />

UPDATE:

Спасибо за ответы! Извините, возможно, я не очень хорошо объяснил это. Я предполагаю, что утверждение «расти больше и уменьшаться меньше» было особенно обманчивым.

Мне известно, что свойство r влияет на конечный радиус круга после запуска анимации; однако я пытаюсь заставить анимацию elastic «подпрыгивать» с большей амплитудой. То есть, хотя анимация будет по-прежнему начинаться и заканчиваться с теми же значениями r, которые я установил для круга, мне бы хотелось, чтобы переход elastic был намного более драматичным - расширить и сжать круг намного больше агрессивно во время перехода до достижения окончательных значений r. Для этого я предполагаю, что мне нужно изменить уравнение, используемое в функции elastic, чтобы сделать эффект более драматичным.

Надеюсь, это имеет смысл - это сложно объяснить без показа примера, но если бы у меня был пример, мне не пришлось бы публиковать этот вопрос. ; -)

Ответы [ 2 ]

4 голосов
/ 31 декабря 2011

ОК, исходя из ваших разъяснений, вот новый ответ.Чтобы расширить эффект ослабления (усиления), вам нужно умножить результат ослабления на такой множитель, как этот. 

return 6 * Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI) / .3) + 1;

Но когда вы это сделаете, вы обнаружите, что большая часть усиления идетслишком быстро.Малая часть идет медленно, а большая часть идет быстро.Таким образом, темп, когда он больше, должен быть изменен.Мое предположение (которое, кажется, работает) состояло в том, чтобы изменить Math.sin() на Math.cos(), потому что это сдвигает фазу, и это, кажется, работает, как вы можете видеть здесь: http://jsfiddle.net/jfriend00/fuaNp/39/.

return 6 * Math.pow(2, -10 * n) * Math.cos((n - .075) * (2 * Math.PI) / .3) + 1;

Другие вещи, чтобы понятьоб этой функции ослабления.Эта часть: 

(2 * Math.PI) / .3

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

Эта часть: 

Math.pow(2, -10 * n)

определяет, насколько быстро отскок уменьшается, так как это значение становитсячем меньше, тем больше n, что сводит на нет другие множители, когда n становится большим.Итак: 

Math.pow(2, -5 * n)

замедляет его распад (вы видите больше больших колебаний в начале и меньше меньших колебаний в конце.

2 голосов
/ 31 декабря 2011

Чтобы увеличить круг при наведении на него, измените радиус наведения, который я увеличил до r: 100. Чтобы уменьшить круг, измените исходный размер и размер unhovered с 25 на что-то меньшее, например: 

var paper = Raphael(0, 0, 300, 300),
    circle = paper.circle(150, 150, 10);   // <== change initial radius here to make it smaller

circle.attr({
  'stroke': '#f00',
  'stroke-width': 4,
  'fill': '#fff'
});
circle.hover(function() {
  this.animate({ r: 100 }, 1000, 'super_elastic');   // <== change enlarged size here
}, function() {
  this.animate({ r: 10 }, 1000, 'super_elastic');    // <== change small size here
});

// no changes made to the easing function
Raphael.easing_formulas.super_elastic = function(n) {
  if (n == !!n) {
    return n;
  }
  return Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI) / .3) + 1;
};

Вы можете увидеть это здесь: http://jsfiddle.net/jfriend00/fuaNp/.

Функция super_elastic() - это функция замедления, которая контролирует скорость движения анимации в разных частях цикла. Ослабление не контролирует общую амплитуду. Это делается с параметрами метода animate().

Если вы хотите замедлить анимацию, вы бы увеличили время анимации (сделайте два аргумента 1000 равными animate() большим числам. Если вы хотите ускорить анимацию, вы сделаете эти два числа меньше. Это миллисекунды для анимации. Меньшие числа означают, что анимация выполняется за меньшее количество миллисекунд (что означает быстрее).

...