NativeScript-AnimateCSS

NativeScript plugin for Android to mimic Animate.CSS animations on Android views.

This plugin uses AndroidViewAnimations by daimajia

AnimateCSS Usage

Installation

npm install nativescript-animatecss

Usage

XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <Page.actionBar>
    <ActionBar title="NativeScript-AnimateCss" color="#fff" backgroundColor="#03A9F4" />
  </Page.actionBar>
    <ScrollView>
        <StackLayout>
            <button text="Animate Css FTW!" tap="animateIt" />
            <image src="~/images/yoda.jpg" stretch="aspectFit" height="200" tap="flashIt" />
            <image src="~/images/batman.jpg" stretch="aspectFit" height="200" tap="rotateIn" />
            <image src="~/images/excellent.jpg" stretch="aspectFit" height="200" tap="rubberBand" />
        </StackLayout> 
    </ScrollView>
</Page>

JS:

var animatecss = require("nativescript-animatecss");

function animateIt(args) {
    // get the native android widget for the view
    var nativeView = args.object.android;
    animatecss.animate({ view: nativeView, cssClass: 'Hinge', duration: 600 }).then(function (result) {
        console.log(result);
    }, function (err) {
        console.log(err);
    });
}
exports.animateIt = animateIt;

API

• animate(options)
• view : native android view
• cssClass : string class name
• duration: int in milliseconds

Effects

Attention

Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave

Special

Hinge, RollIn, RollOut,Landing,TakingOff,DropOut

Bounce

BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp

Fade

FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight

FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp

Flip

FlipInX, FlipOutX, FlipOutY

Rotate

RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight

RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight

Slide

SlideInLeft, SlideInRight, SlideInUp, SlideInDown

SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown

Zoom

ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp

ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp