Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Raphaël 1.5 Release and New Demos

DZone's Guide to

Raphaël 1.5 Release and New Demos

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}