Android animations的使用

animations的使用

       Animations

           一 . Animations简介

                   Animations是谷歌官方提供的在安卓UI上进行一系列动画操作的API,可以对大多数的控件进行旋转(rotate) , 移动(translation) , 淡入淡出(alpha) , 以及放缩(scale)等操作,方便我们做出更加友好的UI界面.

            二 . Animations的分类

                  Animations从总体上可以分为两大类:

                  1.Tweened Animations:  该类Animations提供了旋转 , 移动 , 伸展 和淡入淡出的效. 
                  2.Frame-by_frame Animations:  这一类Animations可以创建一个Drawable序列,这写Drawable可以按照指定的时间一个一个的显示出来.
           三 . Animations的使用方法
 
 

  
                    
  
  使用TweenedAnimations的步骤:
 
 
 
 

  
                     1 . 创建一个AnimationSet对象(Animations的子类),这个可以看作是Animations的集合,可以放入很多个不同的动画到一个AnimationSet对象中,以此来合成几个动画.
 
 
 
 

  
                     2 . 创建相应的Animations对象,设置好各种参数.
 
 
 
 

  
                     3 . 将创建并设置好参数的Animations对象挨个的添加入AnimationSet的对象中去.
 
 
 
 

  
                     4 . 对需要执行动画的控件调用startAnimation()函数,来执行相应的动画(当然这里不一定需要AnimationSet,也可以直接让控件执行单个的Animations)
 
 
 
 

  
        
 
 
 
 

  
                    上面在介绍的是后已经说过了,TweenedAnimnation有四种效果,那么我们应该可以猜测到,Animation的四个子类f分别是:AlphaAnimation , TranslateAnimation , ScaleAnimation , RotateAnimation
 
 
            四.  Animations实战
                   上面介绍完后,马上进入实战的环节.在安卓上使用Animations一般有两种方式:
                第一种就是纯java的代码来定义需要的animations 
                第二种就是用.xml文件来定义需要的animations , 只需要用java的代码来和控件绑定执行就可以了,后面一种降低了耦合,同时也增加了调试时的复杂程度.

              我们先做一个小的布局,将四种按钮以及后面的混合动画按钮都放上去,而我们的操作对象就是一个放了张图片的ImageView
activity_main.xml
<pre name="code" class="html" style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button_rotate"
        android:text="旋转"
        android:layout_width="70dp"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/button_translation"
        android:text="移动"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@+id/button_rotate" />
    <Button
        android:id="@+id/button_alpha"
        android:text="淡入淡出"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@+id/button_translation" />
    <Button
        android:id="@+id/button_scale"
        android:text="放缩"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toStartOf="@+id/button_all" />
    <Button
        android:id="@+id/button_all"
        android:text="混合"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />

    <ImageView
        android:id="@+id/imageview"
        android:background="@drawable/ic_launcher"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
</pre><p></p><h3 style="font-size:14px; font-family:Arial,Helvetica,sans-serif"><span style="color:#9999ff">           第一种方法,纯java代码运用Animation:</span></h3><p style="font-size:14px; font-family:Arial,Helvetica,sans-serif"><span style="font-family:Arial,Helvetica,sans-serif">           下面我们就开始定制动画了</span></p><p style="font-size:14px; font-family:Arial,Helvetica,sans-serif"></p><pre name="code" class="html">/**
         * 淡入淡出的动画
         *
         * 参数1:起始的透明度,1为不透明
         * 参数2:终止的透明度,0为全透明
         */
        alphaAnimation = new AlphaAnimation(1,0);

        /**
         * 该动画执行的时间长度
         */
        alphaAnimation.setDuration(500);


/**
         * 旋转的动画
         *
         * 参数1：从哪个旋转角度开始
         * 参数2：转到什么角度
         * 参数3：确定x轴坐标的类型，有ABSOLUT绝对坐标、
         *       RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
         * 参数4：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
         * 参数5：确定y轴坐标的类型
         * 参数6：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴
         */
        rotateAnimation = new RotateAnimation(
                0,
                360,
                Animation.RELATIVE_TO_SELF,
                0.5f,
                Animation.RELATIVE_TO_SELF,
                0.5f
        );

        rotateAnimation.setDuration(1000);
/**
         * 放缩的动画
         *
         * 参数1：x轴的初始值
         * 参数2：x轴收缩后的值
         * 参数3：y轴的初始值
         * 参数4：y轴收缩后的值
         * 参数5：确定x轴坐标的类型
         * 参数6：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
         * 参数7：确定y轴坐标的类型
         * 参数8：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴
         */

        scaleAnimation = new ScaleAnimation(
                0,
                0.1f,
                0,
                0.1f,
                Animation.RELATIVE_TO_SELF,
                0.5f,
                Animation.RELATIVE_TO_SELF,
                0.5f);
        scaleAnimation.setDuration(1000);

/**
         * 移动的动画
         *
         * 参数1:相对与父控件还是自身(与旋转的参数意思相同)
         * 参数2:确定X轴开始的位置
         * 参数3:类似参数1
         * 参数4:y轴开始的位置
         * 参数5,6:确定x轴终止位置
         * 参数7,8:确定Y轴终止位置
         */

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

                 上面的代码分别定义了四种动画:在按钮的监听器中只需要加入一行代码,
                        imageView.startAnimation(rotateAnimation);
                  即可开始执行相应的动画效果了..
                   
                第二种方法,用xml文件定义Animation:
               第二种方法用到了.xml文件来定义动画:
              1. 首先在res文件夹下建立一个anim的文件夹,专门用来存放定义的动画
              2. 在这个文件夹里定义Animation Resource File.如下图所示

               
1.alpha_animation.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="500"
        android:duration="500"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <!--
        fromDegrees:开始的角度
        toDegrees：结束的角度，+表示是正的
        pivotX：用于设置旋转时的x轴坐标
        例
           1)当值为"50"，表示使用绝对位置定位
           2)当值为"50%"，表示使用相对于控件本身定位
           3)当值为"50%p"，表示使用相对于控件的父控件定位
        pivotY：用于设置旋转时的y轴坐标
      -->
    <rotate
        android:fromDegrees="0"
        android:toDegrees="+360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">

    <!--
      起始x轴坐标
          止x轴坐标
          始y轴坐标
          止y轴坐标
          轴的坐标
          轴的坐标
    -->
    <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="1000"/>
</set>


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">

    <!--
           始x轴坐标
           止x轴坐标
           始y轴坐标
           止y轴坐标
      -->
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:duration="2000"/>
</set>
</pre><pre name="code" class="html">上面在四个xml文件里面定义好了不同的动画效果,接下来需要使用它们:          
                  Animation animation = AnimationUtils.loadAnimation( Animation1Activity.this, R.anim.alpha);       //先将xml文件里面的动画效果装载出
<span style="font-family: Arial, Helvetica, sans-serif;">                 imageView.startAnimation(Animation);          //和上面用法一样的一步,将动画效果作用于控件</span>
          AnimationSet的用法
                 说完了如何使用Animations之后,开始讲讲最后一个AnimationSet的用法,我们可以将任意的动画放入一个Animations中:
<span style="font-size:14px;font-weight: normal;">/**
         * 创建了一个AnimastionSet对象
         * 在点击buttonAll的时候我们使用它
         * 其他四个按钮点击的时候我们直接使用创建好了的Animations
         *
         * 里面有一个boolean类型的参数
         * 如果设置为true,则里面存放的所有animations都使用自己的interpolator(执行动画的方式,如先加速后减速等)
         * 如果设置为false,则使用AnimationSet统一的interpolator
         */</span>
<span style="font-size:14px;font-weight: normal;">        animationSet = new AnimationSet(true);</span>
</pre><pre name="code" class="java"><span style="font-size:14px;font-weight: normal;">        接着我们将上面的四个动画挑选几个放入AniamtionSet中,小达这里将旋转和移动放入其中,也就是:</span>
<span style="font-size:14px;font-weight: normal;">                animationSet.addAnimation(rotateAnimation);</span>
<span style="font-size:14px;font-weight: normal;">                animationSet.addAnimation(translateAnimation);</span>
</pre><pre name="code" class="java">      <span style="font-weight: normal;"><span style="font-size:14px;"> 再给按钮加上点击事件,就可以执行动画了~~~~~~还有什么不明白的地方可以给我留言噢,还有直接Q我也行,2319821734,有什么好的东西我会及时拿上来和大家分享的.</span></span>