动画基础

动画基础

1. 什么是动画？

• 动画有下面两种情况：

  • 同一个图形通过视图在界面上进行透明度、缩放、旋转和平移的变化（view动画——View Animation）。

  • 在界面的同一个位置上不断切换显示不同的图片（Drawable动画——Drawable Animation）。

• Android中提供了两种实现动画的方式：

  • 纯编码的方式

  • XML配置的方式

• 动画在应用中是非常常见的界面效果，也是提高用户体验的一种好手段。

---

2. ViewAnimation的分类（也叫补间动画）

**基于view的渐变动画，它只改变了view的绘制效果，而实际属性值未变。**比如：动画移动一个按钮位置， 但按钮点击的实际位置仍未改变。

2.1 单一动画（Animation）

2.1.1 缩放动画（ScaleAnimation）

• code实现：ScaleAnimation（float fromX，float toX，float fromY， float toY，int pivotXType，float pivotXValue，int pivotYType，float pivotYValue）

  • fromX：开始时X轴上的缩放比例

  • toX：结束时X轴上的缩放比例

  • fromY：开始时Y轴上的缩放比例

  • toY：结束时Y轴上的缩放比例

  • pivotXType：X轴的坐标类型（计算X轴上偏移量的方式）

  • pivotXValue：中心点相对视图左上角在X轴上的偏移量

  • pivotXType：Y轴的坐标类型（计算Y轴上偏移量的方式）

  • pivotYValue：中心点相对视图左上角在Y轴上的偏移量

  传入合适的参数即可生成一个ScaleAnimation对象，之后通过Animation对象的一系列set方法可以设置动画的其他属性，再调用view.startAnimaton（animation）方法，即可让指定视图以指定的动画方式变化。

• XML实现：

  1. 定义动画文件：

     AS中在res文件夹下新建Android Resource File，Resource type 选择Animation，root element可以手动输入scale或其他动画元素名称。

     
     <set xmlns:android="http://schemas.android.com/apk/res/android"
          android:duration="2000"
          android:startOffset="1000"
          android:fillAfter="true">
          
      	  <scale android:fromXScale="0.5"
         		 android:toXScale="1.5"
         	     android:fromYScale="0"
          		 android:toYScale="1"
          		 android:pivotX="50%"
          		 android:pivotY="0%"/>
     set>
     

     如上，编码实现动画的各种参数都在XML文件通过定义节点的属性设置出来，但有一点需要注意：pivotXType 和 pivotYType 在文件中无法定义，是由 pivotX 和 pivotY 的值确定的:

     Animation.ABSOLUTE： 值为数值（默认以Px为单位），如：100

     Animation.RELATIVE_TO_SELF：值为百分数（以当前视图的宽度或高度为基数），如：50%

     Animation.RELATIVE_TO_PARENT：值为百分数+p（以父视图的宽度或高度为基数），如：50%p

  2. 加载动画文件得到动画对象：

     通过AnimationUtils.loadAnimation（Context context，int id）获得。

  3. 启动动画：view.startAnimaton（animation

2.1.2 透明度动画（AlphaAnimation）

• code实现：AlphaAnimation(float fromAlpha, float toAlpha)

  • fromAlpha：开始时视图的透明度（完全透明：0）
  • toAlpha：结束时视图的透明度 （完全不透明：1）

• XML实现：

  实现步骤与缩放动画的XML实现步骤类似，仅是一些属性不同，具体参考缩放动画的XML实现。

2.1.3 旋转动画（RotateAnimation）

• code实现：RotateAnimation（float fromDegrees， float toDegrees， int pivotXType， float pivotXValue， int pivotYType， float pivotYValue）

  • fromDegrees：开始时视图的角度（逆时针方向为负）

  • toDegrees：结束时视图的角度 （顺时针方向为正）

  • pivotXType：X轴的坐标类型（计算X轴上偏移量的方式）

  • pivotXValue：中心点相对视图左上角在X轴上的偏移量

  • pivotXType：Y轴的坐标类型（计算Y轴上偏移量的方式）

  • pivotYValue：中心点相对视图左上角在Y轴上的偏移量

• XML实现：

  实现步骤与缩放动画的XML实现步骤类似，仅是一些属性不同，具体参考缩放动画的XML实现。

2.1.4 平移动画（TranslateAnimation）

• code实现：TranslateAnimation（int fromXType， float fromXValue， int toXType， float toXValue， int fromYType， float fromYValue， int toYType， float toYValue）

  • fromXType：开始时X轴的坐标类型

  • fromXValue：开始时视图左顶点在X轴的位置

  • toXType：结束时X轴的坐标类型

  • toXValue：结束时视图左顶点在X轴的位置

  • fromYType：开始时Y轴的坐标类型

  • fromYValue：开始时视图左顶点在Y轴的位置

  • toYType：结束时Y轴的坐标类型

  • toYValue：结束时视图左顶点在Y轴的位置

• XML实现：

  实现步骤与缩放动画的XML实现步骤类似，仅是一些属性不同，具体参考缩放动画的XML实现。

2.2 复合动画（AnimationSet）

​ 由多个单一动画组合在一起的动画。

• code实现：

  1. 创建单一动画并设置
  2. 创建复合动画对象：
     AnimationSet animationSet = new AnimationSet(true);
  3. 为复合动画对象添加动画：
     animationSet.addAnimation(alphaAnimation); animationSet.addAnimation(rotateAnimation);
  4. 启动动画：
     view.startAnimaton（animationSet）

• XML实现：

  和单一动画实现类似，只不过是set元素下有两个子动画元素，分别设置属性后即可。

  • Animation的公用方法：

    • setDuration（long durationMills）：设置持续时间（单位：ms）

    • setStartOffset（long startOffset）：设置开始的延迟时间（单位：ms）

    • setFillBefore（boolean fillBefore）：设置最终是否固定在起始状态

    • setFillAfter（boolean fillAfter）：设置最终是否固定在最后的状态

    • setRepeatCount（int repeatCount）：设置动画的重复次数，但该方法只对code实现的动画有效

    • setAnimationListener（AnimationListener listener）：设置动画监听

    • 坐标类型：确定动画作用点的坐标

      坐标类型	表示意义
      Animation.ABSOLUTE	以屏幕左顶点为坐标原点
      Animation.RELATIVE_TO_SELF	以自身视图左顶点为坐标原点
      Animation.RELATIVE_TO_PARENT	以父视图左顶点为坐标原点

    • 启动动画：view.startAnimation（animation）

    • 结束动画：view.clearAnimation（）

    • 动画监听器（AnimationListener）:

      • onAnimationStart（Animation animation）：动画开始的回调
      • onAnimationEnd（Animation animation）：动画结束的回调
      • onAnimationRepeat（Animation animation）：动画重复执行

  • 从XML文件中加载动画：
    AnimationUtils.loadAnimation（Context context，int id）：该方法可以从指定XML动画文件中加载并返回一个动画对象，参数id为XML动画文件的id。

  • interpolator属性的使用：
    interpolator被用来修饰动画效果，定义动画的变化率，可以使存在的动画效果加速（accelerated）、减速（decelerated）和重复（repeated）等。

    interpolator类型	含义
    linear_interpolato	线性变化（匀速）
    accelerate_interpolator	加速变化
    decelerate_interpolator	减速变化
    cycle_interpolator	周期循环变化（类似三角函数）

---

3. DrawableAnimation（帧动画）

加载一系列Drawable资源来创建动画，这种传统动画某称程度上就是创建不同的图片序列顺序播放，就像电影胶片，使用XML文件可以更简单地组成动画帧。

1. 配置动画文件：

   AS中在res文件夹下新建Android Resource File，Resource type 选择Drawable，root element手动输入animation-list即可。

   
   <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
       android:oneshot="false">
   
       <item
           android:drawable="@drawable/nv1"
           android:duration="500"/>
       <item
           android:drawable="@drawable/nv2"
           android:duration="500"/>
       <item
           android:drawable="@drawable/nv3"
           android:duration="500"/>
       <item
           android:drawable="@drawable/nv4"
           android:duration="500">
       item>
   animation-list>
   

   如上，从代码中可以看出每一个子元素代表动画中的一帧，其中android:oneshot这个属性用于指定动画的重复情况，true为不重复，false为重复。

2. 设置视图的背景为动画文件：

   android:background属性设为Drawable动画文件即可。

3. 获取背景动画图片对象：
   AnimationDrawable animationDrawable = (AnimationDrawable)view.getBackground();

4. 启动动画：调用animationDrawable.start()
   停止动画：调用animationDrawable.stop()

---

4. PropertyAnimation（属性动画）

该动画的对象除了传统的View对象，还可以是Object对象。动画运行之后，Object对象的属性值会被实实在在地改变。 PropertyAnimation能够通过改变View对象的实际属性来实现View动画。任何时候View属性的改变，View能自动调用invalidate（）来重新绘制视图。

• 下面代码就是创建了一个复合属性动画，其中ObjectAnimator的静态方法名指定了后面不定参数的类型，translationX指定了属性动画的类型，同时创建复合属性动画需要使用AnimatorSet类而不是AnimationSet类，向复合属性动画对象添加动画使用playTogether() 这个方法即可。

  ObjectAnimator animator = ObjectAnimator.ofFloat(iv_animation, "translationX", 0,iv_animation.getWidth());
  ObjectAnimator animator2 = ObjectAnimator.ofFloat(iv_animation, "translationY", 0,iv_animation.getHeight());
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.setDuration(2000);
  animatorSet.setInterpolator(new BounceInterpolator());
  //两个动画一起播放
  animatorSet.playTogether(animator, animator2);
  //开始播放
  animatorSet.start();
  

• 上面的代码为创建属性动画的另一种方法。

  iv_animation.animate()
      .translationXBy(iv_animation.getWidth())
      .translationYBy(iv_animation.getWidth())
      .setDuration(2000)
      .setInterpolator(new BounceInterpolator())
      .start();