NativeScript 缓动

一个 NativeScript 插件，本地封装 tween.js，一个易于动画的缓动引擎，结合了优化的 Robert Penner 公式。


iOS 示例	Android 示例

安装

从项目的根目录运行以下命令

ns plugin add @nativescript-community/tween

配置

无需进一步配置。

API

此插件导出与 tween.js 相同的 API。

请参阅官方 tween.js 用户指南以获取更多示例和信息。

目前不支持分组、链式调用、重复等。仅支持基本缓动。

任何数值视图属性理论上都应能够进行缓动。所有这些尚未经过测试，但一些常见的工作示例包括

宽度
高度
旋转
缩放X
缩放Y
平移X
平移Y
不透明度

以下为可用的缓动选项

TWEEN.Easing.Linear.None
TWEEN.Easing.Quadratic.In
TWEEN.Easing.Quadratic.Out
TWEEN.Easing.Cubic.In
TWEEN.Easing.Cubic.Out
TWEEN.Easing.Quartic.In
TWEEN.Easing.Quartic.Out
TWEEN.Easing.Quintic.In
TWEEN.Easing.Quintic.Out
TWEEN.Easing.Sinusoidal.In
TWEEN.Easing.Sinusoidal.Out
TWEEN.Easing.Exponential.In
TWEEN.Easing.Exponential.Out
TWEEN.Easing.Circular.In
TWEEN.Easing.Circular.Out
TWEEN.Easing.Elastic.In
TWEEN.Easing.Elastic.Out
TWEEN.Easing.Back.In
TWEEN.Easing.Back.Out
TWEEN.Easing.Bounce.In
TWEEN.Easing.Bounce.Out

在 Angular 中使用

以下是一个在 Angular 项目中运行缓动的简单示例。

在组件的 HTML 文件中创建一个要动画化的视图以及一个触发它的按钮。

<StackLayout>
    <Button text="Start Animation" (tap)="startTween()" verticalAlignment="top"></Button>

    <AbsoluteLayout #box width="30" height="30" backgroundColor="red" horizontalAlignment="center" verticalAlignment="center"></AbsoluteLayout>
</StackLayout>

在组件的类型脚本文件中使用以下方式引用要动画化的视图（并添加所需的导入）

boxRef: AbsoluteLayout;
@ViewChild("box", { static: true }) boxElementRef: ElementRef;

ngOnInit(): void {
    this.boxRef = this.boxElementRef.nativeElement;
}

在组件的类型脚本文件中导入 tween 模块

import { TWEEN } from '@nativescript-community/tween';

创建一个包含运行缓动调用的函数。

startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log("The tween has stated...");
        })
        .onComplete(() => {
            console.log("The tween has completed...");
        })
        .onUpdate(obj => {
            this.boxRef.width = obj.value;
        })
        .start();
}

这就足够了！现在，当您点击按钮 开始动画 时，盒子的宽度应从 30 变为 300。

查看 demo-ng 目录以获取更高级的示例。

在 Vue 中使用

以下是在 Vue 项目中运行缓动的简单示例。

创建一个要动画化的视图以及一个触发它的按钮。

<StackLayout>
    <Button text="Start Animation" @tap="startTween" />
    <AbsoluteLayout ref="box" width="30" height="30" backgroundColor="red" horizontalAlignment="center" verticalAlignment="center"></AbsoluteLayout>
</StackLayout>

在组件的 computed 部分引用要动画化的视图

// ...
computed: {
    boxRef(){
        return this.$refs.box.nativeView;
    }     
},
// ...

在组件中导入 tween 模块

import { TWEEN } from '@nativescript-community/tween';

创建一个包含运行缓动调用的函数。

startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log("The tween has stated...");
        })
        .onComplete(() => {
            console.log("The tween has completed...");
        })
        .onUpdate(obj => {
            this.boxRef.width = obj.value;
        })
        .start();
}

这就足够了！现在，当您点击按钮 开始动画 时，盒子的宽度应从 30 变为 300。

查看 demo-vue 目录以获取更高级的示例。

在 Svelte 中使用

以下是在 Svelte 项目中运行缓动的简单示例。

创建一个要动画化的视图以及一个触发它的按钮。

<stackLayout>
    <button text="Start Animation" on:tap="{startTween}" />
    <absoluteLayout bind:this="{boxRef}" width="30" height="30" backgroundColor="red" horizontalAlignment="center" verticalAlignment="center"></absoluteLayout>
</stackLayout>

在组件中引用要动画化的视图。

let boxRef: AbsoluteLayout;
onMount(() => {
    boxRef = boxRef.nativeView;
})

在组件中导入 tween 模块

import { TWEEN } from '@nativescript-community/tween';

创建一个包含运行缓动调用的函数。

function startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log("The tween has stated...");
        })
        .onComplete(() => {
            console.log("The tween has completed...");
        })
        .onUpdate(obj => {
            boxRef.width = obj.value;
        })
        .start();
}

这就足够了！现在，当您点击按钮 开始动画 时，盒子的宽度应从 30 变为 300。

查看 demo-svelte 目录以获取更高级的示例。

在 React 中使用

以下是一个在React项目中运行tweens的非常简单的示例。

创建一个要动画化的视图以及一个触发它的按钮。

<stackLayout>
    <button text="Start Animation" onTap={startTween} />
    <absoluteLayout ref={boxRef} width="30" height="30" backgroundColor="red" horizontalAlignment="center" verticalAlignment="middle"></absoluteLayout>
</stackLayout

在组件中引用要动画化的视图。

const boxRef = React.useRef<NSVElement<AbsoluteLayout>>(null);

在组件中导入 tween 模块

import { TWEEN } from '@nativescript-community/tween';

创建一个包含运行缓动调用的函数。

function startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log("The tween has stated...");
        })
        .onComplete(() => {
            console.log("The tween has completed...");
        })
        .onUpdate(obj => {
            boxRef.current!.nativeView.width = obj.value;
        })
        .start();
}

这就足够了！现在，当您点击按钮 开始动画 时，盒子的宽度应从 30 变为 300。

在demo-react目录中查找更高级的演示。

示例

此存储库包括Angular、Vue.js、Svelte和React演示。为了运行这些演示，请在您的shell中执行以下操作：

$ git clone https://github.com/@nativescript-community/tween
$ cd tween
$ npm i
$ npm run build
$ cd demo-ng # or demo-vue or demo-svelte or demo-react
$ ns run ios|android