【ティラノスクリプト】画像をanimで動かす【コピペでOK】
【ティラノスクリプト】画像をanimで動かす
アニメ/animeの命令、と言えばキャラが歩いたり、目をぱちぱちさせたり……といういわゆるセルアニメをイメージします。
なのでティラノスクリプトの「anim」という命令がずっと苦手でした。
使わないで済むならあえて触る必要もない……とほぼ手つかずでいたんですが、「タイトルロゴを出すのにせっかくなら動きをつけたいな」と思い立っていよいよ「anim」と向き合う時がきました
個人的には直感的じゃない「anim」
タイトルロゴといえば思い浮かぶのが、サッと上下左右から出てくる、ふわっと浮き上がる、中央から拡大してバーンってなる……などの基本的なあるある動作。
これらを例えば命令としてイメージすると「slide」「fade」「scale」とかでしょうかね。
なんかそんなような命令があるのかな、と思いきやそうではないんですね。
この段階で難しいなって詰んでいたんですが、今回はそれを乗り越えないと前に進めません。
ということでティラノの公式のデモを確認して、やりたいことに近いソースを見せてもらいました。（fadeはあるので割愛します）
結論から言うと、ソースを見てもわかりませんでした。
「なんでこれがこの動きになる？？」
なのでコピペで乗り切ります！！
（数値は動きの幅なのでお好きに調整）
上下左右から出てくる
;アニメのデモ
*anim_demo
;レイヤー1を表示
[layopt layer=1 visible=true]
;OK画像を表示
[image name=demo storage ="button/ok.png" layer="1" folder ="image" x=550 y=200]
animデモ[p]
下から出てくる[p]
;下から出てくる
[anim name=demo top="-=100" time=700]
[anim name=demo top="+=200" time=700]
[anim name=demo top="-=100" time=700]
上から出てくる[p]
;下から出てくる
[anim name=demo top="+=100" time=700]
[anim name=demo top="-=200" time=700]
[anim name=demo top="+=100" time=700]
左から出てくる[p]
;左から出てくる
[anim name=demo left="+=100" time=700]
[anim name=demo left="-=200" time=700]
[anim name=demo left="+=100" time=700]
右から出てくる[p]
;右から出てくる
[anim name=demo left="-=100" time=700]
[anim name=demo left="+=200" time=700]
[anim name=demo left="-=100" time=700]
ここまで[p]
数値をいじる際のルール？ソースを見ると分かる通り、どの動作も3つの命令で成り立っています。
最初と最後の数値の合計が真ん中に来るように調整すると思い通りの動作になりました。
そしてこの指定で動画のような動きになるのが理解できてないので、サンプルのソースがなければ絶対動かせないと思いました……。
拡大、縮小
anim専用のコマンドはないんだな、とわかったところで拡縮ならイメージできたのでやってみました。
ソース
;アニメのデモ *anim_demo ;レイヤー1を表示 [layopt layer=1 visible=true] ;OK画像を表示 [image name=demo storage ="button/ok.png" layer="1" folder ="image" x=550 y=200] animデモ2[p] 縮小[p] [anim name=demo width = "0" time=700] [wait time =700] 拡大[p] [anim name=demo width = "200" time=700] [wait time =700]
縮小は0に。拡大は0の状態からお好きなサイズに。
できてますね。できてるんですけど起点が画像の0座標なんですね（左上）
何の指定もしてないんだからそりゃそうだ、なのかもしれないんですけど、イメージしていたのは中心からの拡縮ですよね……。
と思っていたら公式デモに中心から広がるようなanimがありました！
このソースを参考にしたところ、座標の指定があったので左上の起点をズラしているんだな！ とわかりました。
中心から縮小・拡大
ソース
;OK画像を表示 [image name=demo storage ="button/ok.png" layer="1" folder ="image" x=550 y=200] animデモ2[p] 縮小[p] ;表示位置をあえて右にずらす（中心に戻っていくように見せる [anim name=demo width = "0" time=700 left =630 top =200] [wait time =700] 拡大[p] ;縮小した位置が右にずれているのを利用する [anim name=demo width = "200" time=700 left =550 top =200] [wait time =700]
サイズの変更と同時に表示の位置も指定することで、中心から縮小・拡大するように見せることができました！！
うううう！！！面倒くさい！！！！
起点の指定ができればいいのになぁ～～。
やれることは分かってもこの座標を調整するのに手間取って時間がかかりました。
そう頻繁にやる作業でもないので慣れるってこともなさそうなので、ネガティブなイメージしかないんですがｗ でも思ったように動かせるのは楽しいので！
さらなる演出【effect】
animを使った動きは他にもいろいろあると思いますが、現状はここにある動作があればやりたいことはできるかな～って感じです。
ただ、これらの動きに追加するeffect（演出）が沢山用意されているんですよね。
が、それも「ここにサンプルがあるよ」っていうサイトを見てもなんのこっちゃでした。
（それでイメージが掴める人が凄い……）
そこで公式デモで使われていた「ぴょんぴょん」ってなるeaseOutElasticを参考に、拡大する時に同じ「easeOut」の全命令を呼んでみたんですが、効果があった？のは
easeOutElastic、easeOutBack、easeOutBounceだけでした。
ほとんどが拡大時には使えない効果なのかな？？ じゃあいつ使うんだ？？
と言う感じで沢山用意されているものの、呼ぶだけでは動かない効果が多い？？
少し触ってみても使い処がいまいちわかりませんでした。
ひとまず、画像を動かすことはできたのでeffectについてはまた必要になったらさらに探ってみるかもしれません。
やっぱりティラノスクリプトのanimって難しいな！
Jane
ネットの世界は流れが速くて追いつくのが大変！
のんびり簡単にできる範囲で楽しみます
