Question

我喜欢全新Android L版本中引入的全新Touch Ripple动画，作为新UI理念Material Design的一部分。

您可以在官方设计规范中的表面反应下找到它的视频：http://www.google.com/design/spec/animation/responsive-interaction.html

它基本上是一个深灰色的圆圈，在视图的中心逐渐消失，并随着它再次淡出而增长，最终用浅灰色填充整个视图，然后再次消失。

我想将相同的动画添加到我的应用中针对ICS的视图中。

我对如何在我的应用程序中添加此动画感到有点无能为力。 http://developer.android.com/training/animation/index.html上的官方文档似乎没有涵盖“视图内”发生的动画。另外，如果可能的话，我不想使用预先绘制的帧动画（每帧一个png资源）。

我将如何实施？任何帮助都非常感谢！

Answer 1

我做的东西很快，远非理想，但是嘿，它是：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);
}

在他们的演讲＆＃34; Android＆＃34;中的新内容中，他们谈到这个动画实际上发生在一个单独的＆＃34;渲染线程＆＃34;，它将首次亮相L-释放。这将允许更平滑的动画，即使在UI线程忙于膨胀或做其他任何昂贵的事情时也是如此。

Answer 2

我的回答有点晚，但我也想分享我的解决方案。我用Niek Haarman的想法创建了另一个名为TouchEffectAnimator的类。顺便感谢哈尔曼先生。

您可以看到该类及其示例用法on this gist。我也会简单地解释一下。

该类包含其中的所有必要方法和变量，并创建与Android L（预览）当前具有的相同动画。使用这个类：

创建自定义视图。（在gist示例中，我创建了一个LinearLayout）
初始化TouchEffectAnimator对象。
定义它的一些属性，如颜色，效果类型，持续时间和剪裁边角尺寸。
在视图的onTouchEvent 中调用TouchEffectAnimator的 onTouchEvent 方法。
在视图的onDraw 中调用TouchEffectAnimator的 onDraw 方法。

就是这样。但是要使这个类正常工作，应该做两件事。

视图上应该有一些 OnClickListener 来获取UP touch事件。
应该为视图设置自定义或透明背景。如果没有设置为背景，则不显示动画。

我希望它也适合你。

P.S。我为我的库项目Android FlatUI Kit创建了这个类。你也可以在FlatButton类中看到这个类的用法。

前L上的L-release-like Touch Ripple动画

2 个答案: