Android动画帧动画、补间动画、属性动画 (一)

最新推荐文章于 2025-02-07 22:58:21 发布

T-bright

最新推荐文章于 2025-02-07 22:58:21 发布

阅读量569

点赞数

分类专栏： Android基础文章标签： android-动画动画

本文链接：https://blog.youkuaiyun.com/tongsiw/article/details/61614560

版权

Android基础专栏收录该内容

9 篇文章

订阅专栏

android中动画有三种

帧动画（Frame Animation）、补间动画（Tween Animation）、属性动画（Property Animation）

一、帧动画（Frame Animation）

具体实现过程：

1、在res/drawable目录下一个文件progress_animlist.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<!--
    根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画  
    根标签下，通过item标签对动画中的每一个图片进行声明  
    android:duration 表示展示所用的该图片的时间长度  

-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item
        android:drawable="@drawable/p1"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p2"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p3"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p4"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p5"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p6"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p7"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p8"
        android:duration="150">
    </item>
</animation-list>

根节点是animation-list（动画列表），里面有一个或者多个item节点组成，oneshot属性表示是否只播放一次，true表示只会播放一次，false表示一直循环播放，内部用item节点声明一个动画帧，android:drawable指定此帧动画所对应的图片资源，android:druation代表此帧持续的时间，整数，单位为毫秒。

2、用ImageView控件作为动画载体来显示动画

  <ImageView
        android:src="@drawable/progress_animlist"
        android:id="@+id/animi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

纯java代码方式

//创建帧动画
AnimationDrawable animationDrawable = new AnimationDrawable();
//添加帧       animationDrawable.addFrame(getResources().getDrawable(R.mipmap.p1), 300);        animationDrawable.addFrame(getResources().getDrawable(R.mipmap.p2), 300);        animationDrawable.addFrame(getResources().getDrawable(R.mipmap.p3), 300);        animationDrawable.addFrame(getResources().getDrawable(R.mipmap.p4), 300);       animationDrawable.addFrame(getResources().getDrawable(R.mipmap.p5), 300);

//设置动画是否只播放一次， 默认是false
animationDrawable.setOneShot(false);

//根据索引获取到那一帧的时长
int duration = animationDrawable.getDuration(2);

//根据索引获取到那一帧的图片
Drawable drawable = animationDrawable.getFrame(0);

//判断是否是在播放动画
boolean isRunning = animationDrawable.isRunning();

//获取这个动画是否只播放一次
boolean isOneShot = animationDrawable.isOneShot();

//获取到这个动画一共播放多少帧
int framesCount = animationDrawable.getNumberOfFrames();

//把这个动画设置为background，兼容更多版本写下面那句
mIvImg.setBackground(animationDrawable);
mIvImg.setBackgroundDrawable(animationDrawable);

//开始播放动画
animationDrawable.start();
//停止播放动画
animationDrawable.stop();

二、补间动画（Tween Animation）

补间动画可以用java代码实现，也可以通过xml文件进行配置

动画类型	Java代码实现方式	XML配置方式
渐变透明度动画效果	AlphaAnimation	alpha
缩放动画效果	ScaleAnimation	scale
旋转动画效果	RotateAnimation	rotate
位置移动动画效果	TranslateAnimation	translate
组合动画效果	AnimationSet	set

具体实现

1、alpha渐变透明度动画效果

(1)、xml方式

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fillAfter="false"
    android:fromAlpha="1.0"
    android:toAlpha="0.5" />
    <!--
         透明度控制动画效果 alpha
            浮点型值：
                fromAlpha 属性为动画起始时透明度
                toAlpha   属性为动画结束时透明度
                说明:
                    0.0表示完全透明
                    1.0表示完全不透明
                以上值取0.0-1.0之间的float数据类型的数字

            长整型值：
                duration  属性为动画持续时间
                说明:
                    时间以毫秒为单位

        -->

XML方式加载方式通过AnimationUtils.loadAnimation(this, R.anim.anim_alpha)获取Animation

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
imageView.startAnimation(alphaAnimation);

(2)、Java代码方式

//第一个参数fromAlpha为 动画开始时候透明度
//第二个参数toAlpha为 动画结束时候透明度
Animation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(500);//设置动画持续时间为500毫秒
alphaAnimation.setFillAfter(false);//设置动画结束后保持当前的位置（即不返回到动画开始前的位置）
imageView.startAnimation(alphaAnimation);

2、scale缩放动画效果

(1)、xml方式

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:startOffset="0"
    android:toXScale="1.5"
    android:toYScale="1.5" />
    <!--
     尺寸伸缩动画效果 scale
     属性：
        interpolator 指定一个动画的插入器
        在我试验过程中，使用android.res.anim中的资源时候发现
        有三种动画插入器:
            accelerate_decelerate_interpolator  加速-减速 动画插入器
            accelerate_interpolator        加速-动画插入器
            decelerate_interpolator        减速- 动画插入器
        其他的属于特定的动画效果

        repeatMode，动画重复的模式，reverse为反向，当第偶次执行时，动画方向会相反。restart为重新执行，方向不变
      浮点型值：

        fromXScale 属性为动画起始时 X坐标上的伸缩尺寸    
        toXScale   属性为动画结束时 X坐标上的伸缩尺寸     

        fromYScale 属性为动画起始时Y坐标上的伸缩尺寸    
        toYScale   属性为动画结束时Y坐标上的伸缩尺寸    

            说明:
                 以上四种属性值    

                    0.0表示收缩到没有 
                    1.0表示正常无伸缩     
                    值小于1.0表示收缩  
                    值大于1.0表示放大

        pivotX     属性为动画相对于物件的X坐标的开始位置
        pivotY     属性为动画相对于物件的Y坐标的开始位置

            说明:
                    以上两个属性值 从0%-100%中取值
                    50%为物件的X或Y方向坐标上的中点位置

      长整型值：
        duration  属性为动画持续时间
            说明:   时间以毫秒为单位

        startOffset 动画多次执行的间隔时间，如果只执行一次，执行前会暂停这段时间，单位毫秒

        repeatCount，动画重复的计数，动画将会执行该值+1次
      布尔型值:
        fillAfter 属性 当设置为true ，该动画转化在动画结束后被应用

-->

XML方式加载方式通过AnimationUtils.loadAnimation(this, R.anim.anim_scale)获取Animation

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
imageView.startAnimation(alphaAnimation);

(2)、Java代码方式

 Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(500);//设置动画持续时间为500毫秒
    scaleAnimation.setFillAfter(true);//如果fillAfter的值为true,则动画执行后，控件将停留在执行结束的状态
    scaleAnimation.setFillBefore(false);//如果fillBefore的值为true，则动画执行后，控件将回到动画执行之前的状态
    scaleAnimation.setRepeatCount(3);//设置动画循环次数
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setStartOffset(0);
    scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//设置动画插入器
    imageView.startAnimation(scaleAnimation);

3、rotate旋转动画效果

(1)、xml方式

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromDegrees="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="-360" />
<!--
     rotate 旋转动画效果
       属性：interpolator 指定一个动画的插入器
             在我试验过程中，使用android.res.anim中的资源时候发现
             有三种动画插入器:
                accelerate_decelerate_interpolator   加速-减速 动画插入器
                accelerate_interpolator               加速-动画插入器
                decelerate_interpolator               减速- 动画插入器
             其他的属于特定的动画效果

       浮点数型值:
            fromDegrees 属性为动画起始时物件的角度    
            toDegrees   属性为动画结束时物件旋转的角度 可以大于360度   


            说明:
                     当角度为负数——表示逆时针旋转
                     当角度为正数——表示顺时针旋转              
                     (负数from——to正数:顺时针旋转)   
                     (负数from——to负数:逆时针旋转) 
                     (正数from——to正数:顺时针旋转) 
                     (正数from——to负数:逆时针旋转)       

            pivotX     属性为动画相对于物件的X坐标的开始位置
            pivotY     属性为动画相对于物件的Y坐标的开始位置

            说明:        以上两个属性值 从0%-100%中取值
                         50%为物件的X或Y方向坐标上的中点位置

        长整型值：
            duration  属性为动画持续时间
            说明:       时间以毫秒为单位

    -->

XML方式加载方式通过AnimationUtils.loadAnimation(this, R.anim.anim_rotate)获取Animation

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
imageView.startAnimation(alphaAnimation);

(2)、Java代码方式

Animation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
rotateAnimation.setInterpolator(this, android.R.anim.accelerate_decelerate_interpolator);//设置动画插入器
imageView.startAnimation(rotateAnimation);

4、translate位置移动动画效果

(1)、xml方式

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="100"
    android:fromYDelta="0"
    android:interpolator="@android:anim/cycle_interpolator"
    android:toXDelta="0"
    android:toYDelta="0" />

  <!--
     translate 位置转移动画效果
        整型值:
            fromXDelta 动画起始时 X坐标上的位置    
            toXDelta   动画结束时 X坐标上的位置
            fromYDelta 动画起始时 Y坐标上的位置
            toYDelta   动画结束时 Y坐标上的位置
            注意:
                     没有指定fromXType toXType fromYType toYType 时候，
                     默认是以自己为相对参照物             
        长整型值：
            duration  属性为动画持续时间
            说明:   时间以毫秒为单位
    -->

XML方式加载方式通过AnimationUtils.loadAnimation(this, R.anim.anim_translate)获取Animation

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
imageView.startAnimation(alphaAnimation);

(2)、Java代码方式

Animation translateAnimation = new TranslateAnimation(0, 100, 0, 0);
translateAnimation.setDuration(500);
translateAnimation.setInterpolator(this, android.R.anim.cycle_interpolator);//设置动画插入器
translateAnimation.setFillAfter(true);//设置动画结束后保持当前的位置（即不返回到动画开始前的位置）
imageView.startAnimation(translateAnimation);

5、set组合动画效果

(1)、xml方式

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

    <scale
        android:duration="500"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

XML方式加载方式通过AnimationUtils.loadAnimation(this, R.anim.anim_set)获取Animation

AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.anim_set);
imageView.startAnimation(animationSet);

(2)、Java代码方式

AnimationSet animationSet = new AnimationSet(true);

Animation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
alphaAnimation.setDuration(500);//设置动画持续时间为500毫秒

Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);//设置动画持续时间为500毫秒
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//设置动画插入器

animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);

imageView.startAnimation(animationSet);