天天看点

android中的view动画view动画

view动画

动画的类型

Tween动画,通过对 View 的内容进行一系列的图形变换 (包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML来做也可以采用编码来做。Tween动画有4种类型:

1. 渐变透明度动画效果

1. Xml定义动画使用的配置节点:<alpha/
2. 编码定义动画使用的类:AlphaAnimation
           
  1. 在代码中创建时,代码编写如下:
    /**
     * TODO 1、渐变透明度动画效果
     * @param view
     */
    public void alpha(View v) {
    // 1、创建alpha动画
    AlphaAnimation animation = new AlphaAnimation(0.5f, 1.0f);// 透明度,1.0f不透明,负数也没有关系
    
    // 设置
    //动画持续时长
    animation.setDuration(2000);
    
    // 重复次数,"TranslateAnimation.INFINITE"代表的是:-1,无限循环
    animation.setRepeatCount(TranslateAnimation.INFINITE);
    
    // 指定重复播放的模式
    // REVERSE:反转,RESTART:默认,重新开始
    animation.setRepeatMode(TranslateAnimation.REVERSE);
    
    alpha.setFillAfter(true);// true,表示停在后面的状态不变化
    
    // 让图片播放这个动画
    iv.startAnimation(animation);
    }
               
  2. 在xml文件创建动画,整体代码编写如下
    //在xml文件中的编写部分
    <?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0"
    android:toAlpha="1.0"
    android:duration="3000" 
    android:repeatCount="2"
    android:repeatMode="reverse">
    
    </alpha>
    //再用代码吧xml文件的内容读取出来
    public void alpha(View v) {
        //用动画工具类读取xml文件,转换成Animation对象
        Animation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha_demo);
        //开启动画
        iv_image.startAnimation(alpha);
        }
               

2. 渐变尺寸缩放动画效果

1. Xml定义动画使用的配置节点:<scale/>
2. 编码定义动画使用的类:ScaleAnimation
           
  1. 在代码中创建时,代码编写如下
    /**
     * TODO 1、渐变尺寸缩放动画效果
     * @param view
     */
    public void scale(View v) {
    
        ScaleAnimation animation = new ScaleAnimation(3, 1, // x方向,从什么倍数到什么倍数
            3, 1,// y方向,从什么倍数到什么倍数
            Animation.RELATIVE_TO_SELF, 0.5f, // 放大的中心点 x方向
            Animation.RELATIVE_TO_SELF, 0.5f); // 放大的中心店 y方向
    
        // 定义动画时长
        .setDuration(2000);
        // 无限循环播放
        animation.setRepeatCount(TranslateAnimation.INFINITE);
    
        // 指定重复播放的模式
        animation.setRepeatMode(TranslateAnimation.REVERSE);
    
        // 让图片播放这个动画
        iv_image.startAnimation(animation);
    }
               
  2. 在xml文件中创建动画,整体代码编写如下:
    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="5"
    android:pivotY="5"
    android:toXScale="50%"
    android:toYScale="50%"
    android:duration="5000"
    android:repeatCount="3"
    >
    </scale>
    
    //再在代码中读取xml文件中的内容,把xml文件中的内容转化成Animation对象
    public void scale(View v) {
        //用动画工具类来转换xml文件中的内容
        Animation scale = AnimationUtils.loadAnimation(this,R.anim.scale_demo);
        iv_image.startAnimation(scale);
    }
               
  3. 一些参数的解释
    1. 动画的进度使用interpolator控制,android提供了几个Interpolator 子类,实现了不同的速度曲线,如LinearInterpolator实现了匀速效果、Accelerateinterpolator实现了加速效果、DecelerateInterpolator实现了减速效果等。还可以定义自己的Interpolator子类,实现抛物线、自由落体等物理效果。
    2. fromXScale(浮点型) 属性为动画起始时X坐标上的缩放尺寸
    3. fromYScale(浮点型) 属性为动画起始时Y坐标上的缩放尺寸
    4. toXScale(浮点型) 属性为动画结束时X坐标上的缩放尺寸
    5. toYScale(浮点型) 属性为动画结束时Y坐标上的缩放尺寸
    6. 说明: 以上四种属性值
      1. 0.0表示收缩到没有
      2. 1.0表示正常无缩放
      3. 值小于1.0表示收缩
      4. 值大于1.0表示放大
    7. pivotX(浮点型) 属性为动画相对于物件的X坐标的开始位置
    8. pivotY(浮点型) 属性为动画相对于物件的Y坐标的开始位置
    9. 说明:
      1. 以上两个属性值 从0%-100%中取值
      2. 50%为物件的X或Y方向坐标上的中点位置
    10. duration(长整型)属性为动画持续时间 。说明: 时间以毫秒为单位
    11. fillAfter(布尔型)属性当设置为true,该动画转化在动画结束后被应用

3. 画面位置移动动画效果

1. Xml定义动画使用的配置节点:<translate/>
2. 编码定义动画使用的类:TranslateAnimation
           
  1. 在代码中创建时代码编写如下:
    /**
     * TODO 3、画面位置移动动画效果
     * @param view
     */
    public void translate(View v) {
    /*
     * RELATIVE_TO_PARENT :相对屏幕的宽高来说 倍数
     * RELATIVE_TO_SELF :相对自己控件的宽高来说 倍数
     * Animation.ABSOLUTE :绝对值 指的是像素
     */
    TranslateAnimation animation = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT,
            0.5f, Animation.RELATIVE_TO_PARENT, 0,
            Animation.RELATIVE_TO_PARENT, 0);
    // 定义动画时长
    animation.setDuration(2000);
    // 无限循环播放
    animation.setRepeatCount(TranslateAnimation.INFINITE);
    
    // 指定重复播放的模式
    animation.setRepeatMode(TranslateAnimation.RESTART);
    
    // 让图片播放这个动画
    iv.startAnimation(animation);
    }
               
  2. 在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="2000"
    android:repeatCount="3"
    android:repeatMode="reverse">
    </translate>
    
    //在代码中把xml文件转化成Animation对象
    public void translate(View v) {
        //加载动画XML文件,生成动画指令
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_demo);
        //开始执行动画
        iv_image.startAnimation(animation);
    }
               
  3. 一些参数的解析
    1. 1.

4. 画面旋转动画效果

1. Xml定义动画使用的配置节点:<rotate/>
2. 编码定义动画使用的类:RotateAnimation
           
  1. 在代码中创建时代码编写如下:
    /**
       * TODO 4、画面旋转动画效果
       * @param view
       */
    public void rotate(View v) {
    
    RotateAnimation animation = new RotateAnimation(0,
            360,// 从什么角度旋转到什么角度
            Animation.RELATIVE_TO_SELF, 0.5f, 
            Animation.RELATIVE_TO_SELF,
            0.5f);//以自身中点为圆心,旋转360
    
    // 定义动画时长
    animation.setDuration(2000);
    // 无限循环播放
    animation.setRepeatCount(TranslateAnimation.INFINITE);
    
    // 指定重复播放的模式
    animation.setRepeatMode(TranslateAnimation.REVERSE);
    
    // 让图片播放这个动画
    iv.startAnimation(animation);
    }
               
  2. 在xml文件中创建动画,编码如下
    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%" 
    android:duration="2000"
    android:repeatCount="3"
    android:repeatMode="reverse">
    
    </rotate>
    //再在代码中把xml文件中的内容转化成Animation对象
    public void rotate(View v) {
        Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate_demo);
        iv_image.startAnimation(rotate);
    }
               
  3. 一些参数
    1. repeatCount 重复次数
    2. fromDegrees为动画起始时物件的角度:
    3. 当角度为负数——表示逆时针旋转
    4. 当角度为正数——表示顺时针旋转
    5. (负数fromDegrees——toDegrees正数:顺时针旋转)
    6. (负数fromDegrees——toDegrees负数:逆时针旋转)
    7. (正数fromDegrees——toDegrees正数:顺时针旋转)
    8. (正数fromDegrees——toDegrees负数:逆时针旋转)
    9. toDegrees属性为动画结束时物件旋转的角度 可以大于360度
    10. pivotX,pivotY 为动画相对于物件的X、Y坐标的开始位.说明:以上两个属性值 从0%-100%中取值,50%为物件的X或Y方向坐标上的中点位置

集合动画

  1. 在代码中编写集合动画
    public void set(View v){
    //包含 平移动画 、 旋转动画
    //      Interpolator : 插入器   false : 每个动画使用自己的插入器,  true: 大家都使用集合里面的插入器,使用同一
    AnimationSet set = new AnimationSet(false);
    
    //定义平移动画
    TranslateAnimation animation = new TranslateAnimation(
            Animation.ABSOLUTE, 0, 
            Animation.ABSOLUTE, 200, 
            Animation.ABSOLUTE, 0,
            Animation.ABSOLUTE, 0);
    // 定义动画时长
    animation.setDuration(2000);
    // 无限循环播放
    animation.setRepeatCount(TranslateAnimation.INFINITE);
    
    // 指定重复播放的模式
    animation.setRepeatMode(TranslateAnimation.REVERSE);
    
    /**///定义旋转动画
    RotateAnimation ranimation = new RotateAnimation(0,
            360,// 从什么角度旋转到什么角度
            Animation.RELATIVE_TO_SELF, 0.5f, 
            Animation.RELATIVE_TO_SELF,0.5f);
    
    // 定义动画时长
    ranimation.setDuration(2000);
    // 无限循环播放
    ranimation.setRepeatCount(TranslateAnimation.INFINITE);
    
    // 指定重复播放的模式
    ranimation.setRepeatMode(TranslateAnimation.REVERSE);
    
    
    ScaleAnimation sanimation = new ScaleAnimation(1, 2, // x方向,从什么倍数到什么倍数
            1, 2,// y方向,从什么倍数到什么倍数
            Animation.RELATIVE_TO_SELF, 0.5f, // 放大的中心点 x方向
            Animation.RELATIVE_TO_SELF, 0.5f); // 放大的中心店 y方向
    
    // 定义动画时长
    sanimation.setDuration(2000);
    // 无限循环播放
    sanimation.setRepeatCount(TranslateAnimation.INFINITE);
    
    // 指定重复播放的模式
    sanimation.setRepeatMode(TranslateAnimation.REVERSE);
    
    AlphaAnimation aanimation = new AlphaAnimation(0, 1);
    
    // 定义动画时长
    aanimation.setDuration(2000);
    // 无限循环播放
    aanimation.setRepeatCount(TranslateAnimation.INFINITE);
    
    // 指定重复播放的模式
    aanimation.setRepeatMode(TranslateAnimation.REVERSE);
    //把不同的动画设置到集合中去
    set.addAnimation(animation);
    set.addAnimation(ranimation);
    set.addAnimation(aanimation);
    
    //播放集合动画
    iv.startAnimation(set);
               
    }
  2. 在xml文件中编写集合动画
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <alpha
        android:duration="3000"
        android:fromAlpha="0"
        android:repeatCount="3"
        android:repeatMode="reverse"
        android:toAlpha="1.0" >
    </alpha>
    
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:repeatCount="3"
        android:repeatMode="reverse"
        android:toXDelta="30%p"
        android:toYDelta="30%p" >
    </translate>
    
    <scale
        android:duration="3000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="3"
        android:pivotY="3"
        android:repeatCount="3"
        android:toXScale="50%"
        android:toYScale="50%" />
    
    </set>
    //再在代码中把xml文件转化成Animation对象
    // 动画集合
    public void set(View v) {
        Animation set = AnimationUtils.loadAnimation(this, R.anim.set_demo);
        iv_image.startAnimation(set);
    }