はじめに

NativeScript(NativeScript-Vue) でアニメーションの利用方法。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. CSS アニメーション
      1. 背景色の変更
      2. 回転
      3. 無限に繰り返し
    2. コードでのアニメーション
    3. ライブラリ
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$ node -v
v12.7.0

$ npm -v
6.14.5

$ tns --version
6.5.0

$ grep -C1 version package.json
"tns-android": {
  "version": "6.5.0"
},
"tns-ios": {
  "version": "6.5.0"
}

$ tns plugin
Dependencies:
┌───────────────────────────┬────────────────┐
│ Plugin                    │ Version        │
│ @vue/devtools             │ ^5.3.3         │
│ nativescript-socketio     │ ^3.3.1         │
│ nativescript-vue-devtools │ ^1.4.0         │
│ nativescript-toasty       │ ^3.0.0-alpha.2 │
│ @nativescript/theme       │ ^2.2.1         │
│ nativescript-vue          │ ^2.6.1         │
│ tns-core-modules          │ ^6.5.1         │
└───────────────────────────┴────────────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.1.0  │
│ nativescript-dev-webpack           │ ^1.5.1  │
│ nativescript-vue-template-compiler │ ^2.6.0  │
│ nativescript-worker-loader         │ ~0.11.0 │
│ node-sass                          │ ^4.13.1 │
│ vue-loader                         │ ^15.9.1 │
└────────────────────────────────────┴─────────┘

詳細

基本的には公式ドキュメントを参照して進めると良い。

CSS でのアニメーションと、コードでのアニメーションとがある。

CSS アニメーション

参考:

背景色の変更

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="*" rows="*">
      <Label class="message red_to_green" text="Hello" col="0" row="0" />
    </GridLayout>
  </Page>
</template>

<style scoped>
  @keyframes red_to_green {
    0% { background-color: red; }
    50% { background-color: green; }
    100% { background-color: red; }
  }
  .red_to_green {
    animation-name: red_to_green;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
</style>

回転

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="*" rows="*">
      <Label class="message rotation" text="R" col="0" row="1" />
    </GridLayout>
  </Page>
</template>

<style scoped>
  @keyframes rotation {
    0% { transform: rotate(0); }
    50% { transform: rotate(180); }
    100% { transform: rotate(360); }
  }
  .rotation {
    /* Shorthand も利用可能(期待通りにならないことがあるので注意) */
    /* animation: rotation 2s infinite 0; */
    animation-name: rotation;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
</style>

無限に繰り返し

参考: javascript - Nativescript rotate animation with infinite iteration not working - Stack Overflow

以下のように 0%, 100% で書いてると、無限に繰り返すアニメーションが何故か途中で止まる。(自分の環境だと Android だけ止まる)

1
2
3
4
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

以下のように 99.9% を追加すると止まらなくなる。

1
2
3
4
5
@keyframes rotate {
  0% { transform: rotate(0deg); }
  99.9% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

コードでのアニメーション

参考:

触る機会があれば書く。

ライブラリ

ひとまずググって出てきた情報を貼っておく。(自分はまだ触ってないので各自で要確認)

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list