Dmitry Baranovskiy has announced the new version of his SVG animation and drawing library, Raphaël.  Raphaël 1.5 features custom attributes and keyframes that can be defined much like CSS3 animations.  Baranovskiy has also given us two new demos to learn from.

Here's an example of a new custom attribute in Raphaël 1.5:

paper.customAttributes.segment = function (x, y, r, a1, a2) {
    var flag = (a2 - a1) > 180,
        clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;
    return {
        path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]]
    };
}

This functionality allows the pie chart sectors in this demo to be animated:

Click on the image to see the demo


Here's an example of how you can define the new keyframes:

el.animate({
    "20%": {cy: 200, easing: ">"},
    "40%": {cy: 100},
    "60%": {cy: 200},
    "80%": {cy: 300, callback: function () {}},
    "100%": {cy: 200}
}, 5000);

The keyframes allow things like asynchronous animations and multiple, simultaneous animations over the same element:

Click on the image to see the demo


This is the full list of new features listed on the GitHub page:

• fixed IE8 issue with the HTML element named Raphael
• fixed precision for arcs in IE
• added caching to getPointAtSegmentLength function
• added ability to do more than one animation of an element at the same time
• added "cubic-bezier()" as an easing method
• added new syntax for animation (keyframes)
• hsl2rgb now accept h as degree (0..360), s and b as % (0..100)
• show="new" instead of target="blank" for SVG
• added angle method
• added snapTo method
• cached popup || activeX for IE
• fixed insertAfter
• fixed timeouts for animation
• added customAttributes

Raphaël is a JavaScript framework that simplifies working with SVG (scalar vector graphics).  In June, Sencha (the new name for Ext JS) hired the project's developer, Dmitry Baranovskiy, to work on Raphaël full-time under the Sencha banner.  Both Raphaël and jQTouch have become a part of Sencha Labs and maintain their MIT licensing.