web-dev-qa-db-ja.com

モーション/アニメーション情報をどのように文書化し、開発者と共有しますか?

今プロジェクトがあります。開発者の人と一緒にウェブサイトを構築しています。 Zeplinを使用してすべてのアセットを共有しました。しかし、これは初めてなので、すべてがどのように動作するかについても共有する必要があります。私は行動と価値観に基づいた一連のルールを持っていますが、それを行う適切な方法は何ですか。視差効果、その他すべて?

1

私はZeplinについては知りませんが、UXアニメーションを作成するためにAE、Pixate、Flintoなどを使用しています。デモの動作と必要な効果を開発者に伝える必要がある場合は、設定したモーション、パラメーター、数値を記録しました。このような:

  1. "confirm"ボタンが1秒間に30ピクセルずつ下がり、Y軸の値が100から130に変更されます。

  2. フローティングボタンは2秒後に徐々に消え、不透明度の値が80%から0%に変わります。その間、サイズは100%から0%に変わりました。

つまり、それはすべて

1。オブジェクト+変更(位置、スケール、回転、色、透明度)+時間

2。1つのオブジェクトの複数の変更または異なるオブジェクトが同じ時間間隔で発生するかどうか

複雑すぎる場合は、タイムラインを参考にしてください。

私があなたの意味を理解し、これが役立つことを願っています:)

2
Danlin Chen

それはすべて自分のスキルセットに依存します。

私はAEを知っているので、好きな2Dアニメーションを作成できます。次に、 Lotti (以前のBodymovin)を使用して、アニメーションをjsonファイルに変換し、開発者がWebサイトで簡単に使用できるようにします。複雑なアニメーションがなく、Lottieをロードするとパフォーマンスが低下する場合は、Firefoxのツールで生成されたjson Lottieをsvgスプライトに変換することで、非常に軽いアニメーションと優れたパフォーマンスを実現できます。

私がAEを知らなかったとしたら、開発者に送信する適切なリファレンスを見つけたでしょう。参照はいくつかの点で優れています問題。良いリファレンスは、まずその動作を設計したときに見ていたものであり、要求されたアニメーションを使用できるWebサイトがない場合は素晴らしいです。そのような参照を探すのに適した場所は、ソリューションとアプリケーションの例を提供する this 優れたWebサイトです。

0
VitskyDS