Android初级教程 - 补间动画

Shanghai_MrLiu
213 阅读5分钟

小知识，大挑战！本文正在参与 “程序员必备小知识” 创作活动

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

千里之堤，毁于蚁穴

在Android3.0之前的动画方面，我们主要使用的为视图动画，而视图动画有俩种表现方式：

动画效果

此效果的Demo， 已经上传此处 ~
在这里插入图片描述

基础了解

补间动画属于视图动画的一种，那么何为视图动画？简而言之就是视觉欺骗 ~

举例场景：如A控件本身拥有一个点击事件内置Toast，然后我们使用补间动画让其从位置0移动到位置1，之后我们点击位置1的控件后会发现Toast事件未生效！然后点击原始位置0的时候发现Toast生效，所以通过此例可发现这可真是一个视图动画的欺骗行为呀…

补间动画的分类

目前常见的补间动画效果一般有透明动画（AlphaAnimation）、缩放动画（ScaleAnimation）、平移动画（TranslateAnimation）、旋转动画（RotateAnimation）这类型的单一动画效果，除此之外还有以动画集的形式实现的组合动画（AnimationSet），当然他们有一个共同特点就是都继承于Animation，都是Animation的派生类 ~

补间动画的缺点

补间动画并非无所不能，否则也不会在Andorid3.0之后被属性动画替代，首先是动画效果有限，仅有平移动画、透明动画、缩放动画、旋转动画这几种 ~ 当然最主要的还是上方提到的视觉欺骗行为 ~

以透明动画为例，说明补间动画的俩种实现方式

  • xml - 实现方式

res - 新建 anim文件夹（用于存放动画的xml）

alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<!--大部分属性都在xml内进行设置，具体属性解释在动画效果中会进行说明-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1"
    android:toAlpha="0">
</alpha>

动画引用

  Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
  //设置维持动画最终效果（xml实现该属性时As不智能提示，但是仍可识别；如：    android:fillAfter="true"）
  alphaAnimation.setFillAfter(true);
  //以mView为目标控件，启用动画
  mView.startAnimation(alphaAnimation);
  • 代码 - 实现方式
  //直接创建对应动画实例，然后通过构造参数完成部分动画设置操作（一般构造参数都拥有重载方法，具体需求自己可以跳到里面观察）
  AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
  //持续时间
  alphaAnimation.setDuration(2000);
  //以mView为目标控件，启用动画
  mView.startAnimation(alphaAnimation);

通用属性

属性含义
pivotX初始X轴坐标
pivotY初始Y轴坐标
pivotX、pivotY取值范围数值、百分数、百分数p
取值 - 数值如50表示以当前View左上角坐标加50px为初始点
取值 - 百分数如50%表示以当前View的左上角加上当前View宽高的50%做为初始点
取值 - 百分数p如50%p表示以当前View的左上角加上父控件宽高的50%做为初始点
fillAftertrue - 保持动画结束效果（默认fasle，也就是动画执行完毕会恢复原始效果）
duration持续时间

动画实践

平移

属性含义

属性含义
fromXDelta动画开始时X轴的坐标位置（取值：可为具体值、百分比、百分比p(如50%p）
toXDelta动画结束时X轴的坐标位置
fromYDelta动画开始时Y轴的坐标位置（起始位置）
toYDelt动画结束时Y轴的坐标位置 （移动距离）
duration持续时间（通用属性）
  • xml - 实现方式

translate.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="50%"
    android:fromYDelta="0"
    android:toYDelta="50%"
    android:duration="1000" >
</translate>

动画引用

  Animation translateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
  mDisplay.startAnimation(translateAnimation);
  • 代码 - 实现方式
//                TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
//                  Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,Animation.RELATIVE_TO_SELF, 0.5f);
  TranslateAnimation translateAnimation = new TranslateAnimation(0, 100f, 0, 100f);
  translateAnimation.setDuration(2000);
  mDisplay.startAnimation(translateAnimation);
缩放

属性含义

属性含义
注意设值为 0 - 视图会消失、1 - 表示无变化
fromXScale初始X轴缩放比例
toXScale结束X轴缩放比例
fromYScale初始Y轴缩放比例
toYScale结束Y轴缩放比例
pivotXLook - 通用属性
pivotYLook - 通用属性
duration持续时间（通用属性）
  • xml - 实现方式

scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromXScale="1"
    android:fromYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="2"
    android:toYScale="2">

</scale>

动画引用

  Animation scaleAnimation= AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
  mDisplay.startAnimation(scaleAnimation);
  • 代码 - 实现方式
  // ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 2f, 1f, 2f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  ScaleAnimation scaleAnimation = new ScaleAnimation(1f,2f,1f,2f);
  scaleAnimation.setDuration(1000);
  mDisplay.startAnimation(scaleAnimation);
透明

属性含义

属性含义
注意取值为 0-完全透明、1-不透明
fromAlpha初始透明度
toAlpha结束透明度
duration持续时间
  • xml - 实现方式

alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<!--大部分属性都在xml内进行设置-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromAlpha="1"
    android:toAlpha="0">

</alpha>

动画引用

  Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
  alphaAnimation.setFillAfter(true);
  mDisplay.startAnimation(alphaAnimation);
  • 代码 - 实现方式
  AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
  alphaAnimation.setDuration(1000);
  mDisplay.startAnimation(alphaAnimation);
旋转

属性含义

属性含义
注意取值为 正代表顺时针度数，负代表逆时针度数
fromDegrees初始旋转角度
toDegrees结束旋转角度
pivotXLook - 通用属性
pivotYLook - 通用属性
duration持续时间
  • xml - 实现方式

rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360">
    
</rotate>

动画引用

  Animation rotateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
  mDisplay.startAnimation(rotateAnimation);
  • 代码 - 实现方式
  RotateAnimation rotateAnimation = new RotateAnimation(0, 360);
  rotateAnimation.setDuration(1000);
  mDisplay.startAnimation(rotateAnimation);
组合动画

组合动画的使用场景一般是在单动画效果无法满足需求时才进行使用的 ~

  • xml - 实现方式

group.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="50%"
        android:toYDelta="50%" />

    <alpha
        android:duration="1000"
        android:fromAlpha="1"
        android:toAlpha="0" />

    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="2"
        android:toYScale="2" />

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:toDegrees="360" />
</set>

动画引用

  Animation groupAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.group);
  mDisplay.startAnimation(groupAnimation);
  • 代码 - 实现方式
  //动画集合
  AnimationSet animationSet = new AnimationSet(true);
  //创建 - 平移动画
  TranslateAnimation translateAnimation = new TranslateAnimation(0, 50f, 0, 0);
  translateAnimation.setDuration(1000);
  //创建 - 透明动画
  AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
  alphaAnimation.setDuration(1000);
  //将动画添加到动画集合
  animationSet.addAnimation(translateAnimation);
  animationSet.addAnimation(alphaAnimation);
  animationSet.setFillAfter(true);
  //开始动画
  mDisplay.startAnimation(animationSet);
方法扩展
  • 动画无限循环

xml设置

  android:repeatMode="restart"
  android:repeatCount="infinite"

代码设置

  animation.setRepeatMode(Animation.REVERSE);
  animation.setRepeatCount(Animation.INFINITE);
  • 常见API
API含义
animation.start()开始动画
animation.cancel()取消动画
animation.hasStarted()判断当前动画是否开始
animation.hasEnded()判断当前动画是否结束
animation.reset()重新开始当前动画
  • 监听动画
   animation.setAnimationListener(new Animation.AnimationListener() {
       @Override
       public void onAnimationStart(Animation animation) {

       }

       @Override
       public void onAnimationEnd(Animation animation) {

       }

       @Override
       public void onAnimationRepeat(Animation animation) {

       }
   });
avatar
文章
阅读
粉丝