补间动画

2020-06-26  本文已影响0人  echoSuny

Android中的补间动画由5种类型组成:alpha、scale、translate、rotate、set。在实现方式上可以用XML和代码实现。

公共属性

scale

XML方式实现
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="1.4"
    android:fromYScale="0.0"
    android:toYScale="1.4"
    android:duration="700"
    android:pivotX="50%"
    android:pivotY="50%">
</scale>
        btn.setOnClickListener {
            val scale = AnimationUtils.loadAnimation(this, R.anim.scale_anim)
            tv.startAnimation(scale)
        }
代码方式实现
        btn.setOnClickListener {

            val scale = ScaleAnimation(
                0.0f,
                1.4f,
                0.0f,
                1.4f,
                Animation.RELATIVE_TO_SELF,
                0.5f,
                Animation.RELATIVE_TO_SELF,
                0.5f
            )
            scale.duration = 700
            tv.startAnimation(scale)
        }

alpha

XML方式实现
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.1"
    android:duration="3000"
    android:fillAfter="true">
</alpha>
        btn.setOnClickListener {
            val alpha = AnimationUtils.loadAnimation(this, R.anim.alpha_anim)
            tv.startAnimation(alpha)
        }
代码方式实现
        btn.setOnClickListener {
            val alpha = AlphaAnimation(1.0f, 0.1f)
            alpha.duration = 3000
            alpha.fillAfter = true
            tv.startAnimation(alpha)
        }

rotate

XML方式实现
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"
    android:fillAfter="true">
</rotate>
        btn.setOnClickListener {
            val rotate = AnimationUtils.loadAnimation(this, R.anim.rotate_anim)
            tv.startAnimation(rotate)
        }
代码方式实现
        btn.setOnClickListener {
            val rotate = RotateAnimation(
                0f,
                180f,
                Animation.RELATIVE_TO_SELF,
                0.5f,
                Animation.RELATIVE_TO_SELF,
                0.5f
            )
            rotate.duration = 2000
            rotate.fillAfter = true
            tv.startAnimation(rotate)
        }

translate

XML方式实现
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="220"
    android:fromYDelta="0"
    android:toYDelta="220"
    android:duration="1000"
    android:fillAfter="true">
</translate>
        btn.setOnClickListener {
            val translate = AnimationUtils.loadAnimation(this, R.anim.translate_anim)
            tv.startAnimation(translate)
        }
代码方式实现
        btn.setOnClickListener {
            val translate = TranslateAnimation(0f, 220f, 0f, 220f)
            translate.duration = 1000
            translate.fillAfter = true
            tv.startAnimation(translate)
        }

set

set是一个容器类标签,用于定义动画集。前面的4种只能完成特定的效果,而set则可以把这些效果组合起来,共同完成一个动画。

XML方式实现
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fillAfter="true">
    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.6"
        android:toYScale="1.6" />

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>

    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720"/>

    <translate
        android:fromXDelta="0"
        android:fromYDelta="100%p"
        android:toXDelta="0"
        android:toYDelta="30%p"/>
</set>
        btn.setOnClickListener {
            val set = AnimationUtils.loadAnimation(this, R.anim.set_anim)
            tv.startAnimation(set)
        }
代码方式实现
        btn.setOnClickListener {
            val scale = ScaleAnimation(
                0.0f,
                1.6f,
                0.0f,
                1.6f,
                Animation.RELATIVE_TO_SELF,
                0.5f,
                Animation.RELATIVE_TO_SELF,
                0.5f
            )

            val alpha = AlphaAnimation(0.0f, 1.0f)

            val rotate = RotateAnimation(
                0f,
                720f,
                Animation.RELATIVE_TO_SELF,
                0.5f,
                Animation.RELATIVE_TO_SELF,
                0.5f
            )

            val translate = TranslateAnimation(
                Animation.ABSOLUTE,
                0f,
                Animation.ABSOLUTE,
                0f,
                Animation.RELATIVE_TO_PARENT,
                1.0f,
                Animation.RELATIVE_TO_PARENT,
                0.3f
            )

            val set = AnimationSet(true)
            set.duration = 2000
            set.fillAfter = true

            set.addAnimation(alpha)
            set.addAnimation(scale)
            set.addAnimation(rotate)
            set.addAnimation(translate)

            tv.startAnimation(set)
        }

设置监听

如果需要对动画的的开始、结束进行监听,则必须在代码中给动画设置监听,具体如下:

            set.setAnimationListener(object :Animation.AnimationListener{
                override fun onAnimationRepeat(animation: Animation?) {
                    // 动画完成一个周期时回调
                }

                override fun onAnimationEnd(animation: Animation?) {
                    // 动画结束时回调
                }

                override fun onAnimationStart(animation: Animation?) {
                    // 动画开始时回调
                }
            })
上一篇 下一篇

猜你喜欢

热点阅读