Aug 31


Dmitry Baranovskiy and team have released another version of Raphaël, an excellent drawing and animation library backed by SVG (VML on Internet Explorer). New features in Raphaël 1.5 include custom attributes and keyframes. Keyframes can be defined similar to CSS3 Animations:

JAVASCRIPT:

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

Check out a demo of the new keyframe animation.

Custom attributes is also a new feature that makes it easier to do things like animating a portion of an attribute segment (demo).

Full release notes:

  • 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

BTW I just noticed that Dmitry is now at Sencha; they’re assembling quite the team! Congrats Dmitry!

Continue reading »

Tagged with:
Jun 15

Raphaël. Painter. Turtle. One the back of the fact that Raphaël will continue to do great things in the JS space due to Sencha Labs funding we have another little gift.

104 MIT licensed icons:

Go check out the page and zoom in to see the vector goodness.

Continue reading »

Tagged with:
Jun 15

Whenever you name your company after your first product you run into the issue that people think that is who you are. The company behind ExtJS has grown up a lot recently, and partly to show that, now come to you as Sencha, a new identity.

They have also clearly separated their GPL/commercial offerings from their MIT projects.

Sencha Products

  • Ext JS for web developers — for quickly building rich, sustainable web applications for desktop browsers;
  • Ext GWT for Java developers — enables Java developers to build rich user experiences leveraging the Google Web Toolkit compiler;
  • Ext Designer — for easily assembling user interfaces using drag-and-drop functionality.

Sencha Labs

  • jQTouch: a progressive enhancement style, mobile library providing lightweight animation and UI plugin for JQuery;
  • Raphaël: a rich SVG library for developing vector graphics applications on the web;
  • Connect: an application framework that combines Rack and Node.js to provide a lean, event-driven application server.

Hiring Dmitry Baranovskiy to work full time on Raphaël is awesome, and Jonathan Stark is now running jQTouch.

It really feels like the new crew behind Sencha are looking to be a driving force for the HTML5 revolution, breaking out beyond their strong Ext* roots. It is going to be exciting what they announce next….. a prophet once told me …..

Continue reading »

Tagged with:
May 07

Dmitry Baranovskiy has been hacking away on Raphael. It is almost like he has had a bunch more time for it recently! :)

Version 1.4 has a bunch of cool new features such as:

  • Touch events support
  • rgba support
  • new method drag
  • document.onmousemove = f ? Raphael.mousemove(f)
  • resetScale method
  • scaling text will change it position, but not size
  • sets now have type “set”
  • rect in VML doesn’t recreate itself on change of the R
  • paths are not rounded to the nearby pixels anymore
  • Various small bug fixes and improvements
  • added preventDefault and stopPropagation to event object

Very nice.

Continue reading »

Tagged with:
May 04

Raphael is pure goodness. Dmitry gave a fantastic talk at JSConf, and his library never fails to impress.

There have been a few interesting posts recently. Trotter Cashion kicks things into gear as he declares his love and then goes on to show how you can unit test Raphael with some mocks.

Then we learn how easy it is to write a “plugin” a la jQuery, such as adding an arrow abstraction:

JAVASCRIPT:

  1.  
  2. Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
  3.     var angle = Math.atan2(x1-x2,y2-y1);
  4.     angle = (angle / (2 * Math.PI)) * 360;
  5.     var arrowPath = this.path(“M” + x2 + ” ” + y2 + ” L” + (x2 – size) + ” ” + (y2 – size) + ” L” + (x2 – size) + ” ” + (y2 + size) + ” L” + x2 + ” ” + y2 ).attr(“fill”,”black”).rotate((90+angle),x2,y2);
  6.     var linePath = this.path(“M” + x1 + ” ” + y1 + ” L” + x2 + ” ” + y2);
  7.     return [linePath,arrowPath];
  8. }
  9.  

And finally, play with a great example usage thanks to Thomas Fuchs.

Continue reading »

Tagged with:
preload preload preload