log inhelp

  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Quilmes-Animation Notes

Page history last edited by Alex Iskander 14 years, 1 month ago

The animation layer provides a mixin for views that allows them to be easily animatable, in a method similar to how CSS transitions work. It even uses CSS transitions where possible.

 

API

 


  myAnimatedView: SC.LabelView.design(SC.Animatable, {
     transitions: {
          left: { duration: .25, timing: SC.TRANSITION_CSS_EASE },
          top: .25, // duration as the default argument
          width: .25,
          opacity: { duration: 1.0 }
     }
}
 
// some function
this.myAnimatedView.adjust("width", 0).adjustStyle("opacity", 0);
 

Targeted Subset of Properties

What subset of properties (CSS and otherwise) would be optimal? Perhaps:

  • Layout: left, right, top, bottom, width, height, centerX, centerY
  • opacity

 

Special Notes and Questions

  • SproutCore has no built-in support for manipulating style. The API adds:
    • View.style property (adjustable by .set("style") or .adjust("theStyleProperty")

       

  • Duration units are seconds.

     

  • Callbacks allowed via "action" and "target" properties on transition.

     

  • Animation of display allowed: will make display:none take effect only after duration, all other display values immediately.

     

  • Should support for non-transition animation (keyframe animation, perhaps?) be added? Perhaps like CSS, have two separate parts, Transitionable and Animatable?

 

Some Implementation Notes

The current implementation uses its own timer (instead of SC.Timer); SC.Timer is fast, but has several properties which are data-bound. The animation layer's current timing method works in a very similar way to SC.Timer, but is very stripped down. This made it run at something like 13x the frames per second as before.

 

Anything else?

 

 

Comments (0)

You don't have permission to comment on this page.

Printable version