走穿Android动画---补间动画alpha、scale、translate、rotate、set的xml属性及用法

最新推荐文章于 2023-08-20 16:27:49 发布

峥嵘life

最新推荐文章于 2023-08-20 16:27:49 发布

阅读量1.5k

点赞数

分类专栏： android Andr图形和动画文章标签： android xml 动画补间动画 android动画

本文链接：https://blog.csdn.net/wenzhi20102321/article/details/75419416

版权

android 同时被 2 个专栏收录

385 篇文章 41 订阅

订阅专栏

Andr图形和动画

7 篇文章 0 订阅

订阅专栏

走穿Android动画—补间动画alpha、scale、translate、rotate、set的xml属性及用法

先看几种简单的补间动画效果：

上面一共显示了五个效果：平移、透明、缩放、旋转和旋转+透明
代码也是比较简单的，以平移和组合效果简单讲解：

1.资源文件：

补间动画的文件都是放在res下的anmi文件夹内，没有的话要自己创建

（1）平移的translate_anim.xml

往同时往右边和下边方向移动100个像素

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

(2)组合的all_anim.xml

透明效果：从完全显示到很透明
旋转效果：逆时针旋转650度


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

    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromDegrees="0"
            android:toDegrees="-650"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="3000"
            android:fillAfter="true"/>
</set>

这里的组个可以放置多个，这里只是放置两个动画透明和旋转做示例。

2.java控制的主要代码

  ImageView iv;
  Animation animation;


    /**
     * 平移动画
     */
    public void translate(View view) {
        animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
        iv.startAnimation(animation);
    }

  /**
     * 各种效果集于一身的动画
     */
    public void all(View view) {
        setIVAnimation(R.anim.all_anim);
    }

  /**
     * 传入动画的ID，直接给ImageView设置动画
     */
    private void setIVAnimation(int animID) {
        iv.startAnimation(AnimationUtils.loadAnimation(this, animID));
    }

上面平移动画也是可以直接调用那个私有方法来调用动画。

下面是补间动画和各种属性的详细讲解。

一.基本知识

补间动画就是通过对场景的对象不断进行图像变化来产生动画效果,在实现补间动画时,只要定义动画开始和结束的”关键帧”其它过度帧由系统自动计算并补齐.android中提供了4种补间动画效果：透明、旋转、缩放、平移。

1.android补间动画的四种类别

alpha	渐变透明度动画效果
translate	画面转换位置移动动画效果
scale	渐变尺寸伸缩动画效果
rotate	画面转移旋转动画效果

上面这四个类别名称是可以在xml中当作根标签使用，来对应各种补间动画。
当然也是可以用set做根标签，里面放几个补间动画，做组合效果。

2.关于补间动画的类

Animation有五个子类：AlphaAnimation (透明动画)TranslateAnimation (平移动画)、ScaleAnimation (缩放动画)、RotateAnimation (旋转动画)、AnimationSet (组合动画)

2.动画文件存放位置

补间动画定义文件应该存放在res/anim文件夹下，访问时采用R.anim.XXX.xml的方式，位置如图：

3.根据xml文件获取动画类的对象，并设置动画

//获取动画对象
 Animation  animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
//你也可以获取具体的动画对象
     AlphaAnimation  animation = (AlphaAnimation) AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
//给控件设置动画
  imageView.startAnimation(animation);

//这里控件不仅仅是ImageView，也可以是TextView，或是一个布局或一个自定义View都是可以的！

4.各个补间动画可以设置的通用属性（Animation类的属性）

下面这些属性在各个补间动画效果内都是通用的，并且表示的意义也是一样的。

（1）android:interpolator 插值器

用于控制动画的变化速度,使用动画效果可以匀速,先加速再减速,先减速后加速或抛物线速度等各种速度变化，后面会有文章详解

（2）android:repeatMode

用于设置动画的重复方式,可选择为reverse(反向)或restart(重新开始)
比如放大动画，图像变化刚开始从小到大，第二次会从大变小，后面一直重复。。。

（3）android:repeatCount

用于设置动画的重复次数,属性可以是代表次数的数值,也可以是infinite(无限循环)
默认次数为0，如果设置次数为1，动画会执行2次，以此类推。。。

（4）android:duration

用于指定动画持续的时间,单位为毫秒
如果你的动画时间没有设置，动画就是在一瞬间完成的，比如从图像从正常到很透明，就想换了一个图片的感觉，没有过程。

（5）android:fillBefore

如果设置为true,控件动画结束时，还原到开始动画前的状态
比如，透明动画，从透明到完全显示，动画结束后，图像会显示动画没开始前的样子。

（6）android:fillEnabled

与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态

（7）android:fillAfter

如果设置为true，控件动画结束时，将保持动画最后时的状态
这个属性如果设置了为true，fillBefore也设置为true，动画结束后，图像是不会恢复的，就是以fillAfter为准。
如果fillAfter属性设置为false，不管fillBefore设置为true还是false，图像最终都是会恢复动画前的样子！

二.透明动画：alpha

图像大小不变，动画实现图像从某一个透明度的值变成另一个透明度的值。透明度的值从0到1的浮点数，0为透明，1为完全显示。

xml代码：

<?xml version="1.0" encoding="utf-8"?> 
<alpha xmlns:android="http://schemas.android.com/apk/res/android" 
       android:fromAlpha="1.0"        //设置开始时的透明度，这里表示完全可见
       android:toAlpha="0.1"          //设置动画结束时的透明度，很透明
       android:duration="3000"        //动画持续时间
       android:fillBefore="true"      //是否是保持开始的样子（完全可见），默认为true
       android:fillAfter="true"       //是否保存结束时的透明度，默认为false
/>

解析：

透明动画的属性设置

1. android:fromAlpha

用于指定动画开始时的透明度,值为0.0代表完全透明 ,值为1.0代表完全不透明

2. android:toAlpha

用于指定动画结束时的透明度,值为0.0代表完全透明,值为1.0代表完全不透明

其他

注意上面属性fillBefore和fillBefore如果都是true，以fillAfter属性为主，即图像保持动画最后的效果。
如果上面两个属性都是false，最后图像还是会显示动画开始时的样子。

上面这段代码运行的效果：

重复3次的效果：

从不太显示到完全显示三次效果。把重复的次数设置为2，即可。

设置：

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:fromAlpha="0.1"
       android:toAlpha="1"
       android:duration="3000"
       android:fillAfter="false"
       android:fillBefore="false"
       android:repeatCount="2"
        />

效果：

三.平移动画：translate

图像大小不变，通过为图像指定开始时的位置,结束时的位置,经及持续时间来创建动画效果。

xml代码

从左上角往右下角平移

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:fromXDelta="0"   //x轴开始的位置
           android:toXDelta="100"   //往右滑动100个像素点
           android:fromYDelta="0"   //y轴开始的位置
           android:toYDelta="100"   //往下移动100个像素点
           android:duration="2000"  //时间2000毫秒
           android:fillBefore="true"//动画结束后，回到原来的位置
/>

解析：

1. android:fromXDelta

用于指定动画开始时水平方向上的起始位置，默认单位是像素，可以使用100%代表的是自身长度，100%p代表的是父框体的长度。50%就是表示一半的距离。下面属性的距离也可以这样表示。

2. android:toXDelta

用于指定动画结束时水平方向上的位置

3. android:fromYDelta

用于指定动画开始时垂直方向上的位置

4. android:toYDelta

用于指定动画结束时垂直方向上的位置

从左往右的平移：

刚好移出屏幕

设置：

           android:fromXDelta="0"   //x轴开始的位置
           android:toXDelta="100%p" //往右滑动一个父框体的距离
           android:fromYDelta="0"   //y轴开始的位置
           android:toYDelta="0"     //不往下移动
           android:duration="2000"  //时间2000毫秒
           android:fillBefore="true"//动画结束后，回到原来的位置

效果：

图解

从上下的平移：

设置：

           android:fromXDelta="100"
           android:toXDelta="100"
           android:fromYDelta="0"
           android:toYDelta="200"
           android:duration="2000"

效果：

可以看到在距离y轴100像素的地方，从上往下移动200像素的效果。

从右下角往右上角平移：

设置：

““
android:fromXDelta=”80%p”
android:toXDelta=”0”
android:fromYDelta=”80%p”
android:toYDelta=”0”


####效果：
![7](http://i.imgur.com/noGUwnj.gif)

##四.缩放动画：scale
改变图片大小，动画指定开始时缩放系数,结束时的缩放系数,以及持续时间来他建动画,在缩放时还可以通过指定轴心点坐标来改变绽放的中心。
###1.xml代码

###2.解析
####（1）android:fromXScale 用于指定动画开始时水平方向上的缩放系数，浮点数，值0表示无，值为1.0表示不变化 ,值为2.0表示放大一倍 。。。以此类推
####（2）android:toXScale 用于指定动画结束时水平方向上的缩放系数。
####（3）android:fromYScale 用于指定动画开始时垂直方向上的缩放系数。
####（4）android:toYScale 用于指定动画结束时垂直方向上的缩放系数。
####（5）android:pivotX 用于指定轴心点X轴坐标，200表示距离y轴200个像素点的距离，50%表示自身的x轴中心点的，50%p表示父框体的x轴中心点 
####（6）android:pivotY 用于指定轴心点Y轴坐标，200表示距离x轴200个像素点的距离，50%表示自身的y轴中心点的，50%p表示父框体的y轴中心点 

###上面代码运行的效果：
![9](http://i.imgur.com/OftxOrM.gif)
可以看到图像是由无变到有，并且是（200，200）这个点开始做放大，最后到1.4倍后停下，并保持最后的样子。

###从0变大到3倍效果：
####设置代码：
设置在自身位置中心开始放大

   android:fromXScale="0.0"
   android:toXScale="3"
   android:fromYScale="0.0"
   android:toYScale="3"
   android:pivotX="50%"
   android:pivotY="50%"

####效果：
![9](http://i.imgur.com/nX5jY85.gif)

###在父窗体中心位置放大到0.5倍

####设置代码：

   android:fromXScale="0.0"
   android:toXScale="0.5"
   android:fromYScale="0.0"
   android:toYScale="0.5"
   android:pivotX="50%p"
   android:pivotY="50%p"

这个比较坑的就是它会向你图像本来的位置移动！这里会从中心点向原点方向移动。
####效果：
![10](http://i.imgur.com/NJoQssJ.gif)
这里可以看到图像向原来的方向移动一半，如果设置放大的倍率大于1，就会发现图像移动到屏幕外面去了！如果设置x和y的倍率刚好是1，图像放大后，刚好到原点的位置。
要想图像在中心点放大或缩小，就要把图像位置定在中心点，然后在自身的中心点，进行放大或缩小。



##五.旋转动画：rotate
旋转动画就是通过为动画指定开始时的旋转角度,结束时的旋转角度,经及持续时间来创建动画,在旋转时还可以通过指定轴心点坐标来改为旋转的中心。 

###1.xml代码

###2.解析
####(1)android:fromDegrees 用于指定动画开始时旋转的角度数,正负任意大小的浮点数，正的表示顺时针，负的表示逆时针 
####(2) android:toDeggrees 用于指定动画结束时旋转的角度 数,正负任意大小的浮点数，正的表示顺时针，负的表示逆时针 
####(3) android:pivotX 用于指定轴心点X轴坐标，20表示距离y轴20个像素点的距离，50%表示自身的x轴中心点的，50%p表示父框体的x轴中心点 
####(4) android:pivotY 用于指定轴心点Y轴坐标 ，20表示距离x轴20个像素点的距离，50%表示自身的y轴中心点的，50%p表示父框体的y轴中心点 

###上面代码显示的效果：

![12](http://i.imgur.com/uwzQevC.gif)
可以看到图像，以自身为中心旋转90度后停下来。

###图片以父窗体的40%的一个中心点旋转180度
####代码：

    android:fromDegrees="0"
    android:toDegrees="180"
    android:pivotX="40%p"
    android:pivotY="40%p"
    android:duration="3000"

####效果：
![12](http://i.imgur.com/mwXdSMv.gif)
可以看到图片旋转了180，但是旋转到了屏幕右下角
图解：
![13](http://i.imgur.com/b8C07KM.png)
###如果把最终角度换成360度，效果：
 语句：android:toDegrees="360"
![14](http://i.imgur.com/csJTwZA.gif)
角度可以任意指定，旋转720度，就会显示旋转两圈效果！

这里的pivotX和pivotY，我刚开始是以为图像在这个点旋转，但是实际上是以这个点为中心旋转，半径就是图像原点到这个中心点之间的距离！

##六.组合动画：set
组合动画就是可以把多种动画放在一起显示。可以是单独一个，也可以是多个东西一起显示。
###1.xml代码

2.解析

组合动画，各个动画的属性还是不变

set标签也是可以设置通用的那些属性。

但是如果通用属性在set标签中设置，在其他动画也设置，会有什么效果呢？

根据之前Android的其他知识，我们知道里面的标签属性会覆盖掉外面的标签属性，
但是这个补间动画的却不是，通用属性都是以外边set标签中设置为准，不然可以看看上面代码运行的效果，
上面代码从左到右移动要5秒，里面标签设置旋转时间2秒，但是实际效果是旋转5秒时间
同样，fillAfter等等这些通用属性都是以set标签为准的。

上面代码的效果：

关于xml使用补间动画，这里已经详细介绍了各方面的知识，但是插值器还没有说，这个会在后面的文章介绍。
插值器，其实就是可以让动画显示效果有点不同，比如一个平移过程，前期匀速，到中间加速到最后。
动画还是原来动画，只是显示的速率会发生改变！

共勉：成功是失败走剩的路。

失败是什么？没有什么，只是走向成功更近一步；怎么走向成功呢？当你走穿所有失败的路，剩下的那条路必定是成功的路，但是也不一定是每条路都走到底，有时候看穿也可以的。

峥嵘life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
走穿Android动画---补间动画alpha、scale、translate、rotate、set的xml属性及用法

走穿Android动画—补间动画alpha、scale、translate、rotate、set的xml属性及用法先看几种简单的补间动画效果：上面一共显示了五个效果：平移、透明、缩放、旋转和旋转+透明代码也是比较简单的，以平移和组合效果简单讲解：1.资源文件：补间动画的文件都是放在res下的anmi文件夹内，没有的话要自己创建
复制链接

扫一扫