ここで ハッシュタグ 、私たちの顧客は、ソーシャルメディアコンテンツを確実に管理するために私たちに依存しています。 Sproutのお客様は、モバイルiOSおよびAndroidアプリケーションを使用して、 外出先でのソーシャルメディア 。 Androidメッセージを更新することを決定したときサポートするためにエクスペリエンスを作成する 出版 ツイートに複数の画像が添付されているため、作成画面に表示されていない場合でも、複数の画像が添付されていることをユーザーに明確に伝えたいと考えました。



デザインソリューション：アニメーションを使用して画面外の画像を表示する

私たちのデザインとモバイル画面の制約を考えると、添付された画像が画面外に存在する可能性がありました。これは理想的ではありませんが、作成画面でサポートされている機能の密度を考えると、必要な譲歩でした。画像が実際に画面外にある場合は、画像のリストがスクロール可能であることを示す水平方向の「バウンス」アニメーションを実装することにしました。



実装の選択：ObjectAnimator + EasingInterpolator

Androidの基本的なアニメーションをサポートするメカニズムはたくさんあります。コードでの構成が必要なものもあれば、xmlでの構成が必要なものもあります。代替案から選択する際に、下位互換性（sdkバージョン15以降をサポート）、実装の単純さ、および構成可能性を優先することにしました。最終的に、私たちはの組み合わせを使用することにしました ObjectAnimator そして EasingInterpolator 。これらは両方ともJavaコードで構成でき、最終的には開発者にとってより使いやすくなります。構文はよく知られており、アニメーションロジックはコードベースの1つの場所で完全に定義できます。

ObjectAnimatorは、ビューのプロパティの変更を可能にするAndroidフレームワークによって提供されるクラスです。 ObjectAnimatorのデフォルトの補間器の動きは、このユースケースでは自然に感じられなかったため、さまざまな補間モデルを提供する便利なライブラリであるEasingInterpolatorを使用することにしました。

android-bounce-animation-easing-sample

バウンスアニメーションコード

private void doBounceAnimation(View targetView) { ObjectAnimator animator = ObjectAnimator.ofFloat(targetView, 'translationX', 0, 25, 0); animator.setInterpolator(new EasingInterpolator(Ease.ELASTIC_IN_OUT)); animator.setStartDelay(500); animator.setDuration(1500); animator.start(); }

幸い、この動作を処理するコードは非常に簡潔です。 1行目では、targetViewをアニメーション化する方法を指定しています。この場合、targetViewの「translationX」プロパティを変更します。これは、レイアウト後のビューのx位置です。初期位置からの0dpのオフセットから右の25dpのオフセットまでアニメートし、最終的には元の0dpのオフセットに戻ります。

2行目では、必要な補間のタイプを指定しています。さまざまな補間モデルを試してみましたが、最終的にはEase.ELASTIC_IN_OUTがユースケースに最適であると判断しました。

作成中のハッシュタグAndroidバウンスアニメーション

Androidでプロパティアニメーションをサポートする方法の詳細については、 プロパティアニメーション開発者ドキュメント 。



動作中のアニメーション

モバイルの作成エクスペリエンスの更新に本当に満足しています。今後も、レスポンシブビジュアルインターフェイスでモバイルエクスペリエンスを充実させる予定です。私たちと一緒にこの種のものに取り組むことに興味がありますか？来て 俺たちと一緒に仕事しようよ 私たちのAndroidモバイルチームで！

友達と共有してください: