ティラノスクリプト：アニメーションをする[anim]と[kanim]の違い

　まず初めに。この記事は公式を見ながらほとんど書き写したに等しい記事になっています。スクリプト見なくてもいいから違いだけもっかい見たいわ！って方はご覧ください。もしもいやいや、公式見に行くわ！って方はこちらへどうぞ。

キーフレームアニメ-動作デモ- ティラノスクリプト｜スマホ対応のノベルゲームエンジン。無料

本格的なノベルゲームが作れるツール。利用作品は２００００作品以上

　さて、ティラノスクリプトでアニメーションを使う為には[anim]タグと[kanim]タグの２パターンがあるらしいですよ。でもこの２つ、一体何が違うの？ってことで、チュートリアルを見ながら学んだことをここに書き連ねて行こうと思います！

　ちなみに[anim]についての記事はこちら！

　[kanim]についてはこちらとこちらの記事で読めます。…が、2022.12.03追記します。ティラノスクリプトにはもう１つアニメーションをする為のタグがありました。強力な奴です。

[anim]と[kanim]は仕組みが違う
1. [anim]はjQuery
2. [kanim]はCSSアニメーション
[anim]と[kanim]の良い点
注意点

[anim]と[kanim]は仕組みが違う

[anim]はjQuery
[kanim]はCSSアニメーション

[anim]はjQuery

　うん、jQueryって何？ってことで調べてみました。

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる^[2]。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。

wikiより

　（　＾ω＾）・・・うん。どゆこと？まあ楽したいときに良いのかな？ってことは分かりましたが。

jQueryはWebサイトに動きを持たせる際に使われます。
Webサイトでテキストや画像がフェードインしたりといった動きを表現する場合に用いられます。jQueryはJavaScriptの手助けをしてくれます。

　それはたまに見るやつ。ふわ～っと写真が出て来るHPとかありますよね。あれ良いなぁと思いながら見てたけど、あれってJQueryだったんだ！なるほど！
　javascript（ティラノスクリプトで表現できないことをたまにjavascriptでやりますが）を手助けしてくれるものがJQueryのようです。なるほど納得！それから生まれたのが[anim]なのね！

[kanim]はCSSアニメーション

自動でアニメーションの再生が出来る
ループ可能
アニメーション再生後のプロパティを決められる
簡単（JavaScriptを知らなくてもCSS知識があればOK）
軽い（誰が組んでもシステム不可を高めにくい）
パフォーマンス効率が良い（ブラウザが最適化する）

　詳しいことはこの記事に載ってそうでした。

初心者OK! CSSアニメーションで動きのあるwebサイトにする方法をまとめました

Webサイトにはマウスを画像に重ねると文字が出てくるなどの“動き”があります。実はこうしたアニメーションはCSS基礎知識があれば簡単に作ることが出来ますよ！CSSアニメーションの概要と学習・実装に役立つサイトを紹介します。

良く分かりませんが、とりあえず違うと思われるのは、プログラムの違いなのかなって。例えばC++とかルビーとか、そういうのが違うだけなのかなっていうことが分かりました。

[anim]と[kanim]の良い点

[anim]の良い点

扱いやすい
イージング（動作のバリエーション）が豊富
文字[ptext]に対してアニメーションが出来る

扱いやすい

　[kanim]は事前に定義をする必要がありますが、[anim]はポーンと使えます。アホみたいな顔して使えます。

;多分これが事前定義↓
[keyframe name=”flower_rotate“]
[frame p=”100%” rotate=”360deg”]
[endkeyframe]

;定義したものをやっと使える
[kanim name=”circle” time=”30000″ keyframe=”flower_rotate” count=”infinite” easing=”linear“]

;一方[anim]はいきなりドーンでOK。しかもeffectもそのままの名前で指定できる～！
[anim name=”circle” time=” 1500″ width=”300″ height=”300″ left=”-=150″ top=”-=150″ effect=”easeOutElastic”]

イージングの指定の仕方が[kanim]は面倒

　[kanim]はイージング（この後説明）の指定の際に表現の方法が違います。アホみたいな顔して使えません。イージングの値はcubic-bezierというもので、こんな感じで指定します↓

値	どういう動きなのか
ease	【初期値】開始と完了を滑らかにする
linear	一定の速度
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まりゆっくり終わる
cubic-bezier(x1,y1,x2,y2)	数値で細かく指定

https://qiita.com/96usa_koi/items/6f313f1d664806a77313より引用

イージング（動作のバリエーション）が豊富

　画像の位置や大きさがころころと変わる場合（金魚すくいの金魚がすいっ、すいっと動くような感じとか、ポイがふいふいと動いて、持ち上げたり引いたり…みたいな場合）などの動きがすごくスムーズです。動作の種類としてはこんなにあります！

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a con...

[kanim]の良い点

動作の滑らかさ
操作項目の豊富さ
無限ループアニメ

動作の滑らかさ

　[anim]はずいっと動きますが、[kanim]は芝居（台座の上にキャラクターの紙を貼り付けて割りばし持って動かしているみたいな）のときにキャラクターが動きます。大きな・大量の画像を動かすときは[kanim]の方が良いかもってことです。[anim]まで多くはありませんが、一応こんな感じで動くことは出来ます。