NativeScript-AnimateCSS

为 Android 视图模拟 Animate.CSS 动画的 NativeScript 插件。

本插件使用了 daimajia 的 AndroidViewAnimations

AnimateCSS 使用方法

安装

npm install nativescript-animatecss

用法

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 : 原生 Android 视图
• cssClass : 字符串类名
• duration: 毫秒数

效果

注意

闪动, 脉冲, 橡皮筋, 震动, 摆动, 摇摆, 弹跳, 站立, 波浪

特殊

铰链, 滚入, 滚出,着陆,起飞,掉出

弹跳

弹入, 弹入下, 弹入左, 弹入右, 弹入上

淡入淡出

淡入, 淡入上, 淡入下, 淡入左, 淡入右

淡出, 淡出下, 淡出左, 淡出右, 淡出上

翻转

水平翻转进入, 水平翻转退出, 垂直翻转退出

旋转

旋转进入, 旋转下左进入, 旋转下右进入, 旋转上左进入, 旋转上右进入

旋转退出, 旋转下左退出, 旋转下右退出, 旋转上左退出, 旋转上右退出

滑动

从左滑动进入, 从右滑动进入, 从上滑动进入, 从下滑动进入

从左滑动退出, 从右滑动退出, 从上滑动退出, 从下滑动退出

缩放

缩放进入, 缩放下进入, 缩放左进入, 缩放右进入, 缩放上进入

缩放退出, 缩放下退出, 缩放左退出, 缩放右退出, 缩放上退出