- 7.1 Android View animation frame
- 7.1.1 Transparency Animation
- 7.1.2 rotate animation
- 7.1.3 Displacement animation
- 7.1.4 Scaling Animation
- 7.1.5 animation set
- 7.2 Android Properties Animation analysis
- 7.2.1 Objectanimator
- 7.2.2 Propertyvaluesholder
- 7.2.3 Valueanimator
- 7.2.4 Listening for animated events
- 7.2.5 Animatorset
- 7.2.6 using property animations in XML
- animate methods for 7.2.7 view
- 7.3 Android layout Animation
- 7.4 interpolators
- 7.5 Custom Animation
- 7.6 android5.x svg vector animation mechanism
- 7.6.1 <path> tags
- 7.6.2 svg common directives
- 7.6.3 SVG editor
- using SVG in 7.6.4 Android
- 7.6.5 SVG Animation instance
- 7.7 Android animation effects
- 7.7.1 Smart Menu
- 7.7.2 Timer animation
- 7.7.3 drop-down animation
This knowledge point is not much, also easy to understand, just the classic code review case is more, so the whole chapter length, but the classic code review case very nice, we recommend that we practice the classic code review
Android animations are divided into:
- View Animation: Also known as views animation, also known as tweened animation, also known as tween animation (commonly used)
- Property Animation: Animating by changing property values
Transparency, rotation, scaling, and displacement animations are defined in the view animation, and are implemented in the following principles:
Each time the view is drawn, the Drawchild function in the view's ViewGroup gets the transformation value of the view's animation, and then calls Canvas.concat ( Transformtoapply.getmatrix ()) to complete the animation frame with a matrix operation
The parameters are the coordinates of the rotation starting angle and the center point of the rotation, and the rotation animation is set with its center point:
As with the Rotate animation, the zoom animation can also set the center point of the Zoom, where the animation is scaled in its own center setting:
With Animationset, you combine animations together:
The system also provides a listener callback for the View animation:
By listening for callbacks, you get to the start, end, and repeat events of the animation
- The most used in the animator framework is the Animatorset and objectanimator mates, using objectanimator for finer-grained control, controlling only one property of an object, and use multiple objectanimator combinations to animatorset to form an animation
- Property animation really controls the property value of a view by invoking the get, set method of the property
- Create a objectanimator simply return a Objectanimator object directly through his static factory
- Parameters include a property name for an object and an object, which must have a get and set function that internally modifies the object property value by invoking the SET function through the Java reflection mechanism
- Call Setinterpolator to set the appropriate interpolator
- The animation generated by the old version of the animation does not change the location of the event response, the knowledge simply changes the display
Parameter description:
- First parameter: The view being manipulated
- Second parameter: the property to manipulate
- The third parameter: a mutable array that needs to pass a value procedure that changes the property
In the use of objectanimator, it is particularly important that the manipulated property must have a get, set method, otherwise objectanimator will not work, and here are some commonly used properties that you can use directly:
- Translationx and Translationy: As an increment to control where the view object shifts from the upper-left coordinate of its layout container
- Rotation, RotationX, and RotationY: Controlling the View object to rotate 2D and 3D around the pivot point
- ScaleX and ScaleY: Control the View object to scale 2D around its pivot point
- Pivotx and Pivoty: Controls the pivot position of the view object, rotates and zooms around the pivot point, by default the position of the fulcrum is the center of the View object
- X and Y: it describes the final position of the View object in its container, which is the initial upper-left coordinate and the cumulative sum of the Translationx and Translationy values
- Alpha: It represents the alpha transparency of the View object, the default value is 1 (opaque), and 0 is completely transparent (not visible)
If the property does not have a get, set method, it can be implemented by:
- By customizing a property or wrapper class, indirectly adding a get, set method to this property
- Implemented through Valueanimator
Here is an example of adding a get, set method to a custom attribute:
Use by code:
Similar to the Animationset in the view animation, you can implement multiple property animation combinations:
- Objectanimator inherited from Valueanimator
- Valueanimator itself does not provide any animation effect, it is more like a numerical generator, used to produce a certain number of laws, so that the caller to control the implementation of the animation process, through the Animatorupdatelistener monitoring the value of the transformation:
The system also provides a listener callback for property animations:
Of course, the system also provides an optional listener event to select the desired event listener:
The Animatorset function is the same as Propertyvaluesholder and Animationset, except for different animations
Animatorset not only through Playtogether (), there are other ways to control the synergistic work of multiple effects: playsequentially (), Animset.play (). with (), before (), after ()
Property animations, like view animations, can also be written in an XML file:
It's also easy to use in your program:
Google adds a animate method to view to drive property animations directly:
The so-called layout animation refers to the role of ViewGroup, adding a view to the ViewGroup to add an animation over effect
The simplest layout animation in the ViewGroup XML, the system default is also unable to replace:
You can also use the Layoutanimationcontroller class to implement a custom sub-view transition effect:
Layoutanimationcontroller The first parameter is the desired animation, the second parameter is the delay time displayed for each child view, and if the time is not 0, you can also setorder to set the display order of the Child view:
- Layoutanimationcontroller.order_normal: Order
- Layoutanimationcontroller.order_random: Random
- Layoutanimationcontroller.order_reveese: Reverse Order
A interpolator is a property value that controls the rate of animation transformation, somewhat similar to the acceleration in physics, and the common interpolator is:
- Linearinterpolator: Linear interpolator, Uniform motion
- Acceleratedecelerateinterpolator: Accelerated deceleration interpolator, animation at both ends slow middle fast
- Decelerateinterpolator: Deceleration interpolator, animation more and more slow
- Bounceinterpolator: Bounce interpolator with a bounce effect at the end of the animation
- The logic that needs to implement its applytransformation
- You need to override the Initalize method of the parent class to implement some initialization work
- The first parameter is the time factor of the interpolator, calculated by the percentage of the animation's current completion and the interpolation for the current time, with a value ranging from 0 to 1.0
- The second parameter is a matrix wrapper class, which is typically used to get a matrix object
Animation can be achieved by transforming the matrix, for example, by simulating the effect of a TV turn off:
The camera class in Android.graphics.Camera, which encapsulates OpenGL's 3D animations, makes it easy to create 3D animations in the wind farm, so you can capture images with three-dimensional image by moving the camera:
Click to start the animation, so that a button will be set within the length of time, using the appropriate interpolator to complete the animation:
What is SVG:
- Scalable vector graphic (Scalable vector graphics)
- Define vector-based graphics for the network
- Defining graphics Using XML format
- The graphic quality of the picture is not lost in the case of enlargement or resizing
- Standards of the World Wide Web Consortium
- And many of the broad standards of DOM and XSL are a whole
android5.x added support for SVG <path> tags, with the following advantages:
- No distortion in magnification
- Bitmap need to design multiple sets of icons for different resolutions, while vectors do not require
uses the <path> tag with the following directive:
- M=moveto (M x, y): Moves the brush to the specified coordinate position, but not drawing
- L=lineto (L x, y): Painting Line to the specified coordinate position
- h=horizontal lineto (H X): Draw a horizontal line to the specified X-coordinate position
- v=vertical lineto (V Y): Draw the vertical to the specified Y-coordinate
- c=curveto (C, X1,y1,x2,y2,endx,endy): Three-time Bezier curve
- s=smooth curveto (S x2,y2,endx,endy): three Bezier curves
- Q=quadra Tic Belzier curve (Q X y,endx,endy): Two Bezier curves
- t=smooth quadratic belzier curvrto (t,endx,endy): Map the end point of the preceding path
Li>a=elliptical is (A rx,ry,xrotation,flag1flag2,x,y): Arc
- Z=closepath (): Close path
When using the above command, you need to be aware of the following points :
- axis with (0,0) bit center, x-axis horizontal right, y-axis horizontal downward
- all instruction capitalization, uppercase absolute positioning, reference to global coordinate system, lowercase relative positioning, reference to parent container coordinate system
- directive and space between data can be no Depending on
- the same instruction appears multiple times you can use only one
- L
The instruction for drawing a line is "L", which represents the drawing of a line from the current point to a given point, the parameter after "L" is a point coordinate, and you can also use "H" and "V" directives to draw a horizontal, vertical line, followed by an x-coordinate or y-coordinate
- M
The m directive resembles the path class MoveTo method in an Android drawing, which means that the brush moves to a point, but the drawing action does not occur
- A
A instruction is used to draw an arc, and allow the arc to not close, you can think of a instruction to draw the radian into a certain section of the ellipse, a directive has seven parameters
- Rx,ry: The half-axis size of the ellipse being located
- Xrotation: The x-axis of the ellipse and the angle of the horizontal clockwise direction, can be imagined as a horizontal ellipse center point clockwise rotation xrotation angle
- FLAG1: Only two values, 1 for large angle radians, and 0 for small angle radians
- FLAG2: Only two values, determines the direction from the starting point to the end point 1 clockwise, 0 counterclockwise
- X, Y axis: End coordinate
- Online visualization of SVG editing organ network: http://editor.method.ac/
- Excellent offline SVG editor: Inkscape
Android5.x provides two APIs to support SVG:
- Vectordrawable: You can create a static SVG graphic in XML
- Animatedvectordrawable: Animations for vectordrawable
The use of vectordrawable is declared through the <vector> tag:
If you've done the Web, you should be familiar with viewport.
- Height: Indicates the SVG 200DP
- Width: Indicates the SVG is 200DP wide
- Viewportheight: Indicates that the SVG graphic is divided into 100 parts
- Viewportwidth: Indicates that the SVG graphic is divided into 100 parts
- If you use coordinates (50,50) in your drawing, it means that the coordinates are in the middle
Next, add the display path to the <vector> tag:
You can then use it directly in the layout file:
This is a filled graph, because we're using FillColor.
Animatedvectordrawable use: Google engineers liken it to a glue, through which the static vectordrawable and dynamic Objectanimator are connected
The use of the animatedvectordrawable is declared first in the XML file through the <animated-vector> tag:
It is important to note that the name in this target corresponds to the name of the vectordrawable and animation to the animation resource file.
The corresponding vectordrawable file:
The corresponding animation file:
It is important to note that the rotate, FillColor, Pathdata and other properties are added to the <group> tags and <path> tags, so you can specify Android by Objectanimator: Propertyname= "XXXX" property to control which property, if the specified property is Pathdata, then you need to add a property--android:valuetype= "PathType" to tell the system to make a pathdata transformation
To use in a layout file:
To start an animation in activity:
- Line Graph Animation ... See Classic code review case one
- Analog tri-ball instrument ... See Classic code review Case II
- Trajectory animation ... See Classic code review case three
- Smart menu ... See Classic code review case four
- Timer animation ... See Classic code review case five
- Drop-down to expand the animation ... See Classic code review case six
Define our vectordrawable TOEFL oral
Defines a objectanimator of two paths, from path1 to path2
Define Animatedvectordrawable connections vectordrawable and Objectanimator
Use this animatedvectordrawable in the layout file
Start animation in code
Define our vectordrawable.
Define two Objectanimator, the code is the same
Define Animatedvectordrawable connections vectordrawable and Objectanimator
Use this animatedvectordrawable in the layout file
Start animation in code
Define our vectordrawable.
Define two Objectanimator, the code is the same
Define Animatedvectordrawable connections vectordrawable and Objectanimator
Use this animatedvectordrawable in the layout file
Start animation in code
Layout file
Activity file
Layout file
Activity file
Layout file
Activity file
Classic Review Source download
Github:https://github.com/csdnhensen/qunyingzhuang
Android Elite Biography-the seventh chapter: Android animation mechanism and usage tips
