首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >L- pre-L上的类似释放的Touch Ripple动画

L- pre-L上的类似释放的Touch Ripple动画
EN

Stack Overflow用户
提问于 2014-06-26 04:12:40
回答 1查看 9.6K关注 0票数 17

我喜欢在新的Android L-release中引入的新的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资源)。

我该如何去实现它呢?任何帮助都是非常感谢的!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-06-26 04:46:14

我很快就想出了一些东西,远不是理想的,但是,嘿,它是一些东西:Gist

基本上是基于一个动画半径绘制一个圆。为了得到准确的L效果,需要做更多的调整。有趣的代码:

代码语言:javascript
复制
@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-release中首次亮相。这将允许更流畅的动画,即使当UI线程忙于膨胀,或做任何其他昂贵的事情。

票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24417693

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档