×

Android-动画-view 动画笔记

96
龙衣袭
2018.06.21 13:51 字数 643

最后要实现的动画效果有:旋转,平移,缩放,透明度。主要通过系统自带的ic_launcher_round这张图来演示。
View 动画推荐使用 xml 编写,易于阅读。

View 动画并未改变 View 的真实位置,在 View 需要做交互时需要注意!!!

<set></set>中属性的含义

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true"
   android:fillBefore="true"
   android:repeatMode="reverse"
   android:shareInterpolator="true"
   android:startOffset="@android:"
  android:duration="3000">
  <alpha android:fromAlpha="1.0"
         android:toAlpha="0.3"/>
</set>

分析:
android:duration=""        动画持续时间,以毫秒为单位 
android:fillAfter=""       如果设置为true,控件动画结束后,将停留在动画结束的状态
android:fillBefore=""      如果设置为true,控件动画结束时,将回到动画开始的状态
android:startOffset=""     设置动画执行之前等待的时间(单位:毫秒)
android:repeatCount=""     重复次数
android:repeatMode=""      动画重复类型,reverse 和 restart 两个值,reverse 表示倒序回放,restart 表示从头开始放一遍
android:interpolator=""    设定插值器。

旋转:通过动画改变被作用 View 的旋转角度

  • 语法
<rotate>
    android:fromDegrees="int" //旋转开始角度,正数代表顺时针度数,负数代表逆时针度数
    android:toDegrees="int" //旋转结束角度
    android:pivotX="float" //缩放起点 X 坐标(数值,百分数,百分数p,例如 50表示以当前view左上角加 50px)
    android:pivotY="float" //缩放起点 Y 坐标(50% 表示以当前 View 的左上角加上当前 view 宽高的 50% 作为起始点)
            (50%p 表示以当前 View 的左上角加上父控件宽高的 50% 作为起始点)
</rotate>
  • 实例:view 3s 内旋转 90°
anim_rotate.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="3000">
   <rotate android:fromDegrees="0"
           android:toDegrees="90"/>
</set>

Java 中调用:点击按钮开启旋转动画
rotate.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 清除之前的动画效果,否则可能会出现动画失效的情况。mViewAnimShowIcon 为作用的 view
        mViewAnimShowIcon.clearAnimation();
        Animation rotateAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_rotate);
        mViewAnimShowIcon.setAnimation(rotateAnim);
    }
});

透明度:通过动画改变被作用 View 的透明度

  • 语法
<alpha>
   android:fromAlpha="float" //动画开始时的透明度(0.0--1.0,0.0是全透明,1.0是不透明)
   android:toAlpha="float" //动画结束时的透明度
</alpha>
  • 实例:view 3s 内透明度从 1.0f 变为 0.3f
anim_alpha.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <alpha android:fromAlpha="1.0"
           android:toAlpha="0.3"/>
</set>

Java 中调用:点击按钮开启透明度动画
alpha.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mViewAnimShowIcon.clearAnimation();
        Animation alphaAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_alpha);
        mViewAnimShowIcon.setAnimation(alphaAnim);
    }
});

平移:通过动画改变被作用 View 的位置

  • 语法
<translate>
     android:fromXDelta="float" //起始点 X 轴坐标(参数含义同 rotate )
     android:fromYDelta="float" //起始点 Y 轴坐标
     android:toXDelta="float" //结束点 X 轴坐标
     android:toYDelta="float" //结束点 Y 轴坐标
</translate>
  • 实例:view 3s 内向右移动 100 个像素
anim_translate.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <translate
        android:fromXDelta="0.0"
        android:toXDelta="100.0"/>
</set>

Java 中调用:
translate.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 必须先清除动画
        mViewAnimShowIcon.clearAnimation();
        Animation translateAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_translate);
        mViewAnimShowIcon.setAnimation(translateAnim);
    }
});

缩放:通过动画改变被作用 View 的缩放

  • 语法
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <scale android:fromXScale="1.0"
           android:toXScale="0.5"/>
</set>
  • 实例:view 3s 内旋转 90°
anim_rotate.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <scale android:fromXScale="1.0"
           android:toXScale="0.5"/>
</set>

Java 中调用:
scale.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mViewAnimShowIcon.clearAnimation();
        Animation scaleAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_scale);
        mViewAnimShowIcon.setAnimation(scaleAnim);
    }
});

插值器:系统内置了以下几个插值器,直接使用即可。

  • AccelerateDecelerateInterpolator:先加速再减速
  • LinearInterpolator:一直匀速,默认的差值器
  • AccelerateInterpolator:一直加速
  • DecelerateInterpolator:一直减速
  • AnticipateInterpolator:先回拉一下再进行正常动画轨迹
  • OvershootInterpolator:动画会超过目标值一些,然后再弹回来
  • AnticipateOvershootInterpolator:开始前回拉,最后超过一些然后回弹
  • BounceInterpolator:在目标值处弹跳一会后停止
  • CycleInterpolator:这个也是一个正弦 / 余弦曲线,它和 AccelerateDecelerateInterpolator 的区别是,它可以自定义曲线的周期,所以动画可以不到终点就结束,也可以到达终点后回弹,回弹的次数由曲线的周期决定,曲线的周期由 CycleInterpolator() 构造方法的参数决定
  • PathInterpolator:自定义动画完成度 / 时间完成度曲线,用这个 Interpolator 你可以定制出任何你想要的速度模型。定制的方式是使用一个 Path 对象来绘制出你要的动画完成度 / 时间完成度曲线
  • FastOutLinearInInterpolator:加速运动,FastOutLinearInInterpolator 的曲线公式是用的贝塞尔曲线,而 AccelerateInterpolator 用的是指数曲线。具体来说,它俩最主要的区别是 FastOutLinearInInterpolator 的初始阶段加速度比 AccelerateInterpolator 要快一些。
插值器使用方式

在 xml 中使用:
android:interpolator="@android:anim/overshoot_interpolator"

在 Java 代码中使用:
animator.setInterpolator(interpolator);

参考

Android 开发艺术探索
Android 动画:你真的会使用插值器与估值器吗?(含详细实例教学)

源码地址

开发
Web note ad 1