openFrameworks addon作りました「ofxEasingGUI」
GUIのグラフエディタでイージングのついたアニメーションを付けれるopenFrameworksのaddonを作りました。
なんとなくの作れるんじゃないかという思いつきから、
ちょうど1週間でとりあえず公開まで急ぎで持ってきました。
下記のリンクからダウンロード先のgithub
github ofxEasingGUI
インスピレーション
After Effectsの有料scriptのFlowからインスピレーションを受けて作成しました。
After Effectsはキーフレームという概念でアニメーションを作っていきます。キー呼ばれるプロパティの情報（例えば位置のx,y）を2点間で補間するようなアニメーションです。
openFrameworksでキーフレームのような概念を持ち込むのはナンセンス。
それなら、そもそもAfter Effectsで作ればいいので。
creative codingならではのコード表現とGUIアニメーションの狭間に入れるようなツールとしてイメージしてみました。
特徴
最初に難点として上がったのは、メインウィンドウないし、サブウィンドウでGUIのグラフエディタを表示させて、起動させる事にいちいちイージングを設定しなければいけないのか？
また、グラフエディタは本番は見せたくない。
どうしよう？
ここを解決するために外部ファイルにイージングのアニメーションデータを保存しようという解決になりました。ここではJSONファイルを使っています。（ofxJSONにこのaddonでは依存しています。）合わせてダウンロードしてください。
github ofxJSON
こうすることで、制作時にグラフエディタを表示、調整、イージングデータの作成。
グラフエディタが必要なくなったら、全て非表示にし、JSONファイルからイージングデータを読み込みアニメーションだけ再現できるというデザインにしました。
これらのデモンストレーションは、example_export_JSON_fileとexample_apply_JSON_fileで試せるのでぜひそちらで確認してみてください。
基本的にはコメントアウトで消すだけでいいので再調整もできるようになっていると思います。
または、exampleファイルのように調整用、本番用に分けて管理するのもいいと思います。
日本語ドキュメント
取り急ぎの日本語ドキュメントも作りました。
紹介できていない、一つ一つの関数についてのドキュメントはゆっくり作っていきたいと思います。
exampleファイルでは色々と関数を使っているので、exampleファイルも合わせて参照してください。
もし取り急ぎ知りたい方がいましたらTwitter、コメント等で連絡をください
ofxEasingGUIの日本語ドキュメント
ダウンロード
githubで
ofxJSONとofxEasingGUIをaddonとしてダウンロードしてください。
不具合
もし不具合・分からないことがありましたら、是非連絡ください。
twitter or noteコメント等で大丈夫です。
この記事が気に入ったらサポートをしてみませんか？