Sencha Inc. | HTML5 Apps

Blog

The new Animator timeline: a closer look

July 19, 2012 | Katherine Chu

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

Sencha Animator

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.

Sencha Animator

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.

Sencha Animator

Animation segments (both contiguous and disjointed) can be copied and pasted from one object to another.

Sencha Animator

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.

Sencha Animator

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.

Sencha Animator

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!

Written by Katherine Chu
Katherine Chu is a User Experience Designer for Sencha Architect and Animator. Katherine graduated with a B.S in Industrial Design from CSULB and has worked with a number of startups in the Bay Area developing web and mobile applications. She believes that good design is unobtrusive and non-distracting from the task at hand. When she's not hunched in front of her computer screen, she can be found biking and eating her way through the city of San Francisco.

Share this post:
Leave a reply

There are 4 responses. Add yours.

Milan

2 years ago

I’m worried that Adobe will buy you and do whatever big greedy commercial companies do to acquired competitor.

Simon Ho

2 years ago

Could you provide tutorial for teaching how to integrate Animator’s file with Sencha Touch 2?

Milan

2 years ago

Sencha should pay more attention to spam in comments. It is increasing in blog comments as well as in forum posts. For instance 3rd and 4th comments are obviously SPAM.

Michael Mullany Sencha Employee

2 years ago

Milan - our spam catcher catches several hundred spam comments per day. We then manually scrub the blog comments about once a week to catch the comments that slip through.  Forum spam is down significantly in the last three weeks after we implemented yet another improvement to the spam filter. This is a constant war. Spammers figure out how to beat the system, then we improve the system. Rinse and repeat.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.