Android Animation (2) Animation Collection

1. Animation Collection

class:

  • The AnimationSet
    function is weak and cannot be customized to organize the animations in the set in a certain order and then execute.
  • AnimatorSet

Neither set duplicate functions. . .


1, AnimationSet

use:

class MainActivity : AppCompatActivity() {
    var TAG = "Animation"
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button = findViewById<Button>(R.id.btn)
        val animationSet = AnimationSet(true) //true—让这些动画共用AnimationSet设置插值器
        val alphaAnimation = AlphaAnimation(0f, 1f)
        alphaAnimation.duration = 3000
        val rotateAnimation = RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f)
        rotateAnimation.duration = 3000
        alphaAnimation.repeatCount = Animation.INFINITE
        rotateAnimation.repeatCount = Animation.INFINITE
        animationSet.addAnimation(alphaAnimation)
        animationSet.addAnimation(rotateAnimation)
        animationSet.interpolator = AccelerateDecelerateInterpolator()
        button.startAnimation(animationSet)
    }
}

Note that you cannot set the loop in AnimationSet, because it will not work if set.
Insert picture description here


2、AnimatorSet

There are two ways to add animation to AnimatorSet:

  • You can call AnimatorSet's playTogether (Animator []) or AnimatorSet's playSequentially (Animator []) method to add a set of animations at once
  • You can also use the AnimatorSet's play (Animator) method in conjunction with the methods in the AnimatorSet.Builder class to add animations one by one.

There is still no way to set a loop in AnimatorSet
Come on:
playTogether (Animator [])
Insert picture description here
just let the animation start together, but the process and result are defined by each animation

class MainActivity : AppCompatActivity() {
    var TAG = "Animation"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    fun click(view: View) {
        val animatorSet = AnimatorSet()
        val button = findViewById<Button>(R.id.btn)
        val backgroundColorAnimator = ObjectAnimator.ofInt(button, "BackgroundColor", Color.WHITE, Color.BLACK, Color.WHITE)
        val rotation= ObjectAnimator.ofFloat(button, "Rotation", 0f, 360f)
        animatorSet.playTogether(backgroundColorAnimator, rotation)
        animatorSet.duration = 3000
        animatorSet.start()
    }
    fun click2(view: View) {
        val animatorSet = AnimatorSet()
        val button2 = findViewById<Button>(R.id.btn2)
        val backgroundColorAnimator = ObjectAnimator.ofArgb(button2, "BackgroundColor", Color.WHITE, Color.BLACK, Color.WHITE)
        val rotation= ObjectAnimator.ofFloat(button2, "Rotation", 0f, 360f)
        animatorSet.playTogether(backgroundColorAnimator, rotation)
        backgroundColorAnimator.duration = 3000
        rotation.duration = 6000
        animatorSet.start()
    }
}

Insert picture description here
We first set a different execution time for each animation on the second button

Here comes the understanding of the difference between the following ofInt setting color and ofArgb

  • ofInt is accumulated by a little bit from the starting color to the target color.
  • ofArgb can be understood as setting the gradient effect we usually set with ps.

playSequentially (Animator [])
sequential execution
Insert picture description here

class MainActivity : AppCompatActivity() {
    var TAG = "Animation"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    fun click(view: View) {
        val animatorSet = AnimatorSet()
        val button = findViewById<Button>(R.id.btn)
        val backgroundColorAnimator = ObjectAnimator.ofInt(button, "BackgroundColor", Color.WHITE, Color.BLACK, Color.WHITE)
        val rotation= ObjectAnimator.ofFloat(button, "Rotation", 0f, 360f)
        animatorSet.playSequentially(backgroundColorAnimator, rotation)
        animatorSet.duration = 3000
        animatorSet.start()
    }
    fun click2(view: View) {
        val animatorSet = AnimatorSet()
        val button2 = findViewById<Button>(R.id.btn2)
        val backgroundColorAnimator = ObjectAnimator.ofArgb(button2, "BackgroundColor", Color.WHITE, Color.BLACK, Color.WHITE)
        val rotation= ObjectAnimator.ofFloat(button2, "Rotation", 0f, 360f)
        animatorSet.playSequentially(backgroundColorAnimator, rotation)
        backgroundColorAnimator.duration = 3000
        rotation.duration = 6000
        animatorSet.start()
    }
}

Insert picture description here
Through the two button effects, we found that
       when duration is set in AnimatorSet, each animation will be duration for a duration, the total duration: n * duration

For the playSequentially loop problem, take the above as an example. If you set an infinite loop in the first animation, the second animation will never be executed, and setting the duration in Animation is also invalid. Unless you cancel it manually

AnimatorSet.Builder
builder
three commonly used functions:

  • Common usage:animatorSet.play().with().before().after()
  1. with animation
  2. before precedent
  3. after
  4. play returns an AnimatorSet.Bulider object

So which animation sequence is it? Remember:

  • A after BA is executed after B is executed
  • A before BA is executed before B is executed

Verify it:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    fun click(view: View) {
        val animatorSet = AnimatorSet()
        val button = findViewById<Button>(R.id.btn)
        val backgroundColorAnimator = ObjectAnimator.ofInt(button, "BackgroundColor", Color.WHITE, Color.BLACK, Color.WHITE)
        val rotation = ObjectAnimator.ofFloat(button, "Rotation", 0f, 360f)
        animatorSet.duration = 3000
        animatorSet.play(backgroundColorAnimator).before(rotation)
        animatorSet.start()
    }
    fun click2(view: View) {
        val animatorSet = AnimatorSet()
        val button2 = findViewById<Button>(R.id.btn2)
        val backgroundColorAnimator = ObjectAnimator.ofArgb(button2, "BackgroundColor", Color.WHITE, Color.BLACK, Color.WHITE)
        val rotation = ObjectAnimator.ofFloat(button2, "Rotation", 0f, 360f)
        backgroundColorAnimator.duration = 3000
        rotation.duration = 6000
        animatorSet.play(backgroundColorAnimator).after(rotation)
        animatorSet.start()
    }
}

Insert picture description here


How can these complex animation sequences be played repeatedly? Look at the code below:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    fun click2(view: View) {
        val animatorSet = AnimatorSet()
        val button2 = findViewById<Button>(R.id.btn2)
        val backgroundColorAnimator = ObjectAnimator.ofArgb(button2, "BackgroundColor", Color.WHITE, Color.BLACK, Color.WHITE)
        val rotation = ObjectAnimator.ofFloat(button2, "Rotation", 0f, 360f)
        backgroundColorAnimator.duration = 3000
        rotation.duration = 6000
        animatorSet.play(backgroundColorAnimator).after(rotation)
        animatorSet.addListener(object : Animator.AnimatorListener{
            override fun onAnimationRepeat(animation: Animator?) {

            }

            override fun onAnimationEnd(animation: Animator?) {
                animation?.start()
            }

            override fun onAnimationCancel(animation: Animator?) {
            }

            override fun onAnimationStart(animation: Animator?) {
            }
        })
        animatorSet.start()
    }
}

Insert picture description here

After the animation execution is completed, reopen it.
Note that although onAnimationEnd has passed in an animation here, it does not mean every animation, but a big animation synthesized by each animation in the human home, so it will not be messy.
The next section enters the interpolator estimator, and ofObject () usage.
Hope to learn from you.

Published 16 original articles · liked 0 · visits 249

Guess you like

Origin blog.csdn.net/weixin_43860530/article/details/105346998