Keyshape 1.4 with Splashing Shape Animations

This release includes support for shape animations, also known as path morphing. The implementation uses a fairly simple algorithm to perform the morphing. Nodes in keyframes are mapped to each other one by one. If the animated paths have different amount of nodes, then nodes are added to the end of the shorter paths to make the animation possible. The resulting animation does not always look great, so nodes can be inserted manually to make the animation look better.

CSS animation of the path shape works only in Google Chrome, which uses a non-standard syntax. Since it is a non-standard way to animate paths, it may change in the future when the issue about it gets resolved. It is recommended not to use CSS animated paths until the issue is resolved. JavaScript shape animations can be used without any issues on all modern browsers including Internet Explorers.

Shape morphing into a splash

By default, documents are transparent, but they are composited over a white backdrop, so all transparent pixels look white. The new Transparency option in the document object makes it possible to change the white backdrop color to another color or a checkerboard pattern. This is useful when there is a need to see which pixels are transparent. Below is an example of a semi-transparent rectangle over a white, black and checkerboard backdrop. Its transparency becomes apparent with the checkerboard pattern. The Transparency option does not affect exporting or browser previews.

Semi-transparent rectangle with different backdrops

Font handling has been changed to match other vector graphics software. Keyshape now uses PostScript font names in its Keyshape files and can read them from SVG files. Since most browsers do not understand PostScript font names, they are removed during exporting and only the CSS font family names are used.

Playback Options have been added to make previewing short animations easier. There are three modes: Play Normal, Play Once and Play Loop. The new Playback Options do not affect exporting or browser previews.

A quick press of the Space key now plays and pauses the animation. This new feature can be disabled in the Preferences.

Support for tracking (letter spacing) and word spacing have been added to make text formatting easier. Note that Firefox does not currently support them in SVG documents.

There are few other additions, see the release notes for details. Twitter can be used to send questions and give feedback about the new features.