Android 之 3种动画

这里将讲述:
  1. 逐帧动画(FrameAnimation) 、补间动画(TweenAnimation) 、属性动画(PropertyAnimation);
  2. As的res文件中,分别使用drawable、anim、animator目录下的xml编写动画;
逐帧动画(FrameAnimation)

它的实现方式也有两种:代码和xml方式;

  • 代码方式:

    private void setSrcFrameAnim() {  
        animationDrawable = new AnimationDrawable();  
        // 为AnimationDrawable添加动画帧  
        animationDrawable.addFrame(  
            getResources().getDrawable(R.drawable.img00), 50);  
        animationDrawable.addFrame(  
            getResources().getDrawable(R.drawable.img01), 50);  
        animationDrawable.addFrame(  
            getResources().getDrawable(R.drawable.img02), 50);  
       
        // 设置为循环播放  
        animationDrawable.setOneShot(false);  
        imageView.setBackground(animationDrawable);  
        animationDrawable.start(); 
    }  
    
    
  • xml方式:
    在res/drawable文件夹下新建animation-list的XML实现帧动画

     <?xml version="1.0" encoding="utf-8"?>  
     <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
         android:oneshot="true" >  
       
         <!-- animation-list 帧动画 -->  
         <!-- android:oneshot的值为 false代表播放多次,true代表只播放一次 -->  
    
         <item  
         android:drawable="@drawable/img00"  
         android:duration="50"/>  
         <item  
         android:drawable="@drawable/img01"  
         android:duration="50"/>  
         <item  
         android:drawable="@drawable/img02"  
         android:duration="50"/>  
     </animation-list>  
    

    在布局中可以这样:

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:tools="http://schemas.android.com/tools"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        tools:context="com.havorld.frameanimation.MainActivity" >  
        <ImageView  
        android:id="@+id/imageView"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerInParent="true" />  
        <!-- android:background="@drawable/frame_anim" -->  
     </RelativeLayout>  
    

    在代码中我们这样:

    private void setFrameAnim() {  
        imageView.setBackgroundResource(R.drawable.frame_anim);  
        animationDrawable = (AnimationDrawable) imageView.getBackground();  
        animationDrawable.start(); 
    
        //或者这样
        animationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_anim);  
        imageView.setBackground(animationDrawable);  
        animationDrawable.start(); 
    }
    
    


  • Drawable Animation(补间动画)

补间动画的属性有:RotateAnimation、AlphaAnimation、ScaleAnimation、TranslateAnimation、AnimationSet ,再者可以加上用于xml动画文件引入的AnimationUtils类,示例:

  ImageView iv = (ImageView) dialog.findViewById(R.id.loading_iv);
  RotateAnimation rotateAnimation = new RotateAnimation(0, 5760, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f); //相对自己左上为0.0
 // Animation rotateAnimation=AnimationUtils.loadAnimation(this, R.anim.rote); //当然这里你也可以用xml方式
  rotateAnimation.setDuration(10000);
  iv.startAnimation(rotateAnimation); 
// rotateAnimation.start(); //或这样启动


  • Property Animation 属性动画

涉及到的属性值有 (名称一定要写对):
    1、透明度:alpha
    2、旋转度数:rotation、rotationX、rotationY
    3、平移:translationX、translationY
    4、缩放:scaleX、scaleY

示例 1. 使用代码实现:

    ObjectAnimator animator = ObjectAnimator
        .ofFloat(iv, "rotation", 0.0F, 360.0F)
        .setDuration(800);
    animator .setRepeatCount(ObjectAnimator.INFINITE);
    animator.setInterpolator(new LinearInterpolator());
    animator .start();

示例 2. 使用 xml文件配置动画(R.animator.anim_file):

    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:ordering="sequentially" >  
        <objectAnimator  
            android:duration="2000"  
            android:propertyName="translationX"  
            android:valueFrom="-500"  
            android:valueTo="0"  
            android:valueType="floatType" >  
        </objectAnimator>  
      
        <set android:ordering="together" >  
            <objectAnimator  
                android:duration="3000"  
                android:propertyName="rotation"  
                android:valueFrom="0"  
                android:valueTo="360"  
                android:valueType="floatType" >  
            </objectAnimator>  
      
            <set android:ordering="sequentially" >  
                <objectAnimator  
                    android:duration="1500"  
                    android:propertyName="alpha"  
                    android:valueFrom="1"  
                    android:valueTo="0"  
                    android:valueType="floatType" >  
                </objectAnimator>  
                <objectAnimator  
                    android:duration="1500"  
                    android:propertyName="alpha"  
                    android:valueFrom="0"  
                    android:valueTo="1"  
                    android:valueType="floatType" >  
                </objectAnimator>  
            </set>  
        </set>  
    </set>  

然后在代码中用AnimatorInflater引入:

   Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);  
   animator.setTarget(view);  
   animator.start();  

  • 动画总结:

    补间动画:
    XXXAnimation animation = new XXXAnimation (); //需要什么动画就new什么动画,然后.start();
    AnimationSet animationSet = new AnimationSet(false); //代码方式实现补间动画
    animationSet.addAnimation(new AlphaAnimation(1,0));
    Animation animation = AnimationUtils.loadAnimation(context, R.anim.cs);//加载的是补间动画文件(在anim中);
    注意:若想给动画设置重复模式,设置给AnimationSet是无效的,需要给每个单个动画设置才能生效,如:
    alphaAnimation.setRepeatMode(Animation.RESTART);
    alphaAnimation.setRepeatCount(Animation.INFINITE);

    属性动画:
    ObjectAnimator.ofFloat(iv, "rotation", 0.0F, 360.0F).start();
    AnimatorSet animatorSet = new AnimatorSet(); //代码方式实现属性动画
    animatorSet.playTogether();
    Animator animator = AnimatorInflater.loadAnimator(context, R.animator.scale_with_alpha); //加载的是属性动画文件(在animator中)

    anim、animator目录下的xml中动画属性是不同的:

    1. res的anim文件夹下XML文件中属性对应关系(补间动画):
      <set> 对应代码中 AnimationSet
      <rotate> 对应: RotateAnimation
      <alpha> 对应: AlphaAnimation
      <scale> 对应: ScaleAnimation
      <translate> 对应: TranslateAnimation
    2. res的animator文件夹的XML文件中属性对应关系(属性动画):
      <set> 对应代码中的 AnimatorSet
      <objectAnimator> 对应代码中的 ObjectAnimator
      <animator> 对应代码中的 ValueAnimator
  • 接下来说下Drawable的绘制(在res的drawable目录下):

    1 . <layer-list>的机理就是一层层的覆盖,示例:

      <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!--底部图层a,是其他图层item位置锁定的基础-->
        <item android:height="99dp" android:width="99dp" android:gravity="center" >
          <rotate
              android:drawable="@drawable/ic_launcher"  <----此处可用shap替代,也可以放带动画的Drawable
              android:fromDegrees="0"
              android:pivotX="50%"
              android:pivotY="50%"
              android:toDegrees="360"/>
        </item>  
    
        <!--该图层放在底部图层a之上,位置为相对a的位置-->
        <item
            android:gravity="center"
            android:height="40dp"
            android:width="40dp">
          <rotate
              android:drawable="@drawable/lt"
              android:fromDegrees="360"
              android:pivotX="50%"
              android:pivotY="50%"
              android:toDegrees="0"/>
        </item>
      </layer-list>
    

    2 . Drawable的<animated-selector>类似于selector(效果如CheckBox的动画变换) 示例:

      <?xml version="1.0" encoding="utf-8"?>
      <animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@+id/state_on"
            android:drawable="@drawable/lt"
            android:state_selected="true"/>
        <item
            android:id="@+id/state_off"
            android:drawable="@drawable/progressbar"
            android:state_selected="false"/>
        <transition
            android:fromId="@+id/state_on"
            android:toId="@+id/state_off">
          <animation-list android:oneshot="true">
            <item
                android:drawable="@drawable/lt"
                android:duration="188"/>
            <item
                android:drawable="@drawable/ic_launcher"
                android:duration="188"/>
            <item
                android:drawable="@drawable/shape_noraml"
                android:duration="122"/>
            <item
                android:drawable="@drawable/progressbar"
                android:duration="122"/>
          </animation-list>
        </transition>
    
        <transition    <!--补间动画执行过程配置-->
            android:fromId="@+id/state_off"
            android:toId="@+id/state_on">
          <animation-list android:oneshot="true">
            <item
                android:drawable="@drawable/progressbar"
                android:duration="122"/>
            <item
                android:drawable="@drawable/shape_noraml"
                android:duration="122"/>
            <item
                android:drawable="@drawable/ic_launcher"
                android:duration="188"/>
            <item
                android:drawable="@drawable/lt"
                android:duration="188"/>
          </animation-list>
        </transition>
      </animated-selector>
    

    布局文件中代码

    <Button
       android:id="@+id/btn_web_native"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentRight="true"
       android:background="@drawable/animation_selector"
       android:onClick="onClicked"
       />
    

    在代码中配置

      view.setSelected(!view.isSelected());
    
  • 告诉你个小秘密:

    ProgressBar听这名字就是做进度用的,但是它功能不仅仅如此,你也可以用它来做图片切换、旋转等动画,比如上边三种方法绘制的Drawable都能设置给ProgressBar,而达到强大的动画效果,如下:

    布局代码:

      <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="77dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/loading_iv"
        android:indeterminateDrawable="@drawable/loadding" />
    

    drawable/loadding.xml代码:

              
        <?xml version="1.0" encoding="utf-8"?>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
          <!--底部图层a,是其他图层item位置锁定的基础-->
          <item
              android:gravity="center"
              android:height="59dp"
              android:width="59dp">
            <rotate
                android:fromDegrees="1080"
                android:pivotX="50%"
                android:pivotY="50%"
                android:toDegrees="0">
              <shape            <----此处改用shap替代drawable,下边则采用带动画的drawable
                  android:innerRadiusRatio="3"
                  android:shape="ring"
                  android:thicknessRatio="9"
                  android:useLevel="false">
                <gradient
                    android:centerColor="@android:color/holo_red_light"
                    android:centerY="0.2"
                    android:endColor="#1E90FF"
                    android:startColor="#000000"
                    android:type="sweep"
                    android:useLevel="false"/>
              </shape>
            </rotate>
          </item>
        
          <!--该图层放在底部图层a之上,位置为相对a的位置-->
          <item android:drawable="@drawable/progressbar"  <----此处采用带动画的drawable
              android:gravity="center"
              android:height="33dp"
              android:width="33dp">
          </item>
        </layer-list>
    

    xml文件@drawable/progressbar代码:

     <?xml version="1.0" encoding="utf-8"?>
     <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
         android:pivotX="50%"
         android:pivotY="50%"
         android:duration="10"
         android:repeatCount="-1"
         android:fromDegrees="0"
         android:toDegrees="360">
       <shape
           android:innerRadiusRatio="3"
           android:shape="ring"
           android:thicknessRatio="8"
           android:useLevel="false">
         <gradient
             android:centerColor="#FF7121"
             android:centerY="0.50"
             android:endColor="#FFFF00"
             android:startColor="#6BD3FF"
             android:type="sweep"
             android:useLevel="false"/>
       </shape>
     </animated-rotate>
    

    当然ProgressBar也可以用上边的animation-list方式添加 android:indeterminateDrawable="@drawable/animation-list" 属性,效果也很棒,这个实验的机会就留给你啦!

  • 其它

    还有一种简单的设置动画的方法,如下:

    //ViewCompat这样的单次属性动画,只适用于要求只执行一次的需求,执行完后所有状态将会停留在最后一刻,
    //这种单值设置动画就是为了设置view的终态的,其默认view的初始状态就是当其view的状态。
    ViewCompat.animate(target)
         .setDuration(2100)
         .translationY(screenData.onScreenHeight/2)
         .setInterpolator(new BounceInterpolator())
         .rotation(1200)
         .alpha(0)
         .scaleX(8)
         .scaleY(7)
         .start();
    
    







好啦,就先写到这里,后继再来追加。。。

.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,580评论 0 9
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 最近工作比较清闲,所以想系统的复习和学习下自己比较短缺的知识,所以。。。 程序运行效果图: Android动画主要...
    小沈新手阅读 483评论 0 1
  • 【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...
    Rtia阅读 5,957评论 1 38
  • 转载一篇高质量博文,原地址请戳这里转载下来方便今后查看。1 背景不能只分析源码呀,分析的同时也要整理归纳基础知识,...
    Elder阅读 1,899评论 0 24