美文网首页
Android 动画总结(3) - 补间动画

Android 动画总结(3) - 补间动画

作者: 三流之路 | 来源:发表于2018-04-01 18:21 被阅读0次

    Android 动画总结(1) - 概述
    Android 动画总结(2) - 帧动画
    Android 动画总结(4) - 插值器
    Android 动画总结(5) - 属性动画
    Android 动画总结(6) - 估值器
    Android 动画总结(7) - ViewGroup 子元素间的动画
    Android 动画总结(8) - Activity 转场动画
    Android 动画总结(9) - 过渡动画


    Tween Animation 包括、ScaleAnimation、TranslateAnimation、RotateAnimation 以及这四种动画的组合 AnimationSet。

    这种动画不改变 View 的位置,比如 TranslateAnimation,虽然看着 View 移走了,但是点击事件仍然在原位置触发,过去遇到这种情况,需要计算动画结束后 View 在屏幕上的精确位置,然后在这个位置再显示出一个 View 来,将原来的隐藏掉,现在遇到这种情况可以用 Property Animation 来替换。

    xml 方式

    res/anim 下创建 set_demo_anim.xml,只为说明,运行时间位置比较随便。

    <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillAfter="true"
        android:shareInterpolator="false">
        <alpha
            android:duration="200"
            android:fromAlpha="0.0"
            android:toAlpha="1.0" />
        <translate
            android:duration="300"
            android:fromXDelta="5"
            android:fromYDelta="0%"
            android:toXDelta="20"
            android:toYDelta="30%p" />
        <rotate
            android:duration="200"
            android:fromDegrees="0"
            android:toDegrees="359"
            android:pivotX="5"
            android:pivotY="50%p"
            android:repeatCount="1" />
        <set
            android:interpolator="@android:anim/accelerate_interpolator"
            android:startOffset="700">
            <scale
                android:duration="100"
                android:fromXScale="0.9"
                android:fromYScale="0.9"
                android:pivotX="50%"
                android:pivotY="50%"
                android:toXScale="1.1"
                android:toYScale="1.1" />
    
            <scale
                android:duration="100"
                android:fromXScale="1"
                android:fromYScale="1"
                android:pivotX="50%"
                android:pivotY="50%"
                android:startOffset="100"
                android:toXScale="0.9090909"
                android:toYScale="0.9090909" />
        </set>
    </set>
    
    1. <set> 里可以嵌套 <set>
    2. <set> 中,如果 startOffset 了,后一个动画是在前一个基础上改变的,比如上面最后两个 <scale>,第一步从 0.9 放大到 1.1,第二步想从 1.1 回到 1 的,但 fromXScale 不能是 1.1,toXScale 也不能是 1,因为这样相当于在前面一个动画结束的基础上先变成 1.1 倍,再回 1,即对于原控件,是 1.21 变到最后的 1.1,所以想变成原始的 1,是对已经变成 1.1 的这个大小来说,从它的 1 变成 1/1.1 = 0.9090909
    3. 如果是 <set>,fillAfter 这种属性要设置在 <set> 标签里才有效
    val anim = AnimationUtils.loadAnimation(ctx, R.anim.set_demo_anim)
    view.animation = anim
    

    代码方式

    上面的动画 xml 对应的代码书写方式

    val set = AnimationSet(false)
    set.fillAfter = true
    
    val alpha = AlphaAnimation(0f, 1f)
    alpha.duration = 200
    
    val translate = TranslateAnimation(Animation.ABSOLUTE, 5f, Animation.ABSOLUTE, 20f,
            Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_PARENT, 0.3f)
    translate.duration = 300
    
    val rotate = RotateAnimation(0f, 359f, Animation.ABSOLUTE,
            5f, Animation.RELATIVE_TO_PARENT, 0.5f)
    rotate.duration = 200
    rotate.repeatCount = 1
    
    ///////////////////////////
    val childSet = AnimationSet(false)
    childSet.interpolator = AccelerateInterpolator()
    childSet.startOffset = 700
    
    val scaleInChildSet = ScaleAnimation(0.9f, 1.1f, 0.9f, 1.1f, 0.5f, 0.5f)
    scaleInChildSet.duration = 100
    
    val scaleInChildSet2 = ScaleAnimation(1f, .9090909f, 1f, .9090909f, 0.5f, 0.5f)
    scaleInChildSet2.duration = 100
    scaleInChildSet2.startOffset = 100
    
    childSet.addAnimation(scaleInChildSet)
    childSet.addAnimation(scaleInChildSet2)
    ///////////////////////////
    
    set.addAnimation(alpha)
    set.addAnimation(translate)
    set.addAnimation(rotate)
    set.addAnimation(childSet)
    
    view.startAnimation(set)
    // set.cancel()
    // set.reset()
    // view.clearAnimation();
    

    属性值

    特有属性:

    • set
      • android:interpolator - 指定插值器
      • android:shareInterpolator - true 表示所有的子结点共享这一个插值器
    • alpha
      • android:fromAlpha - 开始时透明度
      • android:toAlpha - 结束时透明度
    • scale
      • android:fromXScale - 开始时水平方向缩放比例
      • android:toXScale - 结束时水平方向缩放比例
      • android:fromYScale
      • android:toYScale
      • android:pivotX - 水平方向动画的中心点
      • android:pivotY
    • translate
      • android:fromXDelta - 开始时水平方向相对于自身位置的偏移量
        • 浮点值(5),自身偏移 5 像素
        • 百分比(5%),自身宽的5%
        • 百分比(5%p),父容器宽的5%
      • android:toXDelta
      • android:fromYDelta
      • android:toYDelta
    • rotate
      • android:fromDegrees - 旋转前的角度
      • android:toDegrees - 旋转后的角度
      • android:pivotX - 水平方向旋转中心位置
        • 浮点值(5),离自身左边缘 5 像素
        • 百分比(5%),离自身左边缘的大小是自身宽的5%
        • 百分比(5%p),离父容器左边缘的大小是自身宽的5%
      • android:pivotY

    通用属性:

    属性名 含义
    android:detachWallpaper Special option for window animations: if this window is on top of a wallpaper, don't animate the wallpaper with it.
    android:duration 动画持续时间(毫秒)
    android:fillAfter true 时,动画结束停留在最后
    android:fillBefore 动画结束回到最初。fillEnabled 为 false 时,系统默认它为 true,即使设为 false 也没用。fillEnable 为 true 才可以控制
    android:fillEnabled 为 true 时 fillBefore 才有效
    android:interpolator 指定插值器
    android:repeatCount 动画重复次数
    android:repeatMode 动画重复模式,有 restart 和 reverse 两种
    android:startOffset 延迟执行动画
    android:zAdjustment 动画期间 Z 轴位置,有三个值:bottom(放到其它所有内容下面),normal(保持动画前状态),top(放到其它所有内容上面)

    自定义补间动画

    若几种基本的动画无法实现需求,可以继承 Animation 自定义 Tween Animation,主要是重写 applyTransformation 方法。具体的写法可以参考 AlphaAnimation 这类系统已经实现了的。

    class MyAnimation : Animation() {
        /**
         * @param interpolatedTime 动画时间进行比,从 0 到 1
         * @param t 在不同时刻对动画的变形程度
         */
        override fun applyTransformation(interpolatedTime: Float, t: Transformation?) {
            super.applyTransformation(interpolatedTime, t)
        }
    }
    

    相关文章

      网友评论

          本文标题:Android 动画总结(3) - 补间动画

          本文链接:https://www.haomeiwen.com/subject/icjacftx.html