web-dev-qa-db-ja.com

Lリリース前のLリリースのようなタッチリップルアニメーション

新しいUI哲学マテリアルデザインの一部として新しいAndroid Lリリースで導入された新しいタッチリップルアニメーションが大好きです。

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

これは基本的に、ビューの中央でフェードインし、再びフェードアウトするにつれて成長するダークグレーの円であり、最終的にはビュー全体がライトグレーで塗りつぶされてから再び消えます。

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

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

どうすればそれを実装できますか？どんな助けでも大歓迎です！

androidandroid-animationandroid-5.0-lollipop
17
FD_

私が素早く調理したもので、理想からはほど遠いですが、ちょっと、それは何かです： 要点

基本的に、アニメーション化された半径に基づいて円を描画します。正確な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スレッドが膨らんだり、他の高価なことをしたりするのに忙しい場合でも、よりスムーズなアニメーションが可能になります。

18
nhaarman

私の答えはちょっと遅いですが、私も自分の解決策を共有したいと思いました。 Niek Haarmanのアイデアを使用して、TouchEffectAnimatorという別のクラスを作成しました。ちなみにハーマンさん、ありがとうございました。

クラスとその使用例を見ることができます この要点について 。また、簡単に説明します。

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

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

以上です。しかし、このクラスが正しく機能するために実行する必要がある2つのことがあります。

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

それがあなたにも役立つことを願っています。

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

5
eluleci