search

mmmries / chunky_svg

An Elixir library for generating SVG images
32 stars 4 forks source link

Animation Macros #9

Open mmmries opened 9 years ago

mmmries commented 9 years ago

I've been playing with CSS animations in SVG, they are really cool, but very cumbersome to get the basic stuff working. If I just want to make something blink on and off I have to do this:

{:style, %{type: "text/css"}, "
    @-webkit-keyframes big-blink {
      from {opacity: 1.0}
      to   {opacity: 0.0}
    }
    polygon.big-fade {
      -webkit-animation: big-blink 2s linear 0s infinite alternate;
    }
  "},

It would be nice to do this same thing with just a single attribute or by wrapping an element.

{:circle, %{cx: 50, cy: 50, r:25, fill: "orange", blink: true}, nil}

OR

{:blink, [
  {:circle, %{cx: 50, cy: 50, r: 25, fill: "orange"}, nil}
]}

@film42 do you have any preference between wrapping vs attribute?

mmmries commented 9 years ago

or perhaps we should be able to provide some attributes to the animation like this?

{:blink, %{repeat: 3} [
  {:hexagon, %{cx: 50, cy: 50, r: 40, fill: "lightgreen"}}
]}
mmmries commented 9 years ago

http://goo.gl/SH7z9I

mmmries commented 9 years ago

I'm starting to have second thoughts about this feature. Performing CSS animations on elements inside and SVG currently causes a lot of repaints on the browser. I profiled the link above and it was spending about 25% of the rendering threads time just computing and painting the rotation. If you create the same SVG and put the animation on the SVG element (instead of the the g element inside the SVG) it runs at 60fps without using almost any CPU at all.

http://goo.gl/5TFkgk