плавный переход с твинлитом не работает - PullRequest
Новая
       22

плавный переход с твинлитом не работает

0 голосов
/ 27 октября 2011

У меня есть векторный круг и что делать следующим образом:

Я бы хотел оживить его твинлитом, чтобы он выглядел как ударная волна взрыва. Сначала он увеличивается (от 0 до .5) и масштабируется, а когда достигает половины общего времени анимации, он исчезает, но все равно масштабируется (надеюсь, вы понимаете, о чем я).

В настоящее время это выглядит ужасно, потому что я не знаю, как получить плавный переход от части 1 к части 2 с помощью TweenLite. Моя анимация останавливается при достижении конца части 1 и внезапно делает переход к части 2.

Может кто-нибудь помочь мне с этой проблемой, пожалуйста? Большое спасибо .:)

Общее время анимации: .75 сек. общая сумма масштабирования: 5 

part 1 of 2:

TweenLite.to(blastwave, .375, {alpha:.5, transformAroundCenter:{scale:2.23},
            onComplete:blastScaleFadeOut, onCompleteParams:[blastwave]});


part 2 of 2:

private function blastScaleFadeOut(object:DisplayObject, time:Number = .375, scaleVal:Number = 4.46) {

TweenLite.to(object, time, {alpha:0, transformAroundCenter:{scale:scaleVal},
    onComplete:backgroundSprite.removeChild, onCompleteParams:[object]});

}

Ответы [ 2 ]

1 голос
/ 30 октября 2011

Вы должны переосмыслить, как вы управляете этими подростками. Вы должны установить масштабирование спрайта для одной анимации, а затем разделить альфа-переходы на две отдельные анимации. По умолчанию это не будет работать в TweenLite из-за политики перезаписи Tween. Однако вы можете изменить это либо с помощью TimelineLite, чтобы связать своих подростков, либо добавить свойство overwrite:OverwriteManager.NONE к своим подросткам. Эти два решения работают:

Использование TimelineLite для цепочки ваших подростков: 

var timeline:TimelineLite = new TimelineLite();
timeline.insert(TweenLite.to(blastwave, 0.7, {scaleX: 7, scaleY: 7}));
timeline.insert(TweenLite.to(blastwave, 0.35, {alpha: 0.5}));
timeline.insert(TweenLite.to(blastwave, 0.35, {alpha: 0, delay: 0.35}));

Или просто измените политику перезаписи анимации: 

TweenLite.to(s, 0.75, {scaleX: 7, scaleY: 7, overwrite:OverwriteManager.NONE});
TweenLite.to(s, 0.35, {alpha: 1, overwrite:OverwriteManager.NONE});
TweenLite.to(s, 0.35, {alpha: 0, delay: 0.35, overwrite:OverwriteManager.NONE});

О программе перезаписи TweenLite и перезаписи анимации движения.

Если заметить, что если вы масштабируете взрыв на 0,7 секунды, весь процесс альфа-входа, альфа-выхода сокращается, например, на 0,55 секунды. Так выглядит лучше. :]

1 голос
/ 27 октября 2011

TweenLite применяет функцию замедления к переходу анимации, чтобы контролировать скорость изменения, а по умолчанию используется значение Quad.EaseOut (это означает скорость изменения анимации движения). замедлится по мере приближения к концу, используя квадратичную функцию).Вот почему вы видите такое внезапное изменение (или «скачок»), потому что в «точке соединения» обоих анимаций движения (или частей, как вы их называете) скорость изменения совершенно иная: первый процесс анимации находится на своемсамая медленная скорость, потому что она достигла конца, в то время как другая идет с самой быстрой скоростью, потому что она только начинается.

Боюсь, что единственный способ действительно гарантировать, что "скачка" не будет (скорость будетбыть одинаковым в конце части 1 и в начале части 2) будет использовать Linear.easeNone замедление, что означает отсутствие замедления или ускорения (постоянная скорость на протяжении всей анимации движения): 

TweenLite.to(blastwave, .375, 
{ease:Linear.easeNone, alpha:.5, transformAroundCenter:{scale:2.23},
onComplete:blastScaleFadeOut, onCompleteParams:[blastwave]});

//part 2 (put inside function)
TweenLite.to(object, time, {ease:Linear.easeNone, alpha:0, transformAroundCenter:{scale:scaleVal},
onComplete:backgroundSprite.removeChild, onCompleteParams:[object]});

Но я бы порекомендовал вам поиграть с функциями замедления и их параметрами и попытаться найти комбинацию, которая соответствует вашим потребностям (Linear.easeNone немного скучно).

Надеюсь, это поможет!

...