NativeScript plugin for Android to mimic Animate.CSS animations on Android views.
APACHE-2.0 License
NativeScript plugin for Android to mimic Animate.CSS animations on Android views.
This plugin uses AndroidViewAnimations by daimajia
npm install nativescript-animatecss
<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>
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;
Flash
, Pulse
, RubberBand
, Shake
, Swing
, Wobble
, Bounce
, Tada
, StandUp
, Wave
Hinge
, RollIn
, RollOut
,Landing
,TakingOff
,DropOut
BounceIn
, BounceInDown
, BounceInLeft
, BounceInRight
, BounceInUp
FadeIn
, FadeInUp
, FadeInDown
, FadeInLeft
, FadeInRight
FadeOut
, FadeOutDown
, FadeOutLeft
, FadeOutRight
, FadeOutUp
FlipInX
, FlipOutX
, FlipOutY
RotateIn
, RotateInDownLeft
, RotateInDownRight
, RotateInUpLeft
, RotateInUpRight
RotateOut
, RotateOutDownLeft
, RotateOutDownRight
, RotateOutUpLeft
, RotateOutUpRight
SlideInLeft
, SlideInRight
, SlideInUp
, SlideInDown
SlideOutLeft
, SlideOutRight
, SlideOutUp
, SlideOutDown
ZoomIn
, ZoomInDown
, ZoomInLeft
, ZoomInRight
, ZoomInUp
ZoomOut
, ZoomOutDown
, ZoomOutLeft
, ZoomOutRight
, ZoomOutUp