アニメーション
アプリケーションの魅力を向上させる方法の1つは、アニメーションを追加することです。 NativeScriptはシンプルで簡単ですが、アプリケーションのほぼすべてのネイティブ要素をアニメーション化できるほど強力なAPIを公開しています。
便宜上、アニメーションを作成する2つの方法を公開しています。
ここでは、NativeScriptで実現できるさまざまなアニメーションを示す詳細なサンプルセットを紹介します。
Hello worldサンプル
例1では、ボタンの背景色を「赤」から「緑」に変更します。 JavaScriptまたはTypeScriptコードを使用して、以下を実行できます。
例1：コードで背景色アニメーションを変更します。
// Import color module
var colorModule = require("tns-core-modules/color");
view.backgroundColor = new colorModule.Color("red");
view.animate({ backgroundColor: new colorModule.Color("green"), duration: 2000 });// Import color module
import { Color } from "tns-core-modules/color";
view.backgroundColor = new Color("red");
view.animate({ backgroundColor: new Color("green"), duration: 2000 });NativeScript Playgroundでこのアニメーションを試す
例2に示すように、次の定義を使用して、CSSで同じアニメーションを表現できます。
例2：CSSを使用して背景色アニメーションを変更します。
@keyframes example {
from { background-color: red; }
to { background-color: green; }
}
.view {
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}<!-- Apply CSS class to element to trigger CSS animation -->
<Label class="view" text="{N}"></Label>NativeScript Playgroundでこのアニメーションを試す
NativeScriptでは、次のプロパティをアニメーション化できます。
- opacity
- backgroundColor
- translateX および translateY
- scaleX および scaleY
- rotate
すべてのアニメーションで、次のプロパティを制御できます。
- duration ：アニメーションの長さ。
- delay ：アニメーションの開始を遅らせる時間。
- iterations ：アニメーションを再生する回数。
- タイミング機能 ：アニメーションの速度曲線。 利用可能なオプションを以下に定義します。
- originX および originY ：ビューの変換に使用される原点のXおよびYコンポーネント。
アニメーション曲線
デフォルトでは、アニメーションは加速または減速せずに直線速度で移動します。 これは不自然に見え、オブジェクトが最高速度に達するまでに時間がかかり、すぐに停止できない現実の世界とは異なる場合があります。 アニメーションカーブ（イージング関数とも呼ばれる）は、アニメーションに慣性の錯覚を与えるために使用されます。 継続時間の割合を変更することにより、アニメーションの速度を制御します。 NativeScriptには、多数の事前定義されたアニメーションカーブが付属しています。
- linear ：最も単純なアニメーションカーブは線形です。 アニメーションの実行中は一定の速度を維持します。
- Ease-in ： イーズインカーブにより、アニメーションがゆっくりと開始され、進行するにつれてスピードが上がります。
- Ease-out ： イーズアウトカーブは、アニメーションをすばやく開始し、完了するとスローダウンします。
- Ease-in-out ： イーズインイーズアウトカーブは、アニメーションをゆっくり開始し、その期間の途中で加速し、完了前に再び遅くします。
- Spring ：スプリングアニメーションカーブにより、アニメーションはスプリング（バウンス）エフェクトを生成します。
NativeScriptでは、アニメーションカーブはAnimationCurve列挙体で表され、アニメーションのカーブプロパティで指定できます。 CSSでは、animation-timing-functionプロパティを使用してアニメーションカーブを定義します（例3を参照）。
例3：アニメーションのタイミング機能をカスタマイズする方法
var enums = require("tns-core-modules/ui/enums");
view.animate({
translate: { x: 0, y: 100},
duration: 1000,
curve: enums.AnimationCurve.easeIn
});import {AnimationCurve} from "tns-core-modules/ui/enums";
view.animate({
translate: { x: 0, y: 100},
duration: 1000,
curve: AnimationCurve.easeIn
});.view {
animation-name: example;
animation-duration: 1;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
@keyframes example {
from { transform: translate(0, 0); }
to { transform: translate(0, 100); }
}NativeScript Playgroundでこのアニメーションを試す
3次ベジェ曲線の2つの制御点のXおよびYコンポーネントを渡すことにより、独自のアニメーション曲線を簡単に作成できます（例4を参照）。 ベジェ曲線の使用は、コンピューターグラフィックスで滑らかな曲線を作成するための一般的な手法であり、ベクトルベースの描画ツールで広く使用されています。 cubicBezierメソッドに渡される値は、曲線の形状を制御します。 アニメーションの速度は、結果のパスに基づいて調整されます。
カスタムアニメーションタイミング関数に必要なcubicBezier値を見つけるには、 cubic-bezier.comのビジュアルツールを使用してください。 好みのアニメーションパスが見つかったら、キュービックベジェ値をコピーして、AnimationCurve.cubicBezier関数に貼り付けます。 4つの数字が必要です（アニメーションの2つのポイントそれぞれのX、Y座標）。
例4：3次ベジェを介して独自のアニメーションカーブを作成する方法
var enums = require("tns-core-modules/ui/enums");
view.animate({
translate: { x: 0, y: 100 },
duration: 1000,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});import {AnimationCurve} from "tns-core-modules/ui/enums";
view.animate({
translate: { x: 0, y: 100 },
duration: 1000,
curve: AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});.view {
animation-name: example;
animation-duration: 1;
animation-timing-function: cubicBezier(0.1, 0.1, 0.1, 1);
animation-fill-mode: forwards;
}
より詳細な例は、 アニメーションサンプルのページで入手できます。
originXとoriginYを使用した回転
より複雑なアニメーションを作成するには、選択したビューが変換される中心点を変更する必要がある場合があります。 これは、View の originX および originY プロパティを使用して実現できます。
例5：ビューをその中心の周りに回転させます。 ビューの中心は originX および originY プロパティを介して変更されます。
view.originX = 1; // default 0.5 (center), 0 is most left, 1 is most right
view.originY = 0.5; // default 0.5 (middle), 0 is top, 1 is bottom
view.animate({
rotate: 360, // will take into account originX and originY
duration: 1000
});view.originX = 1; // default 0.5 (center), 0 is most left, 1 is most right
view.originY = 0.5; // default 0.5 (middle), 0 is top, 1 is bottom
view.animate({
rotate: 360, // will take into account originX and originY
duration: 1000
});