Question

我有一个矢量圈，以及如何执行以下操作：

我想用tweenlite制作动画，所以它看起来像爆炸的冲击波。一开始它会淡入（从0到.5）并且会缩放，当它达到动画总时间的一半时，它会淡出但它仍然会缩放（希望你知道我的意思）。

目前它看起来很糟糕，因为我不知道如何使用TweenLite从第1部分到第2部分的平滑过渡。我的动画在到达第1部分结束时停止，然后突然跳到第2部分。

有人可以帮我解决这个问题吗？非常感谢你。:)

动画总时间：0.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]});

}

Answer 1

TweenLite 将缓动函数应用于补间转换以控制更改速率，默认缓动为Quad.EaseOut （这意味着更改速率）当使用二次函数逼近末尾时，补间将减速。这就是为什么你看到这种突然的变化（或“跳跃”），因为在两个补间（或部分，你称之为）的“连接点”，变化率是完全不同的：第一个补间是在它的最慢的速度，因为它已到达终点，而另一个是最快的速度，因为它刚刚开始。

我担心唯一可以确保不会出现“跳跃”的方法（第1部分末尾和第2部分开头的速率相同）将使用线性.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有点无聊）。

希望这有帮助！

Answer 2

您应该重新考虑如何管理这些补间。您应该将精灵的缩放放到一个补间，然后将alpha过渡划分为两个单独的补间。默认情况下，这在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});

About TweenLite's OverwriteManager and tween overwriting.

另一方面，如果你将爆炸扩展0.7秒，则使整个alpha输入，alpha输出过程更短，如0.55秒。看起来更好。：

使用tweenlite进行平滑过渡不起作用

2 个答案: