Извлечь значения анимации из tween.js - PullRequest
3 голосов
/ 20 января 2012

Если бы у меня была анимация с продолжительностью 2000 мс, и я хотел бы извлечь значение анимации при 1000 мсек, как бы я это сделал?Теперь я использую Tween.js @ http://github.com/sole/tween.js

var position = {y: 0};  

t = new TWEEN.Tween(position)
    .to({ y: 300 })
    .onUpdate( function() {
      console.log(position.y);
    });

t.start(); // correctly runs the tween and logs tweened position.y values

. Из того, что я могу собрать, я должен быть в состоянии .update (tValue) и получить в нем правильное значение анимации движения для данного значения tValue.OnUpdate.Вместо этого position.y выводит только значение начальной позиции.

Первый вопрос с часто задаваемыми вопросами о странице Github намекает на эту способность, но я не могу заставить ее работать.

Спасибо!

Ответы [ 2 ]

4 голосов
/ 20 января 2012

Беглый взгляд на источник tween.js показывает, что он сохраняет все свои функции анимации в Tween.Easing «пространстве имен», а по умолчанию используется функция ослабления TWEEN.Easing.Linear.EaseNone.

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

function getTweenedValue(startVal, endVal, currentTime, totalTime, tweener) {
    var delta = endVal - startVal;
    var percentComplete = currentTime/totalTime;
    tweener ||= TWEEN.Easing.Linear.EaseNone;

    return tweener(percentComplete) * delta + startVal
}

var val = getTweenedValue(0,300,1000,2000);

Нечто подобное должно работать.


Я только что вспомнил, что некоторое время назад у меня также был связанный ответ, в котором больше говорится о "теории" функций замедления / анимации , если вам интересно.

0 голосов
/ 20 января 2012

Просто используйте setTimeout() и включите таймер после 1000 ms:

setTimeout(function() {
  console.log(position.y);
}, 1000);
...