17

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

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

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

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

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

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

4

2 回答 2

18

我很快就完成了一些东西，远非理想，但是，嘿，这是一些东西：要点

基本上根据动画半径绘制一个圆。要获得准确的 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 的类。顺便感谢哈曼先生。

您可以在此 gist 上查看该类及其示例用法。我也简单解释一下。

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

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

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

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

我希望它也适合你。

PS 我为我的库项目Android FlatUI Kit创建了这个类。您也可以在 FlatButton 类中看到该类的用法。

于 2014-09-25T16:39:50.927 回答