The use of frame animation and gap animation,

Time:2021-12-2

1: Fameanimation

Frame animation is played frame by frame, and the effect of animation is achieved by playing pictures quickly

There are two ways to use frame animation:

1: Configuring frame animation through XML

Create an XML file under the drawable file

Change the file to anim_ List, and add the pictures one by one in the order of playing. The ones that play first are added first. Duration sets the time

Through SRC, you can add the drawable resource file to the picture: Android: SRC = "@ drawable / ani", obtain the drawable of the picture and convert it into animationdrawable, and start the animation through start()
(imageview2. Drawable as animationdrawable). Apply {start()} // imageview2 is the ID of the picture. 2: configure frame animation through code: create animationdrawable object - > add picture for animation - > add animationdrawable to corresponding view - > start animation
Animationdrawable(). Apply {// add a frame picture for the frame animation through addframe (1,2). 1: need a drawable (get it through getdrawable()), 2: animation duration getdrawable (r.drawable. Campfire01)?. let {addframe (it, 100)} getdrawable (r.drawable. Campfire02)?. let {addframe (it, 100)} getdrawable (r.drawable. Campfire03) ?. Let {addframe (it, 100)}}. Also {// add animationdrawable to the corresponding view imageview2. Setimagedrawable (it) // start animation it. Start()} 2: tweenanimation
1: The gap animation only gives us a sense of animation visually, but the position state of the control itself has not been changed. For example, move the control C from position a to position B. visually, the control C has been moved to position B. However, if you need to click the control C, you need to click the position of a, even if the control is still in position a. 2: Make up animation is divided into: alphaanimation: animation of transparency change, translateanimation: animation of seat movement, scaleanimation: animation of size expansion, rotateanimation: animation of rotation, animationset: combination of animation, which combines the above animations. 3: common attributes of make up animation: filler: true or false, Whether to keep the state after the animation ends fillbefer: whether to return to the state where the animation starts. The default setting is true configuration: animation time repeat(): reset repeatmode: in the mode of secondary animation (restart: start from the beginning, renew: start from the end, that is, from the end of the last animation) repeatcount: the number of times the animation repeats, infinite: countless starts() : start animation cancel (): cancel animation
4: Setanimationlistener: adds animation to an animation
It. Setanimationlistener (object: animation. Animationlistener {override fun onanimationrepeat (Animation: animation?) {/ * animation this method is called when the animation is repeatedly executed through setrepeatmode() / setrepeatcount() or repeat() methods. * /} override fun onanimationend (Animation: animation?) {// use} override fun onanimationstart (Animation: animation?) {// use}} when the animation ends; (5) how to implement the gap animation; (1) XML configuration creates a resource ddirectory file anim under the res file (all animations are placed in this file)

Create a resource file under the created anim file

Change the set at the beginning of the file to the mode you need, and configure the XML file. The transparency here changes from 0 to 1

If I need to change the transparency, I change it to alpha. If I need to stretch, I change it to scale

android:fromAlpha="0.0"    android:toAlpha="1.0"    />
Get the created XML file and set its properties before starting the animation
//XML configuration fade in private fun fade_ inandout_ Xml() {// obtain the file animationutils.loadanimation (this, r.anim. Fade_in). Apply through animationutils.loadanimation (1 (context), 2 (configured XML file resources)) {// configure the corresponding attributes. These attributes can also be set in the XML file, but the XML file does not prompt duration = 2000 fillafter = true repeatmode = animation. Restart}. Also {// listen for animation it. Setanimationlistener (object: animation. Animationlistener {override fun onanimationrepeat (Animation: animation?) {/ * animation this method is called when the animation is repeatedly executed through the setrepeatmode() / setrepeatcount() or repeat() method. * /} override fun onanimationend (Animation: animation?) {// use} when the animation ends Override fun onanimationstart (Animation: animation?) {// use}}) when the animation starts // add the animation to the view through startanimation() and start the animation imageview2. Startanimation (it)}}
Move:
Android: fromxdelta = "0" Android: toxelta = "200" changes on the x-axis Android: fromydelta = "0" Android: toydelta = "0" changes on the y-axis / > this operation is the same, so I won't write them one by one below
AnimationUtils.loadAnimation(this,R.anim.trans).apply {    duration = 2000    fillAfter = true}.also {    imageView2.startAnimation(it)}
stretching
Set the width to stretch from 0 to 50. Android: fromxscale = "0dp" Android: toxscale = "50dp" set the height to stretch from 0 to 50. Android: fromyscale = "0dp" Android: toyscale = "50dp" set the position when stretching. There is also a corresponding pivottype attribute. There are three values corresponding to pivotx (y): animation.absolute absolute value pivotx (y) Is the absolute value of the setting. At this time, the lower expansion point is at the position of 200200 on the screen
,Animation.RELATIVE_ TO_ Self relative to itself, pivot x is the position set 200 times on the x position relative to itself, animation.relax_ TO_ Parent relative to the parent container, the position of pivot x on X is 200 times the width of the parent container. In the XML configuration file, the default is animation.absolute Android: pivot x = "200" Android: pivot = "200" / > rotation:
From 0 degrees to 180 degrees, the position of Android: fromdegrees = "0" Android: todegrees = "180" defaults to the original position of the control itself if it is not set. Android: pivotx = "0" Android: pivoty = "180" / >
Set: the percentage used is relative to itself
android:duration="2000">    android:fromYScale="0%" android:toYScale="100%"    android:pivotY="50%" android:pivotX="50%"    />            android:pivotX="50%" android:pivotY="50%"/>
(2) : Code transparency
Alphaanimation (0.0F, 1.0F). Apply {duration = 3000 fillafter = true repeatmode = animation. Reverse}. Also {imageview2. Startanimation (it)} move:
TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,                       Animation.RELATIVE_TO_SELF,1f,                       Animation.RELATIVE_TO_SELF,0f,                       Animation.RELATIVE_TO_SELF,1f).apply {                             duration = 2000                                fillAfter = true                         }.also  {imageview2. Startanimation (it)} stretch:
Scaleanimation (0f, 500F, 0f, 500F). Apply {duration = 2000 imageview2. Startanimation (this)} rotation:
Rotateanimation (0f, 180f). Apply {duration = 2000 imageview2. Startanimation (this)} set:
Val scale = scaleanimation (0f, 50F, 0f, 50F) Val rotate = rotateanimation (0f, 180f) animationset (true). Apply {add animation addanimation (scale) addanimation (rotate) duration = 2000 imageview2. Startanimation (this)}