Photoshop UXPで使えるアニメーション機能
UIを組み立てる上でもはや当たり前のアニメーション。派手で華々しいアニメーションとまで行かなくてもちょっとしたボタンの変化、チェックボックスの動きにも使われています。しかし2021年7月3日現在Photoshop UXPでのCSSによるアニメーション、transitionはサポートされていません。と言うわけでjsで動かすしかないのですがjsでも動くライブラリや機能があります。と言うわけでどのライブラリが動くか軽く調べてみました。
調べたのは以下のライブラリ、機能になります。
-
アニメーションライブラリー gsap
-
言わずとも知れた j-query
-
モダンブラウザーで実装の進んだweb animate API
ボックスが横に動くだけのサンプルで各種試してみました。
結論から言うと動いたのrequestAnimationFrameとgsapとj-queryになります。requestAnimationFrameはアニメーションのための基本的な機能ですがハードルが高いでしょう。gsapはこの中で一番使いやすいのかも知れないけど開発したプラグインに値段をつけて配布する場合は有料のライセンスが必要っぽいので気をつけてください。j-queryはもはや今更感がありますがこの中で一番お手頃で簡単なアニメーションの手段程度でしたら一番いいかも知れません。web animate APIはpolyfill使ってもダメでした。
今回あくまで簡単なテストをしただけなので実際の実装には細心の注意を払ってください。