除了使用Web Animation API的动画之外,SpriteJS还提供了更简单的过渡动画 —— Transition

设置简单的transition

我们可以在改变元素的属性前先调用transition方法,这样就会产生一个过渡效果。

Transition - 图1

transition(…).attr(…) 返回一个Promise对象,因此就像上面的例子那样,我们可以使用await来进行连续的过渡动画。

给transition添加Easing

就像Animation那样,我们可以添加easing,transition的第二个参数可以传easing:

Transition - 图2

reverse transition

有时候我们需要过渡动画来做状态切换,这时候我们可以使用transition的reverse来回切trasition状态。

Transition - 图3