Animation动画详解

这两天总结了一下animation动画的基础知识,希望对初学者有个帮助,同时我也是名初学者,以下主要写的是核心代码,相信大家可以理解的,若有需要源代码的可以回帖哦!希望得到大家的支持,这将是我发展的动力!
Animations动画介绍:
Animation动画是将动画通过xml或者java代码定义,并按照定义好的图像变换方式、触发时间、持续时间、循环次数等相关定义来播放动画。
Android中动画的实现分两种方式,一种方式是补间动画 Tween Animation,就是说你定义一个开始和结束,中间的部分由程序运算得到。另一种叫逐帧动画 Frame Animation,就是说一帧一帧的连起来播放就变成了动画。

AnimationSet的使用方法:
什么是 AnimationSet
       1、AnimationSet是Animation的子集;
       2、一个AnimationSet包含了一系列的Animation;
       3、针对AnimationSet设置一些Animation的常见属性(如startOffset,duration等等),可以被包含在AnimationSet当中的Animation集成;
Interpolator的使用方法:
什么是 Interpolator
Interpolator 定义了动画变化的速率,提供了对动画进度的控制,在 Animations 框架当中定义了以下几种 Interpolator :
LinearInterpolator:在动画开始和结束过程中以均匀的速率改变;
AccelerateInterpolator:在动画开始的地方速率改变比较慢,然后开始加速;
DecelerateInterpolator:在动画开始的地方速率改变比较慢,然后开始减速;
AccelerateDecelerateInterpolator:在动画开始与结束的地方速率改变比较慢,在中间的时候加速;
CycleInterpolator:动画循环放特定的次数,速率改变沿着正弦曲线;
一、补间动画(一)补间动画介绍:
补间动画  Tween Animation ,就是说你定义一个开始和结束,中间的部分由程序运算得到。
(二)补间动画的分类:
这四种补间动画都是Animation的子类
透明补间动画:  AlphaAnimation   淡入淡出效果
缩放补间动画:  ScaleAnimation  缩放效果
旋转补间动画:  RotateAnimation  旋转效果
转移补间动画:  TranslateAnimation   移动效果
()补间动画的通用属性(设置animationSet)
1 、 setDuration(longdurationMills); 设置动画持续时间 ( 单位:毫秒 )
2 、 setFileAfter(booleanfillAfter); 如果 fillAfter 的值为 true ,则动画执行后,空间将停留在执行结束的状态;
3 、 setFillBefore(booleanfillBefore); 如果 fillBefore 的值为 true ,则动画执行后,控件将回到动画执行之前的状态;
4 、 setStartOffSet(longstartOffSet); 设置动画执行之前的等待时间;
5 、 setRepeatCount(intrepeatCount); 设置动画重复执行的次数;
()使用补间动画的第一种方法步骤(纯java代码)
1、创建一个AnimationSet对象
2、根据需要创建相应的Animation对象
3、根据软件动画的需求,为Animation对象设置相应的数据;
4、将Animation对象添加到AnimationSet对象当中;
5、使用控件对象开始执行AnimationSet;
AlphaAnimation(淡入淡出效果):
AlphaAnimation alphaAnimation= new AlphaAnimation(fromAlpha, toAlpha);
参数介绍:
fromAlpha: 动画开始时的透明度, 1 表示完全不透明, 0 表示全透明
toAlpha: 动画结束时的透明度
代码如下:
// 创建一个 AnimationSet 对象
AnimationSet animationSet =  new  AnimationSet( true );
// 创建一个 AlphaAnimation 对象
AlphaAnimation alphaAnimation =  new  AlphaAnimation(1, 0);
// 设置动画执行的时间(单位:毫秒)
      alphaAnimation.setDuration(1000);
// 将 AlphaAnimation 对象添加到 AnimationSet 当中
      animationSet.addAnimation(alphaAnimation);
// 使用 ImageView 的 startAnimation 方法开始执行动画
       imageView .startAnimation(animationSet);
TranslateAnimation(移动效果):
TranslateAnimationtranslateAnimation= new  TranslateAnimation(
fromXType,fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue);
参数介绍:
fromXType: 动画起始时 X 轴的位置
fromXValue: 0f
toXType :动画结束时 X 轴的位置
toXValue:  0.5f
fromYType: 动画起始时 Y 轴的位置
fromYValue:0f
toYType: 动画结束时 Y 轴的位置
toYValue:   0.5f
注:若没有指定 fromXType,toXType, fromYType,toYType 的时候,默认是以自己为相对参照物
java 代码如下:   
AnimationSet animationSet =  new  AnimationSet( true );
TranslateAnimationtranslateAnimation =  new  TranslateAnimation(
Animation. RELATIVE_TO_SELF ,0f,Animation. RELATIVE_TO_SELF , 0.5f, Animation. RELATIVE_TO_SELF , 0f, Animation. RELATIVE_TO_SELF , 1.0f);
         translateAnimation.setDuration(1000);
      animationSet.addAnimation(translateAnimation);
          imageView .startAnimation(animationSet);
RotateAnimation(旋转效果):
RotateAnimationrotateAnimation= new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType,pivotYValue);
参数介绍:
fromDegrees : 动画起始时物件的角度
toDegrees : 动画结束时物件的角度,可以大于 360 ,也可以是负数
pivotXType:动画相对于物件的x轴的开始位置
Animation.RELATIVE_TO_SELF相对于自身的坐标
Animation. ABSOLUTE  绝对坐标
Animation. RELATIVE_TO_PARENT相对于父控件身的坐标
pivotXValue :浮点数值  1f 最下面, 0f 最左边
pivotYType:动画相对于物件的Y轴的开始位置
pivotYValue :浮点数值  1f 最下面, 0f 最左边
注:当角度为负数时,表示逆时针旋转;当角度为正数时,表示顺时针旋转!
java 代码如下:
AnimationSet animationSet =  new  AnimationSet( true );
   RotateAnimationrotateAnimation =  new  RotateAnimation(0, 360,
                Animation. RELATIVE_TO_PARENT ,1f,
                Animation. RELATIVE_TO_PARENT ,0f);
         rotateAnimation.setDuration(5000);
         animationSet.addAnimation(rotateAnimation);
          imageView .startAnimation(animationSet);
ScaleAnimation(缩放效果):
ScaleAnimationscaleAnimation = new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType,pivotYValue);
参数介绍:
fromX :动画起始时 X 轴上的伸缩尺寸  1f
toX :动画结束时 X 轴上的伸缩尺寸   0.1f
fromY :动画起始时 Y 轴上的伸缩尺寸  1f
toY :动画结束时 Y 轴上的伸缩尺寸 1f
pivotXType :动画相对于物件的 X 轴的开始位置
pivotXValue :
pivotYType :动画相对于物件的 Y 轴的开始位置
pivotYValue
注: 0 表示收缩到没有, 1 表示正常状态!
java 代码如下:
AnimationSet animationSet =  new  AnimationSet( true );
ScaleAnimation scaleAnimation =   new  ScaleAnimation(1, 0.1f, 1, 0.1f, Animation. RELATIVE_TO_SELF,0.5f,Animation
. RELATIVE_TO_SELF , 0.5f);
         animationSet.addAnimation(scaleAnimation);
         animationSet.setStartOffset(1000);
         animationSet.setFillAfter( true );
         animationSet.setFillBefore( false );
         animationSet.setDuration(2000);
          imageView .startAnimation(animationSet);
注:在 java 代码中可以使用多种动画效果!
代码如下:
//  声明一个 AnimationSet 对象
         AnimationSetanimationSet =  new AnimationSet( false );
         AlphaAnimationalpha =  new AlphaAnimation(1.0f, 0.0f);
         RotateAnimationrotate =  new RotateAnimation(0, 360,
                Animation. RELATIVE_TO_SELF ,0.5f,
                Animation. RELATIVE_TO_SELF ,0.5f);
         animationSet.addAnimation(alpha);
         animationSet.addAnimation(rotate);
         animationSet.setDuration(2000);
         animationSet.setStartOffset(500);
          imageView .startAnimation(animationSet);
()使用补间动画的第二种方法步骤
1 、在 res 文件夹下面新建一个名为 anim 的文件夹;
2 、创建 xml 文件,并首先加入 set 标签,该标签如下:
<? xml  version="1.0"encoding="utf-8"?>
< set  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android :anim/accelerate_interpolator">
</ set >
3 、在该 (set 标签 ) 标签当中加入 rotate alpha scale 或者 translate 标签;
4 、在代码当中使用 AnimationUtils 当中装载 xml 文件,并生产 Animation 对象;
AlphaAnimation(淡入淡出效果):
alpha.xml
<? xml  version="1.0"encoding="utf-8"?>
< set  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android :anim/accelerate_interpolator">
    < alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:startOffset="500"
        android:toAlpha="0.0" />
</ set >
Java 代码:
// 使用 AnimationUtils 装载动画设置文件
Animation animation=AnimationUtils.loadAnimation(
MainActivity. this , R.anim. alpha );
         imageView .startAnimation(animation);
TranslateAnimation(移动效果):
translate.xml
<? xml  version="1.0"encoding="utf-8"?>
< set  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android :anim/accelerate_interpolator">
     < translate
        android:fromXDelta="50%"
        android:toXDelta="100%"
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:duration="2000" />
</ set >
Java 代码:
// 使用 AnimationUtils 装载动画设置文件
Animation animation=AnimationUtils.loadAnimation(
MainActivity. this , R.anim. translate );
         imageView .startAnimation(animation);
RotateAnimation(旋转效果):
rotate.xml:
<? xml  version="1.0"encoding="utf-8"?>
< set  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android :anim/accelerate_interpolator">
     < rotate  android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="5000" />
</ set >
注: android:pivotX 的值共有三中设置方法:
android:pivotX="50" 这种方法使用绝对位置定位;
android:pivotX="50%" 这种方法相对控件本身定位;
android:pivotX="50%p" 这种方法相对控件的父控件定位;
android:pivotY 的值同上!
Java 代码:
// 使用 AnimationUtils 装载动画设置文件
Animation animation=AnimationUtils.loadAnimation(
MainActivity. this , R.anim. rotate );
         imageView .startAnimation(animation);
ScaleAnimation(缩放效果):
scale.xml:
<? xml  version="1.0"encoding="utf-8"?>
< set  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android :anim/accelerate_interpolator">
     < scale  android:fromXScale="1.0"
        android:toXScale="0.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000" />
</ set >
Java 代码:
// 使用 AnimationUtils 装载动画设置文件
Animation animation=AnimationUtils.loadAnimation(
MainActivity. this , R.anim. sacle );
         imageView .startAnimation(animation);
注:在 xml 文件中可以同时设置多种动画效果!
代码如下:
<? xml  version="1.0"encoding="utf-8"?>
< set  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android :anim/accelerate_interpolator"
    android:shareInterpolator="true">   
     < alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="500"
        android:duration="2000" />
     < rotate  android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000" />
</ set >
二、逐帧动画Frame-By-Frame Animations
Frame动画是通过对多张系列帧图片的不停切换从而达到视觉上的动画效果。
()Frame动画的通用属性(设置animationDrawable)
1 animationDrawable.start();   启动动画
2 animationDrawable.stop();   停止动画
3 isRunning     当前动画是否在运行
4 getNumberOfFrames   动画中帧的数目
5 getDuration   指定索引在动画中的毫秒数
6 addFrame   添加帧到动画中
7 nextFrame   动画下一帧
8 setOneShot   设置是否循环
二、逐帧动画Frame-By-Frame Animations
Frame动画是通过对多张系列帧图片的不停切换从而达到视觉上的动画效果。
()Frame动画的通用属性(设置animationDrawable)
1 animationDrawable.start();   启动动画
2 animationDrawable.stop();   停止动画
3 isRunning     当前动画是否在运行
4 getNumberOfFrames   动画中帧的数目
5 getDuration   指定索引在动画中的毫秒数
6 addFrame   添加帧到动画中
7 nextFrame   动画下一帧
8 setOneShot   设置是否循环
(二)逐帧动画的使用方法:
1 、在 res/drawable 文件夹下多放几张图片,并在其目录下新建一个 anim_nv.xml 文件,
代码如下:
<? xml  version="1.0"encoding="utf-8"?>
< animation-list  xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
     < item  android:drawable="@drawable/nv1" android:duration="500" />
     < item  android:drawable="@drawable/nv2" android:duration="500" />
     < item  android:drawable="@drawable/nv3" android:duration="500" />
     < item  android:drawable="@drawable/nv4" android:duration="500" />
</ animation-list >
其中:
android:oneshot = "false"   该属性设置图片循环播放
android:duration = "500"    该属性设置每幅图片的显示时间为 500ms
2 、在 java 代码中写:
imageView .setBackgroundResource(R.drawable. anim_nv );
// 创建 AnimationDrawable 对象
AnimationDrawable animationDrawable=(AnimationDrawable)
imageView.getBackground();
   animationDrawable.start();
LayoutAnimationController介绍
什么是 LayoutAnimationController
       1 、 LayoutAnimationController 用于为一个 layout 里面的控件,或者是一个 ViewGroup 里面的控件设置动画效果;
       2 、每一个控件都有相同的动画效果;
       3 、这些控件的动画效果在不同的时间显示出来;
       4 、 LayoutAnimationController 可以在 xml 文件当中设置,也可以在代码中进行设置;
1、在xml布局当中使用LayoutAnimationController的步骤:
1 、在 res/anim 文件夹当中创建一个新文件,名为 list_anim_layout.xml
代码如下:
<? xml  version="1.0"encoding="utf-8"?>
< layoutAnimation  xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/list_anim"
    android:animationOrder="normal"
android:delay= "2"  />
其中: list_anim.xml 为设置动画的文件(如 alpha.xml
android:animation = "@anim/list_anim"  在布局文件当中为 ListView 添加如下配置
android:animationOrder = "normal"   动画执行顺序   random 随机、 normal 正常、 reverse 倒序
android:delay = "2"   两个控件显示间隔为 0.5s
2 、在 main.xml 布局文件当中为 ListView 标签添加如下配置:
android:layoutAnimation = "@anim/list_anim_layout"
注:在 java 代码中什么也不需要写!
2、在java代码当中使用LayoutAnimationController的步骤:
1 、创建一个 Animation 对象
可以通过装载xml文件,或者直接使用Animation的构造函数创建Animation对象
Animationanimation = (Animation)AnimationUtils.loadAnimation(
MainActivity. this , R.anim. list_anim );
2 、使用如下代码创建 LayoutAnimationController 对象
LayoutAnimationController lac =  new LayoutAnimationController(animation);
3 、设置控件的属性
// 图片显示的顺序
//ORDER_NORMAL 表示顺序播放, ORDER_RANDOM 随机播放, ORDER_REVERSE 倒序播放
lac.setOrder(LayoutAnimationController. ORDER_NORMAL );
// 图片显示的间隔
lac.setDelay(0.5f);
4 、为 ListView 设置 LayoutAnimationController 属性
listView .setLayoutAnimation(lac);
AnimationListener介绍:
什么是 AnimationListener
1 、 AnimationListener 是一个监听器;
2 、该监听器在动画执行的各个阶段会得到通知,从而调用相应的方法;
3 、主要包含以下的三个方法:
1、onAnimationEnd(Animation animation) 动画效果结束时调用
2、onAnimationRepeat(Animation animation) 动画效果重复时调用
3、onAnimationStart(Animation animation) 动画效果启动时调用
操作步骤:
1 、为布局设置 id
2 、创建一个 ViewGroup 并初始化
ViewGroupviewGroup =(ViewGroup)findViewById(R.id. layoutId );
3 、在删除按钮 removeButton 里设置监听
removeButton  = (Button)findViewById(R.id. removeButtonId );
removeButton .setOnClickListener( new  OnClickListener() {
          @Override
    public   void  onClick(View v) {
             // 创建一个淡出效果的 Animation 对象
AlphaAnimation animation =  new AlphaAnimation(1.0f,0.0f);
             // 为 Animation 对象设置属性
            animation.setDuration(1000);
            animation.setStartOffset(500);
             // 为 Animation 对象设置监听器
animation.setAnimationListener( new  AnimationListener() {
       @Override
       public   void  onAnimationStart(Animationanimation) {
                    //  TODO  Auto-generatedmethod stub
                }
       @Override
       public   void  onAnimationRepeat(Animationanimation) {
                    //  TODO  Auto-generatedmethod stub
                }
       @Override
       public   void  onAnimationEnd(Animation animation){
                    // 从 viewGroup 当中删除掉 imageView 控件
                    viewGroup .removeView( imageView );
                }
            });
             imageView .startAnimation(animation);
         }
      });
4 、在添加按 addButton 钮里设置监听
addButton = (Button)findViewById(R.id. addButtonId );
addButton .setOnClickListener( new  OnClickListener() {
          @Override
          public   void  onClick(View v) {
// 创建了一个淡入效果的 Animation 对象
AlphaAnimation animation =  new  AlphaAnimation(0.0f,1.0f);
            animation.setDuration(1000);
            animation.setStartOffset(500);
// 创建一个新的 ImageView
ImageView imageViewAdd =  new  ImageView(MainActivity. this );
      imageViewAdd.setImageResource(R.drawable. icon );
// 将新的 ImageView 添加到 viewGroup 当中
viewGroup .addView(imageViewAdd, new  LayoutParams(LayoutParams
. FILL_PARENT , LayoutParams. WRAP_CONTENT ));
             // 启动动画
            imageViewAdd.startAnimation(animation);
         }
      });
注: android 平台不支持 Gif 动画播放功能,需要使用 Easy Gif 等第三方工具将其切为每帧一个图片,然后再用 Frame 动画的使用方法!

转载于:https://my.oschina.net/u/861587/blog/160547

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值