UNPKG

nativescript-animatecss

Version:

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

87 lines (64 loc) 2.6 kB
# NativeScript-AnimateCSS NativeScript plugin for Android to mimic Animate.CSS animations on Android views. This plugin uses [AndroidViewAnimations](https://github.com/daimajia/AndroidViewAnimations) by [daimajia](https://github.com/daimajia) ### AnimateCSS Usage ![TwitterBang](screens/animateCss.gif) ## Installation `npm install nativescript-animatecss` ## Usage ### XML: ```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: ```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`