UI ANIMATIONS FRAMEWORK FOR COHERENT UI (PART 3)
As mentioned in our earlier posts we are working to provide an animation framework for Coherent UI users. The JavaScript framework will help jump-start UI development and will be the foundation for deeper animation integration in the game engine editors that Coherent UI supports.
This post will introduce the draft of the framework and how we envision the syntax to work. All the code will be encapsulated in a “coherent_animations.js” file that users can include in their UI Views. The API provided is a very this wrapper around the GSAP library. We’ll provide also direct access to GSAP without trying to hide anything. The features list of GSAP is very long and we want our users to be able to use anything they might need.
We mostly concentrated on providing a more declarative syntax for animation definitions. GSAP has the concept of timeline which is basically a collection of tweens. Timelines are defined by default in this way:
|
1 2 3 4 |
var tl = new TimelineLite(); tl.to(element, 1, {left:"+=50px"}); tl.to(element, 2, {opacity:"0.5", ease:Elastic.easeOut}); tl.play(); |
Our enhanced syntax is closer to the way animations are declared in CSS3:
|
1 2 3 4 5 6 7 |
var blink = [ {percent: 0.2, opacity: 1}, {percent: 0.2, opacity: 0}, {percent: 0.2, opacity: 1}, {percent: 0.2, opacity: 0}, {percent: 0.2, opacity: 1} ]; |
From this animation definition you can then create a timeline:
|
1 2 3 4 5 6 |
var blinkBtn = new CoherentAnimation(); blinkBtn.caTo({ selector: '.btn', anims: blink, seconds: 1 }).play(); |
This call will create a timeline that will apply blinking animation for 1 second on all elements that the selector “.btn” finds.
This new syntax is more convenient for UI designers as it allows them to define all animations up-front and then eventually combine them.
We’ll also support ‘seconds’-based animations, where the durations are in seconds.
Timelines created this way can be combined in master timelines and will support all GSAP features – animation control (play, stop, repeat), yoyo effects etc.
The animations defined above work as ‘to’ animations. Basically, they say ‘animate to this, thеn animate to this etc.’. A very powerful concept are ‘from’ animations. They animate an element from a set of properties to its ‘natural’ set in the page. This is ideal for animating widgets that ‘come-in’ the UI, imagine buttons that fly-in from the side when the menu opens up.
‘caFrom’ animations are even simpler to define:
|
1 2 3 4 5 6 |
var fromAnim = {seconds: 5, left: "-=400px", ease:Back.easeOut}; var logoAnim = new CoherentAnimation(); logoAnim.caFrom({ selector: comp.$("RbSymbol"), anims: fromAnim }).play(); |
What we say here is to create an animation that comes 400 pixels to the right and for 5 seconds it’ll reach the final position of the element.
Our framework will completely support pages created with Edge Animate and you’ll be able to apply animations on Edge symbols.
Here is a small video done with the framework draft.
The UI animation framework will be available in Coherent UI 2.4. Please stay tuned for more blog posts on the subject.
