From 6ed8197ff82ded70fd15c4c7f24631a373c6a933 Mon Sep 17 00:00:00 2001 From: Lucas Dupin Date: Fri, 19 Mar 2021 09:56:09 -0700 Subject: [PATCH] UX feedback for ripple - Updated easings - Made sparkles larger - Made sparkles density independent - Modified sparkle animation speed Fixes: 182173639 Test: visual Change-Id: I91b9f2dc9ffa19ce7b960129256be86eee217e8a --- .../drawable/RippleAnimationSession.java | 10 +++---- .../graphics/drawable/RippleDrawable.java | 2 +- .../graphics/drawable/RippleShader.java | 28 +++++++++++-------- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/graphics/java/android/graphics/drawable/RippleAnimationSession.java b/graphics/java/android/graphics/drawable/RippleAnimationSession.java index b57f7af14a0e8..94d5c22653722 100644 --- a/graphics/java/android/graphics/drawable/RippleAnimationSession.java +++ b/graphics/java/android/graphics/drawable/RippleAnimationSession.java @@ -26,8 +26,8 @@ import android.graphics.CanvasProperty; import android.graphics.Paint; import android.graphics.RecordingCanvas; import android.graphics.animation.RenderNodeAnimator; -import android.util.ArraySet; import android.view.animation.AnimationUtils; +import android.view.animation.Interpolator; import android.view.animation.LinearInterpolator; import android.view.animation.PathInterpolator; @@ -41,8 +41,8 @@ public final class RippleAnimationSession { private static final int ENTER_ANIM_DURATION = 450; private static final int EXIT_ANIM_DURATION = 300; private static final TimeInterpolator LINEAR_INTERPOLATOR = new LinearInterpolator(); - private static final TimeInterpolator PATH_INTERPOLATOR = - new PathInterpolator(.2f, 0, 0, 1f); + private static final Interpolator FAST_OUT_LINEAR_IN = + new PathInterpolator(0.4f, 0f, 1f, 1f); private Consumer mOnSessionEnd; private final AnimationProperties mProperties; private AnimationProperties, CanvasProperty> mCanvasProperties; @@ -59,7 +59,7 @@ public final class RippleAnimationSession { mSparkle.addUpdateListener(anim -> { final long now = AnimationUtils.currentAnimationTimeMillis(); final long elapsed = now - mStartTime - ENTER_ANIM_DURATION; - final float phase = (float) elapsed / 30000f; + final float phase = (float) elapsed / 800; mProperties.getShader().setNoisePhase(phase); notifyUpdate(); }); @@ -174,7 +174,7 @@ public final class RippleAnimationSession { private void startAnimation(Animator expand) { expand.setDuration(ENTER_ANIM_DURATION); expand.addListener(new AnimatorListener(this)); - expand.setInterpolator(LINEAR_INTERPOLATOR); + expand.setInterpolator(FAST_OUT_LINEAR_IN); expand.start(); if (!mSparkle.isRunning()) { mSparkle.start(); diff --git a/graphics/java/android/graphics/drawable/RippleDrawable.java b/graphics/java/android/graphics/drawable/RippleDrawable.java index fb2b9b343f0ad..d5711c8cc450a 100644 --- a/graphics/java/android/graphics/drawable/RippleDrawable.java +++ b/graphics/java/android/graphics/drawable/RippleDrawable.java @@ -914,7 +914,7 @@ public class RippleDrawable extends LayerDrawable { shader.setColor(color); shader.setOrigin(w / 2, y / 2); shader.setTouch(x, y); - shader.setResolution(w, h); + shader.setResolution(w, h, mState.mDensity); shader.setNoisePhase(0); shader.setRadius(radius); shader.setProgress(.0f); diff --git a/graphics/java/android/graphics/drawable/RippleShader.java b/graphics/java/android/graphics/drawable/RippleShader.java index ea9ba325a826c..5dd250c8239e5 100644 --- a/graphics/java/android/graphics/drawable/RippleShader.java +++ b/graphics/java/android/graphics/drawable/RippleShader.java @@ -20,13 +20,15 @@ import android.annotation.ColorInt; import android.graphics.Color; import android.graphics.RuntimeShader; import android.graphics.Shader; +import android.util.DisplayMetrics; final class RippleShader extends RuntimeShader { private static final String SHADER_UNIFORMS = "uniform vec2 in_origin;\n" + "uniform vec2 in_touch;\n" + "uniform float in_progress;\n" + "uniform float in_maxRadius;\n" - + "uniform vec2 in_resolution;\n" + + "uniform vec2 in_resolutionScale;\n" + + "uniform vec2 in_noiseScale;\n" + "uniform float in_hasMask;\n" + "uniform float in_noisePhase;\n" + "uniform vec4 in_color;\n" @@ -40,18 +42,15 @@ final class RippleShader extends RuntimeShader { + "}" + "const float PI = 3.1415926535897932384626;\n" + "\n" - + "float threshold(float v, float l, float h) {\n" - + " return step(l, v) * (1.0 - step(h, v));\n" - + "}\n" - + "\n" + "float sparkles(vec2 uv, float t) {\n" + " float n = triangleNoise(uv);\n" + " float s = 0.0;\n" + " for (float i = 0; i < 4; i += 1) {\n" - + " float l = i * 0.25;\n" - + " float h = l + 0.005;\n" - + " float o = abs(sin(0.1 * PI * (t + i)));\n" - + " s += threshold(n + o, l, h);\n" + + " float l = i * 0.01;\n" + + " float h = l + 0.1;\n" + + " float o = smoothstep(n - l, h, n);\n" + + " o *= abs(sin(PI * o * (t + 0.55 * i)));\n" + + " s += o;\n" + " }\n" + " return saturate(s);\n" + "}\n" @@ -83,7 +82,9 @@ final class RippleShader extends RuntimeShader { + " vec2 center = mix(in_touch, in_origin, fadeIn);\n" + " float ring = getRingMask(p, center, in_maxRadius, fadeIn);\n" + " float alpha = min(fadeIn, 1. - fadeOutNoise);\n" - + " float sparkle = sparkles(p, in_noisePhase) * ring * alpha;\n" + + " vec2 uv = p * in_resolutionScale;\n" + + " vec2 densityUv = uv - mod(uv, in_noiseScale);\n" + + " float sparkle = sparkles(densityUv, in_noisePhase) * ring * alpha;\n" + " float fade = min(fadeIn, 1. - fadeOutRipple);\n" + " vec4 circle = in_color * (softCircle(p, center, in_maxRadius " + " * fadeIn, 0.2) * fade);\n" @@ -135,7 +136,10 @@ final class RippleShader extends RuntimeShader { color.green(), color.blue(), color.alpha()}); } - public void setResolution(float w, float h) { - setUniform("in_resolution", w, h); + public void setResolution(float w, float h, int density) { + float noiseScale = 0.8f; + float densityScale = density * DisplayMetrics.DENSITY_DEFAULT_SCALE * 0.5f * noiseScale; + setUniform("in_resolutionScale", new float[] {1f / w, 1f / h}); + setUniform("in_noiseScale", new float[] {densityScale / w, densityScale / h}); } }