nativescript-keyframes
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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! 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

    Install

    npm i nativescript-keyframes

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • eddyverbruggen