17

新しい UI 哲学のマテリアル デザインの一環として、新しい Android L リリースで導入された新しい Touch Ripple アニメーションが気に入っています。

表面反応の下の公式設計仕様でビデオを見つけることができます: http://www.google.com/design/spec/animation/responsive-interaction.html

これは基本的に、ビューの中心でフェードインし、再びフェードアウトするにつれて大きくなり、最終的にビュー全体を明るいグレーで埋めてから再び消えるダークグレーの円です。

ICS を対象とするアプリのビューにまったく同じアニメーションを追加したいと思います。

このアニメーションをアプリケーションに追加する方法が少しわかりません。http://developer.android.com/training/animation/index.htmlの公式ドキュメントは、「ビュー内」で発生するアニメーションをカバーしていないようです。また、可能であれば、事前に描画されたフレーム アニメーション (フレームごとに 1 つの png リソース) を使用したくありません。

それを実装するにはどうすればよいですか？どんな助けでも大歓迎です！

4

2 に答える 2

18

理想からかけ離れた、私が手早く作ったものですが、ねえ、それは何かです: Gist

基本的に、アニメーションの半径に基づいて円を描きます。正確な L 効果を得るには、さらに微調整を行う必要があります。興味深いコード:

@Override
public boolean onTouchEvent(@NonNull final MotionEvent event) {
    if (event.getActionMasked() == MotionEvent.ACTION_UP) {
        mDownX = event.getX();
        mDownY = event.getY();

        ObjectAnimator animator = ObjectAnimator.ofFloat(this, "radius", 0, getWidth() * 3.0f);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.setDuration(400);
        animator.start();
    }
    return super.onTouchEvent(event);
}

public void setRadius(final float radius) {
    mRadius = radius;
    if (mRadius > 0) {
        RadialGradient radialGradient = new RadialGradient(
                mDownX,
                mDownY,
                mRadius * 3,
                Color.TRANSPARENT,
                Color.BLACK,
                Shader.TileMode.MIRROR
        );
        mPaint.setShader(radialGradient);
    }
    invalidate();
}

private Path mPath = new Path();
private Path mPath2 = new Path();

@Override
protected void onDraw(@NonNull final Canvas canvas) {
    super.onDraw(canvas);

    mPath2.reset();
    mPath2.addCircle(mDownX, mDownY, mRadius, Path.Direction.CW);

    canvas.clipPath(mPath2);

    mPath.reset();
    mPath.addCircle(mDownX, mDownY, mRadius / 3, Path.Direction.CW);

    canvas.clipPath(mPath, Region.Op.DIFFERENCE);

    canvas.drawCircle(mDownX, mDownY, mRadius, mPaint);
}

彼らの講演「Android の新機能」では、このアニメーションは実際には別の「レンダリング スレッド」で行われ、L リリースでデビューする予定であると話しました。これにより、UI スレッドが膨張したり、他の負荷の高い処理を行ったりしている場合でも、よりスムーズなアニメーションが可能になります。

于 2014-06-25T20:46:13.927 に答える
5

私の答えは少し遅れていますが、私の解決策も共有したかったのです。Niek Haarman のアイデアで、TouchEffectAnimator という別のクラスを作成しました。ところでHaarman氏に感謝します。

この gistで、クラスとその使用例を確認できます。また、簡単に説明します。

このクラスには、必要なすべてのメソッドと変数が含まれており、Android L (プレビュー) が現在持っているものと同じアニメーションを作成します。このクラスを使用する場合:

  • カスタム ビューを作成します。（要点の例では、LinearLayoutを作成しました）
  • TouchEffectAnimator オブジェクトを初期化します。
  • 色、効果の種類、持続時間、クリップ コーナーのサイズなど、いくつかの属性を定義します。
  • ビューのonTouchEvent 内で TouchEffectAnimatorのonTouchEventメソッドを呼び出します。
  • ビューのonDraw 内で TouchEffectAnimatorのonDrawメソッドを呼び出します。

以上です。しかし、このクラスが適切に機能するためには、2 つのことを行う必要があります。

  • UP touch イベントを取得するには、ビューにOnClickListenerが必要です。
  • ビューにカスタムまたは透明な背景が設定されている必要があります。背景として何も設定されていない場合、アニメーションは表示されません。

それがあなたにとってもうまくいくことを願っています。

PS ライブラリ プロジェクトAndroid FlatUI Kit用にこのクラスを作成しました。このクラスの使用法は、FlatButton クラスでも確認できます。

于 2014-09-25T16:39:50.927 に答える