L- релиз, как сенсорный Ripple анимация по предварительному L

? FD_ @ | Original: StackOverFlow
---

Я люблю Новый сенсорный Ripple анимацию, которая была введена в новой Android L- релизе как часть новой философии UI Материал Design .

Вы можете найти видео этого в официальном дизайна спецификации под поверхностной реакции здесь: http://www.google.com/design/spec/animation/responsive-interaction.html

Это в основномтемно-серые круг, который исчезает в настоящий центре поля зрения и растет, как она исчезает снова, в конце концов заполнения целое представление с светло-серый, прежде чем исчезнуть снова.

Я хотел бы добавить ту же самую анимацию представлению, в мое приложение, которое наведение ICS.

Янемного невежественны о том, как добавить эту анимацию в моем приложении . Официальные документы в http://developer.android.com/training/animation/index.html, кажется, не охватывают анимации, которые происходят " внутри зрения " . Кроме того, я хотел бы, чтобы не использовать заранее рисованную анимацию Рамка ( PNG ресурсов в кадре ), если это возможно.

Как бы я идти о реализации этого? Любая помощь высоко ценится !

---

Top 5 ответ

1Niek Haarman @

Что-то я приготовила быстро, далеко от идеала, но эй, это что-то : https://gist.github.com/nhaarman/dfe0631a820bccb7a3b3

В основном рисуя круг на основе анимационного радиуса. Чтобы получить точную 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- релизе. Это позволит более плавные анимации, даже когдапоток пользовательского интерфейса занят раздувание, или делать что-нибудь еще дороже.

2eluleci @

Мой ответ на это довольно поздно, но я хотел бы поделиться мое решение слишком . Я создал еще один класс с именем TouchEffectAnimator с идеей Ниеком Haarman . Благодаря г- Haarman кстати .

Вы можете видеть, класс и пример использования этого https://gist.github.com/eluleci/6e0d02c766b27f6a5253 . Кроме того, я объясню это просто .

Класс содержит все необходимые методы и переменные в нем, и создает такой же анимацию, Android L (предварительный просмотр ) в настоящее время имеет. Для использования этого класса :

Create a custom view. (in gist example I created a LinearLayout) Initialise the TouchEffectAnimator object. Define some attributes of it like color, effect type, duration and clip corners size. Call the onTouchEvent method of TouchEffectAnimator inside the view's onTouchEvent. Call the onDraw method of TouchEffectAnimator inside the view's onDraw.

вот и все . Но есть две вещи, которые можно сделать, чтобы этот класс, чтобы работать должным образом.

There should be some OnClickListener on the view to get the UP touch event. There should be a custom or transparent background set to the view. If nothing is set as background the animation is not shown.

Я надеюсь, что это работает для вас тоже.

P.S. Я создал этот класс для моего проекта библиотеки https://github.com/eluleci/FlatUI . Вы можете увидеть использование этого класса в класс FlatButton, а также.