安卓属性动画总结

属性动画简要介绍

安卓属性动画分为四种:

  1. 位置变化:TranslateAnimation
  2. 缩放: ScaleAnimation
  3. 旋转: RotateAnimation
  4. 渐变: AlphaAnimation
    当然还可以将上面四种动画进行各种组合,可以采用串联或者并联实现多种效果.

动画实例

1. 位置变化

  • 效果图:
    安卓属性动画总结_第1张图片
  • 代码:
       private fun move(srcView: View, destView: View) {
        val animateTime = 2000L
        val yOffset = destView.top - srcView.top
        val xOffset = destView.left - srcView.left
        val animation = TranslateAnimation(0f, xOffset.toFloat(), 0f, yOffset.toFloat())

        animation.fillAfter = true
        animation.duration = animateTime
        animation.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationEnd(animation: Animation) {
                srcView.clearAnimation()
                srcView.visibility = View.INVISIBLE
            }

            override fun onAnimationStart(animation: Animation) {}
            override fun onAnimationRepeat(animation: Animation) {}
        })

        srcView.startAnimation(animation)
    }

2. 缩小

  • 效果图:
    安卓属性动画总结_第2张图片
  • 代码:
    private fun scaleDown(srcView: View) {
        val animateTime = 2000L
        val animation = ScaleAnimation(1f, 0.2f, 1f, 0.2f,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f)
        animation.fillAfter = true
        animation.duration = animateTime
        srcView.startAnimation(animation)
    }
  • 从正中间缩小
    private fun scaleDown(srcView: View) {
        val animateTime = 2000L
        val animation = ScaleAnimation(1f, 0.2f, 1f, 0.2f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
        animation.fillAfter = true
        animation.duration = animateTime
        srcView.startAnimation(animation)
    }

3. 放大

  • 效果图:
    安卓属性动画总结_第3张图片
  • 代码:
    private fun scaleDown(srcView: View) {
        val animateTime = 2000L
        val animation = ScaleAnimation(1f, 2f, 1f, 2f,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f)
        animation.fillAfter = true
        animation.duration = animateTime
        srcView.startAnimation(animation)
    }
  • 从正中间放大
private fun scaleDown(srcView: View) {
        val animateTime = 2000L
        val animation = ScaleAnimation(1f, 2f, 1f, 2f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
        animation.fillAfter = true
        animation.duration = animateTime
        srcView.startAnimation(animation)
    }

4. 旋转

  • 效果图:
    安卓属性动画总结_第4张图片
  • 代码:
    private fun rotate(srcView: View) {
        val animateTime = 2000L
        val animation = RotateAnimation(0f, 360f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
        animation.fillAfter = true
        animation.duration = animateTime
        srcView.startAnimation(animation)
    }

5. 风车(无限循环)

  • 效果图:
    安卓属性动画总结_第5张图片
  • 代码:
      private fun rotate(srcView: View) {
        val animateTime = 5000L
        val animation = RotateAnimation(0f, 360f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
        animation.fillAfter = true
        animation.repeatCount = Animation.INFINITE
        animation.duration = animateTime
        animation.interpolator = LinearInterpolator()
        srcView.startAnimation(animation)
    }

6. 渐变(淡出)

  • 效果图:
    安卓属性动画总结_第6张图片
  • 代码:
    private fun fadeOut(srcView: View) {
        val animateTime = 2000L
        val animation =  AlphaAnimation(1f, 0f)
        animation.fillAfter = true
        animation.duration = animateTime
        srcView.startAnimation(animation)
    }

7. 串联,淡出淡入

  • 效果图:
    安卓属性动画总结_第7张图片
  • 代码:
    private fun fadeOutAndFadeIn(srcView: View) {
        val animateTime = 2000L
        val fadeOutAnimation = AlphaAnimation(1f, 0f)
        fadeOutAnimation.fillAfter = true
        fadeOutAnimation.duration = animateTime

        val fadeInAnimation = AlphaAnimation(0f, 1f)
        fadeInAnimation.fillAfter = true
        fadeInAnimation.duration = animateTime

        fadeOutAnimation.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationEnd(animation: Animation) {
                srcView.startAnimation(fadeInAnimation)
            }

            override fun onAnimationStart(animation: Animation) {}
            override fun onAnimationRepeat(animation: Animation) {}
        })

        srcView.startAnimation(fadeOutAnimation)
    }

8. 并联,移动并缩小

  • 效果图:
    安卓属性动画总结_第8张图片
  • 代码:
    private fun scaleDownAndMove(srcView: View, destView: View) {
        val animateTime = 2000L
        val scaleAnimation = ScaleAnimation(1f, 0.2f, 1f, 0.2f,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f)

        val yOffset = destView.top - srcView.top
        val xOffset = destView.left - srcView.left
        val translateAnimation = TranslateAnimation(0f, xOffset.toFloat(), 0f, yOffset.toFloat())//平移动画  从0,0,平移到100,100

        val animations = AnimationSet(false)
        animations.addAnimation(scaleAnimation)
        animations.addAnimation(translateAnimation)
        animations.fillAfter = true
        animations.duration = animateTime
        animations.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationEnd(animation: Animation) {
                srcView.clearAnimation()
                srcView.visibility = INVISIBLE
            }

            override fun onAnimationStart(animation: Animation) {}
            override fun onAnimationRepeat(animation: Animation) {}
        })

        srcView.startAnimation(animations)
    }

PS:
如果要无限循环播放,添加如下代码:

 //设置无线循环
animation.repeatCount = Animation.INFINITE
 //设置匀速旋转
animation.interpolator = LinearInterpolator()

Demo源代码

https://gitee.com/cxyzy1/animationDemo

安卓开发技术分享: https://www.jianshu.com/p/442339952f26
点击关注专辑,查看最新技术分享
更多技术总结好文,请关注:「程序园中猿」
安卓属性动画总结_第9张图片

你可能感兴趣的:(安卓)