商场
作者 NativeScript.org
nativescript-effects
由 Alexander Ziskind 开发 | v3.0.0
一个 NativeScript 插件，提供动画效果。还包括扩展动画，包括常见的动画场景。
npm i --save nativescript-effects

NativeScript Effects

一个 NativeScript 插件，为视图添加常用的动画效果。这包括将 nativescript-animation-spring 作为其中一种效果，因此如果您获取了此插件，则无需再获取该插件。

安装

$ npm install nativescript-effects --save

此命令自动安装必要的文件，并在您的项目的 package.json 文件中将 nativescript-effects 存储为依赖项。

使用

要使用动画效果插件，您必须首先 require() 其模块。在您 require() 模块之后，您就可以访问其 API。

在演示应用中，此 require 行被添加到 app.ts 文件中，但您也可以将其添加到您将使用效果的单一代码后文件中。

var nsfx = require('nativescript-effects');

TypeScript

为了避免类型检查错误，您还必须配置 TypeScript 以识别对 View 的方法扩展。只需将以下行添加到项目根目录中的 references.d.ts 即可

/// <reference path="./node_modules/nativescript-effects/index.d.ts" />

然后获取您要动画化的视图的引用，并调用以下列出的函数之一。此视图可以是 NativeScript View 类的任何子类，如 Button、Label 等。

var myLabel = page.getViewById('lblMessage');
myLabel.fadeIn()
       .then(function(){
           myLabel.fadeOut(10000);
       });

API

以下列出的所有扩展都返回一个 Promise，它将在成功完成后调用其 then 函数。

.fadeIn([duration])

描述：通过淡入使视图可见。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

.fadeOut([duration])

描述：通过淡出隐藏视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

.fadeTo([duration], [opacity])

描述：逐步调整视图的不透明度。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

opacity（默认：1）类型：数字
介于 0.0 和 1.0 之间的数字

.fadeToggle([duration])

描述：通过动画不透明度显示或隐藏视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

.floatIn([duration], [direction])

描述：以一定方向滑动显示视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

direction（默认：'up'）类型：字符串
表示浮动的方向的常量。可以是 'up'、'down'、'left'、'right'。

.floatOut([duration], [direction])

描述：以一定方向滑动隐藏视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

direction（默认：'down'）类型：字符串
表示浮动的方向的常量。可以是 'up'、'down'、'left'、'right'。

.hide([duration])

描述：隐藏视图。

duration（默认：1）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

.shake()

描述：前后摇晃视图，就像摇头“不”一样。

.show([duration])

描述：显示视图。

duration（默认：1）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

.slideDown([duration], [distance])

描述：以滑动动作显示视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

distance（默认：-100）类型：数字
确定视图将滑动多少点。

.slideUp([duration], [distance])

描述：以滑动动作隐藏视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

distance（默认：-100）类型：数字
确定视图将滑动多少点。

.slideToggle([duration])

描述：根据当前滑动状态滑动视图向下或向上。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

.spring([duration], [animation]) <- 目前仅限 iOS

描述：以类似弹跳的运动移动视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。

动画（默认值：见下方的默认对象）类型：对象
一个动画定义对象，如以下“弹簧动画”部分所述。

默认动画

        animation = {
                translate: {
                    x: 0,
                    y: -100
                },
                scale: {
                    x: 2,
                    y: 2
                },
                duration: msDuration,
                delay: 0,
                dampingRatio: 0.3,
                velocity: 2.0,
                options: null
            };

###弹簧动画选项

  • translate：x 和 y 距离平移动画
  • scale：x 和 y 缩放动画
  • delay：十进制数（以毫秒为单位）
  • dampingRatio：浮点数
  • velocity：浮点数
  • options：对象（UIViewAnimationOptions）

完整的选项集在 Apple 开发者网站 上有文档说明。修改这些选项会产生不同的弹簧效果。以下是上述截图的示例函数调用（尽管由于 GIF 不是每秒 60 帧，所以在模拟器或实际设备上看起来要平滑得多）。

###示例用法

myView.spring(10000, {
            translate: {
                x: 0,
                y: -100
            },
            scale: {
                x: 2,
                y: 2
            },
            delay: 0,
            dampingRatio: 0.3,
            velocity: 2.0,
            options: null,
        });

.toggle([duration])

描述： 显示或隐藏视图。

duration（默认：400）类型：数字或字符串
一个字符串或数字，确定动画将运行多长时间。数字是毫秒。字符串是常量值 'fast' 或 'slow'。