Android学习之动画(1)

Android中动画分为三种,逐帧动画,补间动画,属性动画,这篇先总结逐帧动画和补间动画。

逐帧动画

1, 是什么

字面上理解,帧之间追逐,帧动画是顺序的播放一系列图片,从而产生动画的效果,是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,与动画片的工作原理类似,。

2,怎么样

不灵活,大量使用图片消耗资源,容易产生oom。

3, 怎么用

首先在res目录下的drawable文件夹编写一个xml文件

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">//
<item android:drawable="@mipmap/icon1" android:duration="300"/>
<item android:drawable="@mipmap/icon2" android:duration="300"/>
<item android:drawable="@mipmap/icon3" android:duration="300"/>
<item android:drawable="@mipmap/icon4" android:duration="300"/>
<item android:drawable="@mipmap/icon5" android:duration="300"/>
<item android:drawable="@mipmap/icon6" android:duration="300"/>
<item android:drawable="@mipmap/icon7" android:duration="300"/>
<item android:drawable="@mipmap/icon8" android:duration="300"/>
<item android:drawable="@mipmap/icon9" android:duration="300"/>
</animation-list>

oneshot属性表示是否循环播放,值为true则只播放一次。

方法调用

//把定义好的动画资源设置到imageview上,
imgView.setImageResource(R.drawable.icons);
//通过getDrawable()获取到AnimationDrawable对象
AnimationDrawable animationDrawable = (AnimationDrawable) view.getDrawable();
//启动动画
animationDrawable.start();

停止动画

animationDrawable.stop();

补间动画

1, 是什么

补间顾名思义,补充中间,就是只要知道动画的初始值和结束值,中间的值系统会自动帮我们计算。

补间动画也称view动画,只针对view,有移动动画,缩放动画,透明动画,旋转动画四种。

2,怎么样

补间动画基本可以满足大多数的动画效果,可是它只针对于view,而且只是改变view实现的效果,因此

具有局限性。

3,怎么用

Java代码方式使用

(1)移动动画

移动动画是通过TranslateAnimation类来实现的,有三个构造方法。常用的有两个

构造方法一:

public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) {}

参数解释
fromXDelta,toXDelta在源码中的

*@param fromXDelta Change in X coordinate to apply at the start of the
animation
@param toXDelta Change in X coordinate to apply at the end of the
animation*

翻译:fromXDelta 动画起始时X轴坐标与原先位置的距离。toXDelta 动画结束时应用在X轴坐标与原位置距离【翻译有误,大概意思是这样】

fromYDelta,toYDelta与fromXDelta,toXDelta解释相似。只是方向不同。单位均为像素。

使用如下:

TranslateAnimation translateAnimation = new TranslateAnimation(0f, 100f, 0f, 100f);

表示View移动100像素,fromXDelta与toXDeta的差如果大于0,则表示向右移动;差小与0,则表示向左移动。大右小左。Y同理,大下小上。

构造方法二:

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue) {
    }

参数解释

fromXType,toXType X方向移动类型,有三种类型:
Animation.ABSOLUTE:代表绝对像素
Animation.RELATIVE_TO_SELF:代表相对自身平移
Animation.RELATIVE_TO_PARENT:代表相对父View平移

fromXValue,toXValue X方向上移动的值,
当type为Animation.ABSOLUTE时,表示具体的像素值

当type为Animation.RELATIVE_TO_SELF或Animation.RELATIVE_TO_PARENT:这两个值为比例值,取值范围【0.0f,1.0f】

Y方向同理

使用如下:

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);

具体使用

                 /**
                 * 方式二:java代码方式
                 */
                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.setDuration(3000);
                translateAnimation.setRepeatCount(Animation.INFINITE);
                translateAnimation.setRepeatMode(Animation.REVERSE);
                imageView.startAnimation(translateAnimation);

setDuration:整型值,设置动画执行时间

setRepeatCount:整型值,设置重复次数,可以是具体次数也可以是Animation.INFINITE,表示无限循环

setRepeatMode:设置重复模式,需要和setRepeatCount一起使用,有两种模式Animation.REVERSE:倒叙回放,Animation.RESTART:重新播放

(2)透明动画
透明动画是通过AlphaAnimation类实现的,有两个构造方法,常用的有一个

 public AlphaAnimation(float fromAlpha, float toAlpha) {

    }

参数解释

fromAlpha:起始透明度,float值,取值范围【0.0~1.0】1.0f:表示完全不透明,0.0f:表示完全透明
toAlpha:结束值透明度,float值,取值范围【0.0~1.0】1.0f:表示完全不透明,0.0f:表示完全透明

具体使用:、

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.2f);
                alphaAnimation.setDuration(3000);
                alphaAnimation.setRepeatCount(Animation.INFINITE);
                alphaAnimation.setRepeatMode(Animation.REVERSE);
                imageView.startAnimation(alphaAnimation);

相关设置与上相同。

(3)旋转动画

旋转动画是通过RotateAnimation类来实现的,有四个构造方法,常用的有三个

1,构造方法一:

public RotateAnimation(float fromDegrees, float toDegrees) {

    }

2,构造方法二:

  public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY) {

    }

3,构造方法三:

  public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue) {

    }

参数解释

前面两个参数都一样为fromDegrees,toDegrees,分别表示起始时的角度,结束时的角度,pivotX,pivotY源码解释为
** @param
* pivotX The X coordinate of the point about which the object is
* being rotated, specified as an absolute number where 0 is the left
* edge.
* @param pivotY The Y coordinate of the point about which the object is
* being rotated, specified as an absolute number where 0 is the top
* edge.
/

翻译

pivotX:被旋转的对象的X轴坐标,指定为一个绝对的数值,其中0表示顶部边缘。pivotY同理。(翻译不太准确,大概意思是这样)

pivotXType, float pivotXValue源码解释为:

** @param pivotXType Specifies how pivotXValue should be interpreted. One of
* Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or
* Animation.RELATIVE_TO_PARENT.
* @param pivotXValue The X coordinate of the point about which the object
* is being rotated, specified as an absolute number where 0 is the
* left edge. This value can either be an absolute number if
* pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%)
* otherwise.*

翻译

pivotXType 指定pivotXValue 应该如何被定义, 值为Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, 或Animation.RELATIVE_TO_PARENT之一。

pivotXValue 被旋转的对象的X轴坐标,指定为一个绝对的数值,其中0表示顶部边缘,如果pivotXType 是ABSOLUTE,值可以是一个绝对的数值,否则,是一个百分数或比例值(其中1.0是100%)【翻译有误,大概意思是这样】

Y方向同理

具体使用,以第三种构造方法为例

RotateAnimation rotateAnimation = new RotateAnimation(0f, 360f,
                        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                rotateAnimation.setDuration(3000);
                rotateAnimation.setRepeatMode(Animation.REVERSE);
                rotateAnimation.setRepeatCount(Animation.INFINITE);
                imageView.startAnimation(rotateAnimation);

(4)缩放动画
缩放动画是通过ScaleAnimation类实现的,有四个构造方法,常用的有三个

构造方法一:

 public ScaleAnimation(float fromX, float toX, float fromY, float toY) {

    }

构造方法二

 public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            float pivotX, float pivotY) {

    }

构造方法三:

 public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {

    }

参数解释

前面四个参数相同,fromX,toX,fromY,toY,X轴方向源码解释为
* @param fromX Horizontal scaling factor to apply at the start of the
* animation
* @param toX Horizontal scaling factor to apply at the end of the animation
* @param fromY Vertical scaling factor to apply at the start of the
* animation
* @param toY Vertical scaling factor to apply at the end of the animation
翻译

fromX 表示在动画开始时应用的水平缩放因子,toX表示在动画结束时应用的水平缩放因子。

fromY 表示动画在开始时应用的垂直缩放因子,toY表示动画在结束时应用的缩放因子。

pivotXType,pivotXValue,pivotYType,pivotYValue**与旋转动画解释相同**。

具体使用,以构造方法二为例:

ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f, 0.5f, 0.5f);
                scaleAnimation.setDuration(3000);
                scaleAnimation.setRepeatMode(Animation.REVERSE);
                scaleAnimation.setRepeatCount(Animation.INFINITE);
                imageView.startAnimation(scaleAnimation);

(5)复合动画
复合动画不是一种动画的类型,而是一种动画集合,组合了多种动画,以达到酷炫的效果。复合动画是通过AnimationSe类来实现的,有两个构造方法,常用的有一个。

public AnimationSet(boolean shareInterpolator) {

    }

参数解释

shareInterpolator在源码中的解释为
* @param shareInterpolator Pass true if all of the animations in this set
* should use the interpolator associated with this AnimationSet.
* Pass false if each animation should use its own interpolator.
翻译:如果为true,表示这个集合中所有的动画都应该使用这个集合动画关联的插值器。如果为false,表示每个动画应该使用他们自己的插值器。【翻译有误,大概意思是这样,虽然不影响语义,但这里的pass不知道是什么意思,看到的请告诉我一声,谢谢。】

具体使用

 //创建复合动画对象,参数:是否共享插值器
                AnimationSet animationSet = new AnimationSet(true);
                //设置动画执行的时间
                animationSet.setDuration(3000);
                //设置重复模式
                animationSet.setRepeatMode(Animation.REVERSE);
                //设置匀速变化
                animationSet.setInterpolator(new LinearInterpolator());
                //旋转动画
                RotateAnimation rotateAnimation1 = new RotateAnimation(0.0f, 720f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
                //透明动画
                AlphaAnimation alphaAnimation1=new AlphaAnimation(1.0f,0.3f);
                //缩放动画
                ScaleAnimation scaleAnimation1=new ScaleAnimation(1.0f,0.5f,1.0f,0.5f);
                //设置动画执行之前等待的时间
                scaleAnimation1.setStartOffset(3000);
                //把旋转动画添加进集合
                animationSet.addAnimation(rotateAnimation1);
                //把透明动画添加进集合
                animationSet.addAnimation(alphaAnimation1);
                //把缩放动画添加进集合
                animationSet.addAnimation(scaleAnimation1);
                //开启view动画
                imageView.startAnimation(animationSet);

解释在注释里面

xml方式使用

(1)移动动画

在res文件夹下新建anim文件夹,在文件夹中新建以translate为根节点的xml,然后设置相关属性,如下

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fillAfter="true"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100"
    android:toYDelta="100"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">

</translate>

属性与java代码实现的一样。

<!--android:repeatCount中infinite:表示无限循环,也可以填具体的数值-->
<!--android:repeatMode中restart:重新开始,reverse:反方向重复-->
<!--android:fromXDelta="":X轴方向开始位置,可以是%,也可以是具体的像素-->
<!--translate 位置转移动画效果-->
<!--整型值:-->
<!--fromXDelta 属性为动画起始时 X坐标上的位置-->
<!--toXDelta 属性为动画结束时 X坐标上的位置-->
<!--fromYDelta 属性为动画起始时 Y坐标上的位置-->
<!--toYDelta 属性为动画结束时 Y坐标上的位置-->
<!--注意:-->
<!--没有指定, 默认是以自己为相对参照物-->
<!--长整型值:-->
<!--duration 属性为动画持续时间-->
<!--说明: 时间以毫秒为单位-->
<!--在这些属性里面还可以加上%和p,例如:-->
<!--android:toXDelta="100%",表示自身的100%,也就是从View自己的位置开始。-->
<!--android:toXDelta="80%p",表示父层View的80%,是以它父层View为参照的,p代表parent。-->

在代码中通过AnimationUtils的loadAnimation方法引用:

Animation animation = AnimationUtils.loadAnimation(this,         R.anim.translateanim);
imageView.startAnimation(animation);

其他动画同理

(2)透明动画

在anim中定义一个以alpha为根节点的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.2"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:duration="5000"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_interpolator">
<!--浮点数,1.0不透明,0.0全透明 范围0.0~1.0-->
</alpha>

在代码中通过AnimationUtils的loadAnimation方法引用:

 Animation animation2 = AnimationUtils.loadAnimation(this, R.anim.alphaanim);
imageView.startAnimation(animation2);

(3)旋转动画
在anim文件夹下新建以rotate为根节点的xml,如下

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="5000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:fillAfter="true"
    android:interpolator="@android:interpolator/accelerate_decelerate">

</rotate>

在代码中通过AnimationUtils的loadAnimation方法引用:

 Animation animation1 = AnimationUtils.loadAnimation(this, R.anim.rotateanim);
 imageView.startAnimation(animation1);

(4)缩放动画
在anim文件夹下定义以scale为根节点的xml,如下

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:toXScale="1.5"
    android:fromYScale="1.0"
    android:toYScale="1.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:duration="5000"
    android:interpolator="@android:anim/anticipate_interpolator">

</scale>

在代码中通过AnimationUtils的loadAnimation方法引用:

 Animation animation3 = AnimationUtils.loadAnimation(this, R.anim.scaleanim);
imageView.startAnimation(animation3);

(5)复合动画
在anim文件夹下新建以set为根节点的xml如下

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/bounce_interpolator"
    android:repeatMode="reverse"
    android:shareInterpolator="true">
    <!--shareInterpolator:是否共享插值器-->
    <!--旋转-->
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <!--边缩放边透明-->

    <set
        android:duration="3000"
        android:repeatMode="reverse"
        android:shareInterpolator="true">
        <scale
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="0.5"
            android:toYScale="0.5" />
        <alpha
            android:fromAlpha="1.0"
            android:toAlpha="0.5" />

    </set>
    <!--移动-->
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100" />


</set>

注意

set是个集合,里面可以嵌套动画,也可以嵌套set集合,集合里面在写动画。

在代码中通过AnimationUtils的loadAnimation方法引用:

 Animation animation = AnimationUtils.loadAnimation(this, R.anim.setanim);
 imageView.startAnimation(animation);

**

补充

**:
android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态
android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态

android:interpolator 设定插值器,指定动画效果。

何为interpolator?源码中这样解释:
/**
* An interpolator defines the rate of change of an animation. This allows
* the basic animation effects (alpha, scale, translate, rotate) to be
* accelerated, decelerated, repeated, etc.
*/
翻译

插值器定义了动画改变的速率,它允许基本的动画效果(透明,缩放,位移,旋转)加速,减速,重复,等等。

所以interpolator是一个改变动画执行速率的东西,用来修饰动画效果。
系统提供的插值器有那么多,如图:
这里写图片描述

  • 第一种:AccelerateDecelerateInterpolator
    这里写图片描述

    表示,在动画开始与结束的地方速率改变比较慢,在中间的时候加速的插值器。

    • 第二种:AccelerateInterpolator

这里写图片描述

表示,在动画开始的地方速率改变比较慢,然后开始加速
- 第三种:AnticipateInterpolator
这里写图片描述

表示,开始的时候向后然后向前冲

  • 第四种:AnticipateOvershootInterpolator
    这里写图片描述

    表示,开始的时候向后然后向前冲到达目标值后返回最后的值

  • 第五种:BounceInterpolator

这里写图片描述

表示,在 动画结束的时候弹起
- 第六种:CycleInterpolator

这里写图片描述

表示,动画循环播放特定的次数,速率改变沿着正弦曲线

  • 第七种:DecelerateInterpolator

这里写图片描述
表示,在动画开始的地方快然后减慢
- 第八种:LinearInterpolator

这里写图片描述

以常量速率改变
- 第九种:OvershootInterpolator

这里写图片描述

表示,向前冲超过最大值再回到原来位置

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值