Animate now comes with a set of easing presets for both classic and shape tweens which are very similar to those available when using motion tweens. The ease presets when published for HTML5 Canvas documents use the native easing functions of TweenJS.
- [Josh] Animate now comes with a set of easing presets for both classic and shape tweens, which are very similar to those available when using motion tweens. Let's lock down our Cup layer and unlock the Carafe layer. We can see if we scrub the timeline, the Carafe kinda comes down and goes back up, but there isn't any tweening going on here. Let's go ahead and select a number of these frames, and then, right-click, and choose to create a Classic Tween on our Carafe.
As you can see, we have a Classic tween from key frame to key frame, and we can also preview this by hitting Play and watching our tween. So, let's go ahead and choose one of these tweens by clicking anywhere between the two key frames. And we can see in the tweening area, how, right now, we have no Ease. Now this is the new bit, because we can click on that and select from a number of different Ease styles.
So, Linear, Ease In, Ease Out, In Out and even Custom Eases. So if we click something like Ease In, we can choose from Quad, Cubic, Quart, Quin, Sine, Back, Circ, Bounce and Elastic. I'm gonna go ahead and choose Ease In, Sine and just double-click to apply that. And on this final tween here, let's go ahead and apply an Ease to that as well.
And this will be an Ease In Out, again, of type Sine, so double-click to apply. Let's go ahead and preview this now. If I go back to frame one, and click the little preview button, we can see it has much more natural easing to these tweens. Note that the Ease presets when published for HTML5 Canvas, use the native easing functions of tween.js.
- Enhanced animation tooling
- Frame Picker enhancements
- Custom ease presets for shape tweens
- Resetting the camera position
- Interactivity enhancements
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: New videos were added that cover general enhancements to Adobe Animate CC, including changes to the interface, timeline enhancements, the updated Actions Wizard, and using the camera with layer depth.
Q: This course was updated on 10/15/2018. What changed?
A: New videos were added that cover the October 2018 updates to Adobe Animate CC.