{N} wrapper for this awesome animation library
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.
From the command prompt go to your app's root folder and execute:
tns plugin add nativescript-keyframes
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.
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