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

Question

我喜欢新的Android L版本中引入的新Touch Tipple动画,作为新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);
}

在他们的演讲"Android中有什么新东西"中,他们谈到这个动画实际上发生在一个单独的"渲染线程"上,这将在L版本中首次亮相.这将允许更平滑的动画,即使在UI线程忙于膨胀或做任何其他昂贵的事情时也是如此.

Answer 2

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

您可以在此要点上查看该类及其示例用法.我也会简单地解释一下.

该类包含所有必要的方法和变量,并创建Android L(预览)当前具有的相同动画.使用此类:

• 创建自定义视图.(在gist示例中,我创建了一个LinearLayout)
• 初始化TouchEffectAnimator对象.
• 定义它的一些属性,如颜色,效果类型,持续时间和剪辑边角大小.
• 在视图的onTouchEvent中调用TouchEffectAnimator的onTouchEvent方法.
• 在视图的onDraw中调用TouchEffectAnimator 的onDraw方法.

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

• 视图上应该有一些OnClickListener来获取UP touch事件.
• 应该为视图设置自定义或透明背景.如果未将任何内容设置为背景,则不显示动画.

我希望它对你也有用.

PS我为我的库项目Android FlatUI Kit创建了这个类.您还可以在FlatButton类中查看此类的用法.