NativeScript Facebook Keyframes plugin

{N} wrapper for this awesome animation library

Why use this?

Good question, as NativeScript already has outstanding CSS animation support!

Make sure you check that out as well, but if you or your designer is a sucker for After Effects to create crazily complex (and beautiful) animations then this is the plugin for you.

Installation

From the command prompt go to your app's root folder and execute:

tns plugin add nativescript-keyframes

Demo app

Want to dive in quickly? Check out the demo. Which looks like this (YouTube video). Otherwise, continue reading.

You can run the demo app from the root of the project by typing npm run demo.ios.device.

API

This plugin makes most sense when used from XML, which is done like this:

<Page xmlns:Keyframes="nativescript-keyframes">
  <Keyframes:KeyframesView
      class="keyframe"
      width="200"
      height="200"
      source="keyframes/logo.json">
  </Keyframes:KeyframesView>
</Page>

To make the image look transparent on Android currently, you need to set the background color to that of the parent container, so in your css file add:

.keyframe {
  background-color: #DDD;
}

The source property refers to a folder inside your app, so in this case we expect this file: app/keyframes/logo.json