search

hfg-gmuend / gmynd

A utility library for working with data in Javascript
15 stars 1 forks source link

Making animation easier #4

Closed bohnacker closed 3 years ago

bohnacker commented 9 years ago

As far as I know, there are the following possibilities of doing animation in a browser. All of these have some limitations or are quite comlicated to use especially when animating SVGs.

  1. Frame based animation using requestAnimationFrame() or setInterval(). Problem: is not really practical if I want to do a transition (temporary animations) or delayed stuff.
  2. CSS animation using keyframes or CSS transitions. Problem: Many SVG attributes can not be animated with CSS animations or transitions.
  3. SVG animation using <animate> or <animateTransform>. Problem: Any kind of easing is very complicated to use. Animations can be triggered in various ways using the begin attribute of <animate> or <animateTransform>, but I did not find an easy way to trigger an SVG animation from JavaScript.
  4. Using any kind of library with animation functions like jQuery, FramerJS, ... . Problem: Usually not made for animating SVGs.

Of course, if I understand all these techniques, I will be able to do almost everything I want.

But is there a way of combining the advantages of all these techniques into one, without making it really complicated for us or for the students?

phlsa commented 9 years ago

It seems like we might want to add tweens while still allowing for procedural animations as we do now. Perhaps the tweens could also just be an abstraction over requestAnimationFrame as for example TweenLite does it.

So we could have something like this:

var t = tween(someNode, 300, {x:100}); // interpolates between current x and specified x over 300ms

Now, this is of course quite a rabbit hole. If we add easing functions, events etc., we are essentially rebuilding TweenLite. So I wonder whether it makes sense to just outright use that for these cases.