L-发布般的触摸纹波动画在pre-L [英] L-release-like Touch Ripple animation on pre-L

问题描述

我喜欢新的触摸脉动动画是在新的Andr​​oid L-版本中引入的新UI理念的一部分材料设计。

I love the new Touch Ripple animation that was introduced in the new Android L-release as part of the new UI philosophy Material Design.

您可以找到它在这里表面反应的官方设计规范中的一个视频：<一href="http://www.google.com/design/spec/animation/responsive-interaction.html">http://www.google.com/design/spec/animation/responsive-interaction.html

You can find a video of it in the official design spec under surface reaction here: http://www.google.com/design/spec/animation/responsive-interaction.html

这基本上是一个暗灰色的圆圈消失在视图的中心，成长，因为它淡出一遍，最后填充浅灰色的整体视图中再次消失了。

It's basically a dark-gray circle that fades in at the center of the view and grows as it fades out again, eventually filling the whole view with a light gray before disappearing again.

我想非常相同的动画添加到我的应用程序，是目标定位ICS的景色。

I'd like to add the very same animation to a view in my app that is targetting ICS.

我如何添加这个动画在我的应用程序有点无能。在<一个官方的文档href="http://developer.android.com/training/animation/index.html">http://developer.android.com/training/animation/index.html似乎没有涵盖发生视图里面的动画。 另外，我想不使用pre-绘制帧动画（每帧一个PNG资源），如果可能的话。

I am a bit clueless on how to add this animation in my application. The official docs at http://developer.android.com/training/animation/index.html don't seem to cover animations that happen "inside a view". Also, I'd like not to use pre-drawn frame animations (one png resource per frame) if possible.

我将如何去实现呢？ 任何帮助是非常AP preciated！

How would I go about implementing that? Any help is highly appreciated!

推荐答案

我的东西很快熟起来，很不理想，但是，嘿，它的东西：的要点

Something I cooked up quickly, far from ideal, but hey, it's something: Gist

基本上根据绘制动画半径的圆。为了得到确切的L-效应，一些更多的调整应该做的。有趣的code：

Basically drawing a circle based on an animated radius. To get the exact L-effect, some more tweaking should be done. The interesting code:

@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);
}

---

在他们的谈话有什么新的Andr​​oid，他们谈到，该动画其实发生在一个单独的渲染线程，这将使得其首次亮相的L释放。这将允许更平滑的动画，甚至当UI线程繁忙膨胀，或做其他事情昂贵

---

In their talk "What's new in Android", they talked about that this animation actually happens on a separate "Render thread", which will make its debut in the L-release. This will allow smoother animations, even when the UI thread is busy inflating, or doing anything else expensive.

这篇关于L-发布般的触摸纹波动画在pre-L的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！