L-release-подобная анимация Touch Ripple на пре-L

Мне нравится новая анимация Touch Ripple, которая была представлена ​​в новом выпуске Android L-релиза в рамках новой концепции дизайна пользовательского интерфейса.

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

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

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

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

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

Ответы

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

Ответ 2

Мой ответ довольно поздний, но я тоже хотел поделиться своим решением. Я создал еще один класс под названием TouchEffectAnimator с идеей Ника Хаармана. Между прочим, г-н Хаарман.

Вы можете увидеть класс и пример использования его в этом контексте. Также я просто объясню это.

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

  • Создайте собственное представление. (в основном примере я создал LinearLayout)
  • Инициализировать объект TouchEffectAnimator.
  • Определите некоторые атрибуты, такие как цвет, тип эффекта, продолжительность и размер углов клипа.
  • Вызовите метод onTouchEvent метода TouchEffectAnimator в представлении onTouchEvent.
  • Вызвать метод onDraw метода TouchEffectAnimator в представлении onDraw.

и что он. Но для этого класса необходимо сделать две вещи для правильной работы.

  • В представлении должно быть несколько OnClickListener, чтобы получить событие UP touch.
  • В представлении должен быть установлен специальный или прозрачный фон. Если ничего не задано в качестве фона, анимация не отображается.

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

P.S. Я создал этот класс для моего проекта библиотеки Android FlatUI Kit. Вы также можете увидеть использование этого класса в классе FlatButton.