Tweeningのパラメータ‐tweenerのお勉強(3)‐
※外部ライブラリ学習の目次はこちらです。
※使用しているTweenerのバージョンは1.31.74です。
前回の記事にて、tweenerの関数であるaddCaller・addTweenについて簡単に紹介させていただきました。
今回はその続きです。この二つの関数にて使用するパラメータについて書きます。
Tweener Documentation and Language Reference及びこのサイト内のTweening parametersに書かれている内容を元に一覧表を作成してみました。
使う上で必要そうな情報だけ抜粋しています。
もしも解釈謝り等ミスありましたら指摘いただければ幸いです。
addTween・addCallerパラメータ一覧
| 名称 | 型 | 概要 | addTween | addCaller |
| base | Object Array | パラメータをまとめたObjectまたはArray ※使用例後述 | ○ | ○ |
| count | Number | onUpdateにて指定した関数の呼び出し回数 | ○ | |
| delay | Number | 処理開始前の待ち秒数 | ○ | ○ |
| onComplete | Function | 処理が完了した際に呼び出す関数 | ○ | ○ |
| onCompleteParams | Array | onCompleteにて指定した関数に渡す引数 | ○ | ○ |
| onCompleteScope | Object | onCompleteにて指定した関数の参照Object(thisで見るObject)の変更 ※指定しない場合は処理対象のObject | ○ | ○ |
| onError | Function | エラーが発生した際に呼び出す関数 | ○ | ○ |
| onErrorScope | Object | onErrorにて指定した関数の参照Object(thisで見るObject)の変更 ※指定しない場合は処理対象のObject | ○ | ○ |
| onOverwrite | Function | 処理実行中に再度処理を開始した際に呼び出す関数 | ○ | ○ |
| onOverwriteParams | Array | onOverwriteにて指定した関数に渡す引数 | ○ | ○ |
| onOverwriteScope | Object | onOverwriteにて指定した関数の参照Object(thisで見るObject)の変更 ※指定しない場合は処理対象のObject | ○ | ○ |
| onStart | Function | 処理開始直前に呼び出す関数 | ○ | ○ |
| onStartParams | Array | onStartにて指定した関数に渡す引数 | ○ | ○ |
| onStartScope | Object | onStartにて指定した関数の参照Object(thisで見るObject)の変更 ※指定しない場合は処理対象のObject | ○ | ○ |
| onUpdate | Function | 処理中のObjectに対して処理が行われる度に呼び出す関数 | ○ | ○ |
| onUpdateParams | Array | onUpdateにて指定した関数に渡す引数 | ○ | ○ |
| onUpdateScope | Object | onUpdateにて指定した関数の参照Object(thisで見るObject)の変更 ※指定しない場合は処理対象のObject | ○ | ○ |
| rounded | Boolean | 処理中に数値を整数化するかどうかの指定 ※pxを小数値で指定することによるtextデータの表示の崩れを防ぐため等に使用 | ○ | ○ |
| skipUpdates | Number | updateを何回抜かしで実行するかの指定 例として、この数値を1とすると、単位時間における処理回数が1/2になる ※開発者が低速状況での表示を確認する際などに使用 | ○ | |
| time | Number | 処理秒数 | ○ | ○ |
| transition | String Function | 処理の変化度合いの指定 例：一定速度、速い→遅い、遅い→速い、等 ※詳しくは後述 | ○ | ○ |
| transitionParams | Object | 処理の変化に対しての追加パラメータの指定 | ○ | ○ |
| useFrames | Boolean | 処理をする際にフレームを基準単位として動くように指定 ※trueに設定した場合、timeやdelayの値がフレーム数として扱われる ※特に理由がなければtrue指定はしないこと | ○ | ○ |
| waitFrames | Boolean | upDate処理の前に1フレーム待つかどうかの指定 | ○ | ○ |
baseパラメータの例
一つのプログラム内で何箇所もaddTweenやaddCallerを呼ぶとします。
そして、そのどの箇所においても、ある一定のパラメータを渡すと仮定しましょう。
この際、パラメータが一つや二つならまだしも、多数あるなら、同じパラメータを複数箇所で渡すのはプログラム的に美しくないです。
修正が入った際の手間もばかになりません。
そんなときには、呼び出すパラメータをあらかじめObjectあるいはArrayにてまとめて定義しておく方法があります。
そして、addTweenやaddCallerはbaseパラメータで受け取ります。
以下、そのコード例です(コード中のmy_mcが処理対象のムービークリップのインスタンス名です)。
//パラメータの定義 x座標350px y座標0px 不透明度0
var pro_obj:Object = {_x:350, _y:0, _alpha:0 };
//tweenの実施 pro_objにて定義したパラメータに加えて時間を5秒で指定
Tweener.addTween(my_mc, {base:pro_obj , time:5});
公式ページを見ていただくとわかりますが、ネストができたりパラメータの上書きができたり等、かなり汎用性高いようです。
transition
tweenerではアニメーションする際の変化に様々なバリエーションが用意されており、それをtransitionパラメータにて指定します。
目標に向かって一定速度で進んだり、あるいは一度通り過ぎてから戻ったりなど、基本パターンとして41種類です。
変化パターン一覧は公式ページ内のTransition Typesのコンテンツに用意されています。
(移動先のページにてグラフの上にCompleteというボタンがありますので、押してください。全表示されます)
グラフだとイメージがつきづらい方もいるかもしれませんので、実際の動きが見られる簡単なflash制作してみました。すぐ下です。
下のリストで希望のtransitionを選んでSTARTをクリックしてください。何度でも連続でできます。
どの効果も"4秒後に青い丸の上で止まる"のは同じですが、そこまでの経過が異なります。
flaファイルもありますのでよろしければご利用を(tweenerは含んでいません)。
以下、transition一覧です。
- linear
- easeInSine
- easeOutSine
- easeInOutSine
- easeOutInSine
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeOutInQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeOutInCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeOutInQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeOutInQuint
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeOutInExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeOutInCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeOutInElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeOutInBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
- easeOutInBounce
Tweenerサンプル‐tweenerのお勉強(4)‐
addTweenとaddCaller‐tweenerのお勉強(2)‐へ