web-dev-qa-db-ja.com

Android：アニメーションのカスタムビュー

編集2：新しい公式トレーニングガイド

開発者サイトは、UI関連のトレーニングガイドをリリースしました。これはインデックスです。

  • アニメーションの概要
  • プロパティアニメーションの概要
  • 描画可能なグラフィックをアニメーション化する
  • アニメーションを使用してビューを表示または非表示にする
  • アニメーションでビューを移動する
  • フリングアニメーションを使用してビューを移動する
  • ズームアニメーションを使用してビューを拡大する
  • 春の物理学を使用して動きをアニメーション化する
  • レイアウト更新の自動アニメーション
  • トランジションを使用してレイアウト変更をアニメーション化する
  • カスタム遷移アニメーションを作成する
  • アニメーションを使用してアクティビティを開始する

これらのいずれかに興味がある場合、これはリンクです： https://developer.Android.com/training/animation/

編集：回答の要約

Androidでアニメーション化する5つの方法を見つけました：

  1. プロパティアニメーション でViewのプロパティをアニメーション化して、rotation、alpha、scaleなど.

  2. フレームアニメーション（ AnimationDrawable ）：画像をすばやく変更して、アニメーションのように見せます

  3. ベクトル（ VectorDrawable ）およびanimateを使用して画像を設計し、 AnimatedVectorDrawable を使用して時間をかけて編集します。

  4. オーバーライドonDraw()をViewで実行し、キャンバスでペイントして Custom Drawing を実行します。

  5. Lottie を使用します。これは、After Effectsからアニメーションを再生します。 LottieFiles で利用できる多くのアニメーション。

ただし、Androidは、 Scenes などの一部の組み込みツールも提供します（これにより、 Views）、 _Shared elements_ を共有する複数のレイアウト間の遷移をアニメーション化します（これにより、Viewから別のActivityへ）など.

これらの機能の多く（すべてではないにしても）がAPI 21に追加されました。詳細については、ここ こちら をクリックしてください。

アニメーションに関する興味深い記事/ブログは次のとおりです。

最後に、いくつかの興味深いツール：

  • 記録するMacツールAndroid画面を GitHub に。

  • ビデオからGIFへのコンバーター online 。

注意

Androidはscale、alpha、rotate、translationなどの変換を提供します。

例

私が見て比較したい2つの例があります。

1-カスタムビューアニメーション

たとえば、 コップ一杯の水 または パスを描く 。

2-複雑なビューのアニメーション

たとえば、Android用のStackExchangeアプリ、ログイン画面のアニメーション（その上にビデオが見つからなかった、また、iOSで同じように動作するかどうかをチェックしなかった）。

質問

最初の例では、GIFを再生するか、少し時間をおいて手動で画像を変更する以外に方法はありません。

私はこれが事実であるとは思わない、それが私が尋ねたい理由である、（1）それがどのように行われるか知っていますか？

2番目の例については、1つのアイデアしか思いつかなかった。それはPathを設定し、それに応じてViewをanimate()の後に渡すことによって移動することである。 （2）これは可能ですか？

上記のほかに、（3）アニメーションを再生する他のテクニックを知っていますか？ （_Scene transitions_など-回答に記載されている-）

共有してください！ありがとうございました。

javaandroidandroid-layoutanimationandroid-animation
19
JonZarate

「コップ一杯の水を注ぐ」アニメーションは、フレームアニメーションを使用して実装すること、つまり画像を次々に変更することの直接的な候補です。 ここ この種のアニメーションを実装する方法を説明する素敵なブログの投稿を見ることができます。これは、基本的にあなたが言及した「水を一杯にする」と同じです：

enter image description here

他のアニメーションは一見すると少し難しいように見えます。

enter image description here

しかし、「レイアウト境界の表示」をオンにすると、そこには魔法がないことがわかります。基本的に、これはビューをある位置から別の位置に変換する単なる移動アニメーションです。このアニメーションの場合、難しいのは、並進座標を見つけるアルゴリズムを実装することです。その後、アニメーションは シーン遷移アニメーション を介した数行のコードです。

// assuming at this step all the views are at the initial position at x0, y0
TransitionManager.beginDelayedTransition(rootLayout);
// here set view coordinates to x1, y1 - the final position

トランジションフレームワークが残りの作業を行います。デルタを見つけてアニメーションを実行します。 ここLucas Rocha による素敵な記事があります。

10
azizbekian

アニメーションを再生する他のテクニックを知っていますか？

Androidでは、アニメーションを実装する基本的に3つの方法があります。

  • view.startAnimation(...)を使用するだけでビューをアニメーション化（スケール、アルファ、回転など）
  • ドローアブルのアニメーション化（ドローアブルによって異なりますが、これは、アニメーション化されたベクタードローアブルから フレームアニメーション までのあらゆるものです）
  • カスタムの描画とアニメーションを行う

フレームワークメソッドでビューをアニメーション化するだけの方が、いくつかのドローアブルアニメーションを作成するよりも簡単です。また、ドローアブル（xml）を作成する方が、カスタム描画を行うよりも簡単です。

数日前に出たばかりの宝くじについて説明しました。うまくいくか見ていきますが、とても有望そうです。フードの下でlottieはjsonを解析し、CanvasとPathを使用してカスタム描画を行います（上記の3番目の箇条書き）
After Effectsを手に入れることができる場合、これはおそらく複雑なアニメーション（およびクロスプラットフォーム！）の「最も簡単な」ソリューションです。

人々はアニメーションの共有も始めました、あなたはそれらをここで見つけることができます：
http://www.lottiefiles.com/

それがどのように行われるか知っていますか？

（1）ビデオは、カスタム描画を行うように見えます。

  • Path を描画して水で塗りつぶし、上をアニメートしながら波でアニメートし、白い斑点をいくつか振りかけます。
  • その周りにガラスの形を描く

これには、カスタムビューやドローアブルの作成、およびonDraw(Canvas) _Path.lineTo_のオーバーライドが含まれます。また、弧、立方体、または四角形でもうまくいきます...私はデザイナーでもありませんし、ベクトルスペシャリスト:)

animated vector drawables を使用してこれを簡単に実現できるとは思いませんが、パスモーフアニメーションを適用することで実現できる可能性があります。 （また、私が間違っていない限り、アニメーションのベクタードローアブルは21以上でのみサポートされています）

（2）ビデオは、パスをアニメーション化してフラグを揺らすだけです。これは、AnimatedVectorDrawablesを使用して（たとえば this blog が示すように）、パスの開始/終了をトリミングするか、カスタム描画を実行して（したがって、プリロリポップデバイスもサポートして）、パスをアニメーション化して実行できます。 PathMeasure.getSegment() を使用して、パスを連続的にアニメーション化します。

（3）アニメーションは、すでに azizbekians answer で指摘されているように、最初に言及した種類であり、単にビューをアニメーション化（移動およびスケーリング）します。

2番目の例については、1つのアイデアしか思い浮かびませんでした。それは、パスを設定し、animate（）の後になんらかの方法で渡してビューを移動することです。 （2）これは可能ですか？

パスに沿ってビューを移動することは明らかに可能ですが、その場合はビューが移動するため、上記のように、パスに沿ってパスを描画する方法を見つける必要があります。

6
David Medenjak

私が少し前に書いた（最近公開された）ライブラリを提案したいと思います。これにより、カスタムビューを作成してアニメーションを追加できます。

あなたはそれを見つけることができます ここ と非常に ここに簡単なデモ 。私のデモは率直に言ってそれほど印象的ではありませんが、ライブラリの力を示し、最も重要なのはその使用方法を示しています。

これは、Androidの TimeInterpolator とその子（カスタムの子も同様）で動作します。

アニメーションは完全にCanvasを使用して描画されますが、ここでの唯一の違いは、時間の関数としてTimeInterpolatorに従って変化するアニメーション値を取得できることです。

ビューにアニメーションをいくつでも追加でき、それぞれを独立して制御できます。その上、アニメーション以外のものを描くことに限定されません。そのための専用メソッドがあります（onDrawStatics）。

1
user3705007