Android Graphics Animation Basics

First, the Animation foundation

Essence

Draw a different content per frame.

Basic process

After the animation is started, the invalidate of the view is invoked to trigger the redraw. After redrawing, check that the animation stops, and if it does not stop, continue calling invalidate to trigger the next frame (redraw next) until the end of the animation.

The draw method of the view is called when redrawing, drawing different content depending on the animation, such as the size change of a drawn element, angular rotation, transparency changes, and so on, resulting in animation.

The animation's propulsion process will generally have a change, which will be used to draw the elements within the draw method. The general variables are time, or they can be any other variables such as finger movement, sensors, and so on.

Animation support in Android

Animation: An early implementation of the class that makes the view whole animated. Allows the view to animate matrix (move, scale, rotate, 3D rotation) and alpha (transparent).

Animator: A class that is implemented for animation after hardware acceleration. It can easily animate the view as a whole, or it can only produce variables that change over time to make a drawing-level animation in OnDraw. Much more flexible than animation.

Animationdrawable: Picture-by-frame animation. It is mainly used to play pre-made animations.

At which level do you animate

Making the entire view animated (such as the entire view pan, rotate, and so on) is simple and convenient, and usually calls a few lines of code. I call it a view-level animation.

Animations are more flexible, finer, and more powerful when drawn in the Draw/ondraw of the view by canvas. I call it a drawing-level animation. (The view-level animations essentially do the same, but the Android system does most of the work for us)

Animation at the drawing level

This article is mainly about drawing-level animations.

Here's a typical implementation of a drawing-level animation:

classMyView extendsView {    voidstartAnimator() {        ValueAnimator animator = ValueAnimator.ofFloat(1f, 0f);        animator.start();        invalidate();    }    protectedvoidonDraw(Canvas canvas) {        if(animator.isRunning()) {            floatratio = (Float)animator.getAnimatedValue();            canvas.rotate(ratio*);            canvas.drawBitmap(bitmap, 0, 0, null);            invalidate();        }        ...    }}

With the ever-changing ratio variable, drawing-level animations can be a very rewarding skill.

The power of drawing-level animations comes from the power of the drawing API, which is mainly about the drawing API.

Second, the drawing API

Matrix

Canvas. [Translate,scale,rotate,skew] Method

Matrix.set/pre/post[translate,scale,rotate,skew] Method

Pan, zoom, rotate, chamfer.

From the point of view of using the API, we can make subsequent draw area changes of the operation on this canvas, such as translate (5,0), by calling Canvas.translate, etc., and the drawing area of all subsequent drawing operations will move 5 pixels to the right.

Principle: These calls on a matrix,canvas in a canvas will eventually be called to matrix.pre*. This matrix preserves the entire transformation process. When there is a canvas.draw, the points to be drawn are mapped by the Matrix.mappoints method. So we have the desired transformation effect. (In fact, mappings only need to map the key points, the other is interpolated)

More information about the matrix

Set/pre/post difference: Set is set to flush out the previous data. The pre is the pre-multiply, post is the multiplier, basically is the effective order is different. Specific performance results can be found on the Internet information.

Setpolytopoly: In contrast to the Mappoints method, mappoints maps the original point to the target point through a matrix. The Setpolytopoly is the input origin point and the mapped target point, and the matrix is computed.

Camera: 3D rotation with perspective effect. Camera is a tool class that generates a matrix. Can be used to create a 3D rotation with a perspective effect.

Canvas.draw* method

canvas.draw-point/s

canvas.draw-line/s

Canvas.draw-rect,roundrect,circle,oval,arc,path

Canvas.draw-text

Canvas.draw-bitmap,bitmapmesh

Canvas.draw-color,paint

These methods all represent a region being drawn. What color is filled in the area that is drawn is determined by the paint.

Color,paint,bitmap,bitmapmesh In addition to specifying the drawing area, the fill content is also specified.

The path function is powerful, can be organized into any shape, and can also be used with Bezier curves.

These methods are basically well understood and can be seen in terms of their names. Here's a point to mention Drawbitmapmesh.

Drawbitmapmesh is to enter a grid model, and the picture content will be distorted based on this grid. It can be imagined that a picture is drawn on an elastic cloth, and when we pull some areas of the cloth, it creates a distorted picture.

Example: Suppose you have a 30x30-sized picture, we create such a grid input:

0,0, 15, 0, 30, 0,

0,15, 15, 15, 30, 15,

0,30, 15, 30, 30,30

The picture is output as is, without any distortion.

If we create such a grid input:

0,0, 15, 12, 30, 0,

0,15, 15, 15, 30, 15,

0,30, 15, 30, 30,30

The original [15,0] point is drawn to the [15,12] position. After the picture is drawn, the upper part will be missing a piece, forming a distorted effect that pulls the picture from the top middle position with the hand. But very sharp, the missing piece is a triangle and not semi-circular, usually we want the semi-circular type, which requires us to build this grid more dense.

Alpha Channel

Each color can have four channel ARGB, where RGB is red, green and blue, A is the alpha channel, it is usually used to make this color transparency.

Because our display is not transparent, we can see that there is no alpha channel in the color shown on the screen at the end. The alpha channel takes effect mainly when two images are mixed.

By default, when a color is drawn to the canvas, the blending mode is computed as follows: (RGB channel) Final color = painted color + (1-Paint color transparency) The original color on Xcanvas.

Attention:

1. Here we generally map the value of each channel from 0 to 255 as a floating-point number from 0 to 1.

2. The "Painted color" on the right side of the equation and the original color on the canvas are the values that have been pre-multiplied by their alpha channel. such as paint color: 0x88ffffff, then the value of each color channel involved in the operation is not 1.0, but (1.0 * 0.53125 = 0.53125).

Using this method of blending, it will cause the post-drawn content to be stacked in a translucent way on top of the visual effect.

In fact, there can be different mixed mode for us to choose, with Paint.setxfermode, specify a different porterduff.mode.

The following table is a mixed formula for each Porterduff pattern: (d refers to content that was originally on the canvas dst,s refers to the content of the drawing input src,a refers to the alpha channel, C refers to the RGB channels)

ADD	Saturate (S + D)
CLEAR	[0, 0]
Darken	[Sa + Da-sa*da, sc* (1-da) + dc* (1-sa) + min (Sc, Dc)]
Dst	[Da, Dc]
Dst_atop	[SA, SA * Dc + Sc * (1-DA)]
Dst_in	[SA * Da, sa * Dc]
Dst_out	[Da * (1-SA), Dc * (1-SA)]
Dst_over	[Sa + (1-SA) *da, Rc = Dc + (1-DA) *SC]
Lighten	[Sa + Da-sa*da, sc* (1-da) + dc* (1-SA) + max (Sc, Dc)]
MULTIPLY	[Sa * Da, Sc * Dc]
Screen	[Sa + Da-sa * Da, Sc + dc-sc * Dc]
Src	[Sa, Sc]
Src_atop	[Da, Sc * da + (1-SA) * Dc]
Src_in	[Sa * da, Sc * da]
Src_out	[Sa * (1-DA), Sc * (1-DA)]
Src_over	[Sa + (1-SA) *da, Rc = Sc + (1-SA) *DC]
Xor	[sa + Da-2 * sa * Da, Sc * (1-DA) + (1-SA) * Dc]

As you can see, our previous default blending mode is actually src_over.

By choosing a different Porterduff mode, we can achieve some special effects:

Using dst_over words, the equivalent of post-drawn content as background at the bottom.

With Dst_in/dst_out, you can crop the contents of the canvas, or use a picture mask with Alpha to specify which areas are displayed/not displayed.

By selecting Src_atop, you can draw only where there is content (opaque) on the canvas.

Use an example diagram to see the blending effect when using different modes (SRC represents the input graph, DST represents the content on the original canvas):

Fill Color

Previously said canvas.draw* specifies the area to draw. The fill color in the area is specified by paint.

PAINT.SETCOLOR specifies a solid color.

Paint.setshader can be specified: Bitmapshader, lineargradient, Radialgradient, Sweepgradient, Composeshader.

Bitmapshader: Picture fills.

LinearGradient, Radialgradient, sweepgradient: Gradient fill.

Composeshader: Overlay One of the previous two. You can choose Porterduff blending mode.

If SetColor is called and Setshader is called, the setshader takes effect. If you set transparency with SetColor or setalpha at the same time, transparency also takes effect. (will overlap with shader's transparency)

If you use Drawbitmap to enter an alpha-only picture (available with the Bitmap.extractalpha method), the color of the Shader/color is drawn with the alpha image mask.

Colorfilter

With Colorfilter, you can do a generic processing for all pixels that are drawn at once.

Paint.setColorFilter:LightingColorFilter, Porterduffcolorfilter, Colormatrixcolorfilter.

This can change the draw content as a whole, such as making the color darker, brighter, and so on.

The following colormatrixcolorfilter are highlighted here.

ColorMatrix is the 4x5 matrix, which defines each of its elements as follows:

{A, B, C, D, E,

F, G, H, I, J,

K, L, M, N, O,

P, Q, R, S, t}

The final operation of the ColorMatrix is as follows:

R ' = a*r + b*g + c*b + d*a + E;
G ' = f*r + g*g + h*b + i*a + j;
B ' = k*r + l*g + m*b + n*a + o;
A ' = p*r + q*g + r*b + s*a + t;

Here you can easily test the flash online version.

Drawing API Architecture

The entire drawing line is probably as follows: (the part we can define is in blue)

Consider the animation when the implementation of the general from two angles to think:

Macro angle: There are several changes, what is the difference. The flow of animation from start to finish.

Micro-angle: From a frame to think, when the amount of change is a certain value of the image, how to draw.

It would be clearer to think of the two separately.

PPT has an example, you can refer to the demo to familiarize yourself with:

How to do animation. ppt

Introduction to Android graphics system. ppt

graphicsdemo.apk

Graphicsdemo_src.zip

Android Graphics Animation Basics