Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to achieve streamer and light and shadow movement effects in Android. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Overview:

During the development process, it was cool to see some interfaces using the effect of a ray of light passing through the screen. So find the relevant information to achieve their own.

Let's start with a preview:

The idea of realization is:

To put it simply, it is to draw a light and shadow in a view and constantly change the position of the light and shadow in the view.

1. First of all, let's learn how to draw light and shadow.

Before we know how to draw, let's take a look at the construction of LinearGradient

/ * Create a shader that draws a linear gradient along a line. * * @ param x0 The x-coordinate for the start of the gradient line * @ param y0 The y-coordinate for the start of the gradient line * @ param x1 The x-coordinate for the end of the gradient line * @ param y1 The y-coordinate for the end of the gradient line * @ param colors The sRGB colors to be distributed along the gradient line * @ param positions May be null. The relative positions [0.. 1] of * each corresponding color in the colors array. If this is null, * the the colors are distributed evenly along the gradient line. * @ param tile The Shader tiling mode * translated: * x0Powery0 is the starting point of the gradual change, x1Powery1 is the end point of the gradual change * * the colors array is the gradient color value between two points, and the value range of the positions array is 0: 1 * the length of the incoming colors [] and the length of the positions [] must be equal and correspond one to one. Otherwise, error report * position input null means colors balanced distribution * * tile has three modes * Shader.TileMode.CLAMP: edge stretch mode, which stretches one pixel of the edge to fill other areas * Shader.TileMode.MIRROR: mirror mode, fill other areas through mirror changes * Shader.TileMode.REPEAT: repeat mode Populate other areas by copying * / LinearGradient (float x0, float y0, float x1, float y1, @ NonNull @ ColorInt int [] colors, @ Nullable float [] positions, @ NonNull TileMode tile)

The instructions of colors [] and positions [] are combined with the following figure so that they should be understood more clearly.

Back to the point, how to draw light and shadow. The light we see can be seen in the following picture:

According to the analysis, we find that our shader is a linear shader (for other shaders, please query the relevant api):

LinearGradient (a x coordinate, a y coordinate, c x coordinate, c y coordinate, new int [] {Color.parseColor ("# 00FFFFFF"), Color.parseColor ("# FFFFFFFF"), Color.parseColor ("# 00FFFFFF")}, new float [] {0f, 0.5f, 1f}, Shader.TileMode.CLAMP)

two。 Color the brush. Set shader mPaint.setShader (mLinearGradient)

3. Given a range of values, use the value generator ValueAnimator to generate values and listen for changes in values. Each callback passes this value to the beginning and end of the light and shadow and draws it.

The code is as follows: / * author: caoyb * created on: 15:13 on 2021-12-20 * description: * / public class ConfigLoadingView extends View {private Paint mPaint; private Path mPath; private LinearGradient mLinearGradient; private ValueAnimator mValueAnimator; public ConfigLoadingView (Context context) {this (context, null);} public ConfigLoadingView (Context context, @ Nullable AttributeSet attrs) {this (context, attrs, 0) } public ConfigLoadingView (Context context, @ Nullable AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); init ();} private void init () {mPaint = new Paint (); mPath = new Path ();} private void initPointAndAnimator (int w, int h) {Point point1 = new Point (0,0); Point point2 = new Point (w, 0) Point point3 = new Point (w, h); Point point4 = new Point (0, h); mPath.moveTo (point1.x, point1.y); mPath.lineTo (point2.x, point2.y); mPath.lineTo (point3.x, point3.y); mPath.lineTo (point4.x, point4.y); mPath.close () / / Slope k float k = 1f * h / w; / / offset float offset = 1f * w / 2 / / 0f-offset * 2 is the numerical left boundary (off-screen left), w + offset * 2 is the numerical right boundary (off-screen right) / / the purpose is to make the light and shadow walk through, with some time buffer, so that the interval of each light and shadow movement is not so fast mValueAnimator = ValueAnimator.ofFloat (0f-offset * 2, w + offset * 2); mValueAnimator.setRepeatCount (- 1) MValueAnimator.setInterpolator (new LinearInterpolator ()); mValueAnimator.setDuration (1500); mValueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {float value = (float) animation.getAnimatedValue () MLinearGradient = new LinearGradient (value, k * value, value + offset, k * (value + offset), new int [] {Color.parseColor ("# 00FFFFFF"), Color.parseColor ("# 1AFFFFFF"), Color.parseColor ("# 00FFFFFF")}, null, Shader.TileMode.CLAMP); mPaint.setShader (mLinearGradient); invalidate ();}}) MValueAnimator.start ();} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec); int widthSize = MeasureSpec.getSize (widthMeasureSpec); int heightSize = MeasureSpec.getSize (heightMeasureSpec); initPointAndAnimator (widthSize, heightSize);} @ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); canvas.drawPath (mPath, mPaint) } @ Override protected void onDetachedFromWindow () {super.onDetachedFromWindow (); mValueAnimator.cancel ();}} Note:

One of the parameters in LinearGradient:

The color [] parameter can only be a hexadecimal RGB value, not R.color.xxx. Although R.color.xxx is int, it gets the resource ID, not hexadecimal RGB.

This is the end of the article on "how to achieve streamer and light and shadow movement in Android". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.