Keyshape 1.9 can export animated PNG and WebP images for web pages and mobile apps.
Animated PNGs are like animated GIFs with few improvements. Animated PNGs support proper alpha transparency while animated GIFs only support 1-bit alpha transparency. Animated PNGs can display all colors, but animated GIFs are limited to 256 colors per frame.
Browser support for animated PNGs is starting to look good. Microsoft has released the first versions of its new Edge web browser, which is based on the Chromium project. These early preview versions can already be downloaded for Windows 10 and a macOS version will be available later. The new browser supports animated PNG images. It makes Internet Explorer the only browser without support for animated PNGs, but even it shows the first frame of the animation.
Animated WebP is like animated PNG with better compression options. However, browser support for animated WebP images isn’t as good. They are supported on the new Edge browser, but they are not supported on Safari, so they can’t really be used on web pages without fallback options. But, animated WebP has other use cases. For instance, Google’s Flutter cross-platform app framework can display them.
Animated PNG and WebP images are pixel based graphics. Just like animated GIFs, they get pixelated when zoomed in. If that is a concern, vector based animations, such as SVG and Lottie animations, are a better option.
The SVG exporter has few improvements. The new optimize option will create smaller SVG files. Copy-pasting object from Keyshape to a text editor creates cleaner code. There is also an option to output object ids in various ways. Unique or prefixed ids help embedding SVG in HTML without worries about id clashes.
Transform (position, anchor, scale, skew) keyframes animate values for X and Y coordinates. It is now possible to separate dimensions so that X and Y coordinates can be controlled independently. It makes bouncing ball effects and overshooting position animations easier to create, as shown by the animated PNG below.
Have a look at the release notes for few other improvements in Keyshape. The Lottie and AVD plugins have been updated to support separated dimensions, so download them for the latest features.