The new Animator timeline: a closer look
As we developed Animator, our goal has always been to give designers full control of every animation ability available. If it’s possible to do it in CSS, you should be able to do it in Animator. It made sense that the first few releases were jam packed with new actions, transformations, and transitions, but as the product matured, we felt it was time to re-evaluate what we had built for maximum usability as well as functionality. This is a deeper look at the new Timeline that is part of Sencha Animator 1.3.
The Timeline is the heart of the Animator: you use it to view the elements in your project, to create keyframes, to group objects, to control the duration and synchronization of your animations. It’s where you go to fine-tune the pacing and set the tone for your animation.
Given its critical role in the application, we paid special attention to its usability in Animator 1.3. In redesigning the interactions of the Timeline, we tried to identify key areas where the previous version stood in the way of creating animations quickly and intuitively.
Imagine a use case where someone has built an animation but now needs to go back and make one portion of it slightly shorter in order to sync up with a different object. Let’s say you’ve created a bouncing ball that drops down from above and bounces three times before gently rolling to a stop. You’re perfectly satisfied with the timing and rhythm of the bouncing animation but decide that you need the ball to stop bouncing at 2.5 seconds rather than 3 (where it is currently). You need to make the beginning portion of the animation shorter by 0.5 seconds without changing the proportional relationships of the keyframes or the total duration of the animation. While this has always been possible to do in Animator, it was pretty tedious and time consuming since it required you to move each keyframe individually.
The latest Timeline overhaul takes care of frequently encountered workflow issues like the one just described. Here’s what we’re changing to make it easier to address this use case—and many other use cases—with Animator.
Selecting Specific Animation Segments
We’re adding the ability to select specific animation segments within an object’s total animation track, so they can be manipulated independently without affecting the surrounding keyframes.
You can now select animation segments from multiple objects at the same time via marquee selection or holding down the shift key while clicking individual keyframes. This enables you to edit your animation as a whole rather than one piece at a time.
Animation segments (both contiguous and disjointed) can be copied and pasted from one object to another.
Animations can be scaled up or down from one point while retaining relationships among segments.
To offer visibility and feedback while you use these features, we’re introducing a new UI element to the timeline: the Animation Rig. The Rig is enabled only when an animation is selected. It sits atop the keyframes that have been selected, showing you exactly which portions of the animation your actions will affect. Handles on either side let you scale your animation. Selecting any other portion of the Rig moves it left or right in the Timeline without affecting the rest of the keyframes.
Using Recording Mode to Simplify Tasks
Another new addition we’re making to speed up your animation workflow is Recording Mode. Let’s go back to the bouncing ball example. To create such an animation in a previous version of Animator, you would have moved the Playhead along the Timeline, created a keyframe at that point in time, and then manipulated the object either via the Stage or the Properties Panel until it reached the proper location. Recording Mode simplifies that task. With Recording Mode turned on, you just have to reposition an object in the Stage and Animator creates a keyframe on the fly. This experience more closely simulates the animation you are producing and allows you to “draw” your animation in the Stage in a more fluid and synchronized fashion.
Updates to the Properties Panel
We’re also updating the Properties Panel. It now displays the values of your object’s properties at every point in time, not just on keyframes, bolstering your understanding of your project. New keyframe controls in the Properties Panel enable you to add keyframes, navigate between existing keyframes, and switch to an object’s Base State.
The ability to manipulate and duplicate specific sections of your Animation, automatic creation of keyframes via Recording Mode, and more observable property transitions are three features that together will make your animation workflow faster and more intuitive.
Please don’t hesitate to participate in our Animator forums with your comments, suggestions, and feedback. We’ll continue to work on even more improvements to deliver to you in future releases. Until next time, happy animating!