How to achieve a motion blur effect like this?

Question

Smartisan OS has a weather app with such an effect: when changing the format from Celsius to Fahrenheit, the temperature number will scroll like this: Motion blur effect sample

I think it's not a simple blur effect when numbers scrolling, because you can see from the image that these numbers are blurred only in the vertical direction. The numbers scroll first in a low speed, and then faster. And the blur radius is also longer as it scrolls. As for me, this kind of effect is not so easy to achieve.

Answer 1

Just create a custom view that would always draw on canvas. You have to handle the up and down movement by yourself, you will not be able to use simple built-in ui elements in that case. Once you would like to have the scroll effect, just draw the moving text multiple times, but offset it slightly every time and change it's opacity, depending on it's speed.

Using OpenGL might be an overkill in that case, since this case is just about text. Motion blur would be too difficult and performance heavy to implement and drawing text to canvas a dozen times has only a minor impact on performance.

Hope I could help.

Answer 2

Same solution of @andras

 /**
 * use for 2D-Radial-Blur
 *
 * @param src
 * @param dx    It effetcs the speed. you can use 1/-1 for a test
 * @param dy    It effetcs the speed. you can use 1/-1 for a test
 * @param times effects motion length
 * @return
 */
public static Bitmap doRadialBlur(Bitmap src, int dx, int dy, int times) {

    Bitmap dst = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(dst);
    Matrix matrix = new Matrix();
    Paint paint = new Paint();
    canvas.drawBitmap(src, matrix, paint);

    paint.setAlpha(51); // 51 / 255 =20%

    for (int i = 0; i < times; i++) {
        matrix.setTranslate(i * dx, i * dy);
        canvas.drawBitmap(src, matrix, paint);
    }

    return dst;
}

https://github.com/dkmeteor/RadialBlur-Android