Raphaël 1.5 Release and New Demos
Raphaël 1.5 Release and New Demos
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
Here's an example of a new custom attribute in Raphaël 1.5:
paper.customAttributes.segment = function (x, y, r, a1, a2) {This functionality allows the pie chart sectors in this demo to be animated:
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"]]
};
}
Click on the image to see the demo

Here's an example of how you can define the new keyframes:
el.animate({The keyframes allow things like asynchronous animations and multiple, simultaneous animations over the same element:
"20%": {cy: 200, easing: ">"},
"40%": {cy: 100},
"60%": {cy: 200},
"80%": {cy: 300, callback: function () {}},
"100%": {cy: 200}
}, 5000);
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.
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}