DailyJS

Let's Make a Framework: Animations Part 7

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

tutorials frameworks animation lmaf

Let's Make a Framework: Animations Part 7

Posted by Alex R. Young on .
Featured

tutorials frameworks animation lmaf

Let's Make a Framework: Animations Part 7

Posted by Alex R. Young on .

Welcome to part 21 of Let's Make a Framework, the ongoing series about
building a JavaScript framework. This part continues looking at
JavaScript animations.

If you haven't been following along, these articles are tagged with
lmaf. The project we're creating is called Turing and is available on GitHub:
turing.js.

In this part I'm going to introduce CSS3 animations, and hardware
accelerated animation.

The Specifications

CSS3 introduces several modules for dealing with animation. All of the
relevant specifications are currently working drafts, with a lot of
input from Apple. Therefore, if you're interested in trying these
examples WebKit-based browsers (and particularly Safari in Mac OS) are
currently the best way of trying them out.

The specifications are:

CSS3 Transitions

Transitions are useful because CSS properties can be animated, much like
our framework code. The syntax is fairly easy to follow:

.example {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

The all instruction refers to the CSS property to animate
-- you could single out margin if required.

#move {
  background-color: #ff0000;
  width: 100px;
  height: 100px;
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;  
    -o-transition: all 5s ease-in-out;  
    transition: all 5s ease-in-out;  
}

#move-container:hover #move {
  margin-left: 440px;
  width: 200px
}

The previous example should create a red box that stretches and moves (a
translation) over 5 seconds.

CSS3 Transforms

There are several different transforms:

transform: translate(50px, 200px);
transform: rotate(45deg);
transform: skew(45deg);
transform: scale(1, 2);

These transforms can be combined with transition to animate
for an event, like hovering over an element.

CSS3 Animations

Animations aren't well supported right now, but they do provide a simple
way of creating keyframes for the animation over time. The CSS looks
like this:

@keyframes 'wobble' {

  0% {
    left: 100px;
  }

  40% {
    left: 150px;
  }

  60% {
    left: 75px;
  }

  100% {
    left: 100px;
  }

}

I think it's likely that many JavaScript animation frameworks will leave
out support for animations, since they'll have equivalent functionality
already.

Animation Performance Problems

In QtWebkit and Graphics
at webkit.org, the authors discuss the problems
caused when trying to animate using the box model. Animating margin,
padding, background, outline, and border will all result in relatively
slow animations.

The CSS Animations Module Level
3
is seen as a way around
traditional animation performance issues. The working draft's editors
are all from Apple, and people are still arguing about whether or not
animation belongs in CSS or JavaScript. However, it's currently the only
way of getting hardware acceleration that I'm aware of.

Hardware Acceleration

Most computers and devices feature specialised graphics chips. If
hardware acceleration sounds mysterious to you, it's nothing more than
using these chips instead of the CPU. The browser has to perform a huge
amount of work to calculate changes when animating elements, but
offloading this work to software and hardware that deals with graphics
reduces CPU load.

CSS3 animations should look noticeably slicker on devices with slower
CPUs like the iPhone.

Feature Detection

We generally test browser support by checking if an object or property
is available, rather than forking code based on the browser's version
strings. There are no properties that can give away hardware
acceleration support, so in
Scripty2

Thomas Fuchs does this:

function isHWAcceleratedSafari() {
  var ua = navigator.userAgent, av = navigator.appVersion;
  return (!ua.include('Chrome') && av.include('10_6')) ||
   Prototype.Browser.MobileSafari;
}

CSS3 support is detected by checking if
WebKitTransitionEvent or MozTransition exists:

var div = document.createElement('div');

try {
  document.createEvent("WebKitTransitionEvent");
  supported = true;

  hardwareAccelerationSupported = isHWAcceleratedSafari();
} catch(e) {
  if (typeof div.style.MozTransition !== 'undefined') {
    supported = true;
  }
}

div = null;

Then there's the problem of translating CSS3 animation properties to
vendor-specific properties.

Conclusion

It will be certainly possible to make us of CSS3 animations in our
framework, but it will require a fair bit of work:

  • CSS3 support needs to be sniffed
  • Anything that can be replaced with CSS3 animations should be swapped out when Turing's animate method is called with the relevant CSS properties
  • Vendor-specific properties should be used where appropriate