【Android 基础】Animation 动画介绍和实现

在前面 PopupWindow 实现显示仿腾讯新闻底部弹出菜单有用到Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧。

1.Animation 动画类型

Android的animation由四种类型组成:

XML中

alph渐变透明度动画效果

scale渐变尺寸伸缩动画效果

translate画面转换位置移动动画效果

rotate画面转移旋转动画效果






JavaCode中

AlphaAnimation渐变透明度动画效果

ScaleAnimation渐变尺寸伸缩动画效果

TranslateAnimation画面转换位置移动动画效果

RotateAnimation画面转移旋转动画效果





 2.Android动画模式

Animation主要有两种动画模式:

一种是tweened animation(渐变动画)

XML中JavaCode

alphaAlphaAnimation

scaleScaleAnimation




一种是frame by frame(画面转换动画) 

XML中JavaCode

translateTranslateAnimation

rotateRotateAnimation




3.如何在XML文件中定义动画

步骤如下:

①新建 Android 项目

②在res目录中新建anim文件夹

③在anim目录中新建一个my_anim.xml(注意文件名小写)

④在 my_anim.xml 加入动画代码


4.Android动画解析--XML

4.1 alpha 渐变透明度动画效果

        android:duration="1000"        android:fromAlpha="0.0"        android:toAlpha="1.0"/>

        浮点型值:

            fromAlpha 属性为动画起始时透明度

            toAlpha  属性为动画结束时透明度

            说明:

                0.0表示完全透明

                1.0表示完全不透明

            以上值取0.0-1.0之间的float数据类型的数字


        长整型值:

            duration  属性为动画持续时间

            说明:   

                时间以毫秒为单位

    -->


4.2 scale 渐变尺寸伸缩动画效果

        android:duration="1000"        android:fillAfter="false"        android:fromXScale="0.0"        android:fromYScale="0.0"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:pivotX="50%"        android:pivotY="50%"        android:toXScale="1.4"        android:toYScale="1.4"/>

      属性:interpolator 指定一个动画的插入器

        在我试验过程中,使用android.res.anim中的资源时候发现

        有三种动画插入器:

            accelerate_decelerate_interpolator  加速-减速 动画插入器

            accelerate_interpolator        加速-动画插入器

            decelerate_interpolator        减速- 动画插入器

        其他的属于特定的动画效果

      浮点型值:


            fromXScale 属性为动画起始时 X坐标上的伸缩尺寸   

            toXScale  属性为动画结束时 X坐标上的伸缩尺寸   


            fromYScale 属性为动画起始时Y坐标上的伸缩尺寸   

            toYScale  属性为动画结束时Y坐标上的伸缩尺寸   


            说明:

                以上四种属性值   


                    0.0表示收缩到没有

                    1.0表示正常无伸缩   

                    值小于1.0表示收缩 

                    值大于1.0表示放大


            pivotX    属性为动画相对于物件的X坐标的开始位置

            pivotY    属性为动画相对于物件的Y坐标的开始位置


            说明:

                    以上两个属性值 从0%-100%中取值

                    50%为物件的X或Y方向坐标上的中点位置


        长整型值:

            duration  属性为动画持续时间

            说明:  时间以毫秒为单位

        布尔型值:

            fillAfter 属性 当设置为true ,该动画转化在动画结束后被应用-->


4.3 translate 画面转换位置移动动画效果

        android:duration="2000"        android:fromXDelta="30"        android:fromYDelta="30"        android:toXDelta="-80"        android:toYDelta="300"/>

        整型值:

            fromXDelta 属性为动画起始时 X坐标上的位置   

            toXDelta  属性为动画结束时 X坐标上的位置

            fromYDelta 属性为动画起始时 Y坐标上的位置

            toYDelta  属性为动画结束时 Y坐标上的位置

            注意:

                    没有指定fromXType toXType fromYType toYType 时候,

                    默认是以自己为相对参照物           

        长整型值:

            duration  属性为动画持续时间

            说明:  时间以毫秒为单位

    -->


4.4 rotate 画面转移旋转动画效果

        android:duration="3000"        android:fromDegrees="0"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:pivotX="50%"        android:pivotY="50%"        android:toDegrees="+350"/>

      属性:interpolator 指定一个动画的插入器

            在我试验过程中,使用android.res.anim中的资源时候发现

            有三种动画插入器:

                accelerate_decelerate_interpolator  加速-减速 动画插入器

                accelerate_interpolator              加速-动画插入器

                decelerate_interpolator              减速- 动画插入器

            其他的属于特定的动画效果


      浮点数型值:

            fromDegrees 属性为动画起始时物件的角度   

            toDegrees  属性为动画结束时物件旋转的角度 可以大于360度 


            说明:

                    当角度为负数——表示逆时针旋转

                    当角度为正数——表示顺时针旋转             

                    (负数from——to正数:顺时针旋转) 

                    (负数from——to负数:逆时针旋转)

                    (正数from——to正数:顺时针旋转)

                    (正数from——to负数:逆时针旋转)     

            pivotX    属性为动画相对于物件的X坐标的开始位置

            pivotY    属性为动画相对于物件的Y坐标的开始位置


            说明:        以上两个属性值 从0%-100%中取值

                        50%为物件的X或Y方向坐标上的中点位置

        长整型值:

            duration  属性为动画持续时间

            说明:      时间以毫秒为单位

    -->


5.如何使用XML中的动画效果

publicstaticAnimation loadAnimation (Context context,int id) //第一个参数Context为程序的上下文    //第二个参数id为动画XML文件的引用//例子:myAnimation= AnimationUtils.loadAnimation(this,R.anim.my_anim);//使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件


6.如何使用XML中的动画效果

//在代码中定义 动画实例对象private Animation myAnimation_Alpha;private Animation myAnimation_Scale;private Animation myAnimation_Translate;private Animation myAnimation_Rotate;

    //根据各自的构造方法来初始化一个实例对象myAnimation_Alpha=newAlphaAnimation(0.1f, 1.0f);

myAnimation_Scale =newScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,

            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

myAnimation_Translate=newTranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);

myAnimation_Rotate=newRotateAnimation(0.0f, +350.0f,

              Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);


7.Android动画解析--JavaCode

7.1 AlphaAnimation

① AlphaAnimation类对象定义

privateAlphaAnimation myAnimation_Alpha

② AlphaAnimation类对象构造

//第一个参数fromAlpha为 动画开始时候透明度//第二个参数toAlpha为 动画结束时候透明度AlphaAnimation(floatfromAlpha,float toAlpha) //说明:0.0表示完全透明,1.0表示完全不透明myAnimation_Alpha=newAlphaAnimation(0.1f, 1.0f);

③ 设置动画持续时间

//设置时间持续时间为 5000毫秒myAnimation_Alpha.setDuration(5000);


7.2 ScaleAnimation

① ScaleAnimation类对象定义

privateAlphaAnimation myAnimation_Alpha;

② ScaleAnimation类对象构造

ScaleAnimation(floatfromX,floattoX,floatfromY,float toY,

          intpivotXType,floatpivotXValue,intpivotYType,float pivotYValue) //第一个参数fromX为动画起始时 X坐标上的伸缩尺寸    //第二个参数toX为动画结束时 X坐标上的伸缩尺寸    //第三个参数fromY为动画起始时Y坐标上的伸缩尺寸    //第四个参数toY为动画结束时Y坐标上的伸缩尺寸  /*说明:

                    以上四种属性值   

                    0.0表示收缩到没有

                    1.0表示正常无伸缩   

                    值小于1.0表示收缩 

                    值大于1.0表示放大*///第五个参数pivotXType为动画在X轴相对于物件位置类型  //第六个参数pivotXValue为动画相对于物件的X坐标的开始位置//第七个参数pivotXType为动画在Y轴相对于物件位置类型  //第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置myAnimation_Scale =newScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,

            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

③ 设置动画持续时间

//设置时间持续时间为 700毫秒myAnimation_Scale.setDuration(700);


7.3 TranslateAnimation

① TranslateAnimation类对象定义

privateAlphaAnimation myAnimation_Alpha;

② TranslateAnimation类对象构造

//第一个参数fromXDelta为动画起始时 X坐标上的移动位置    //第二个参数toXDelta为动画结束时 X坐标上的移动位置      //第三个参数fromYDelta为动画起始时Y坐标上的移动位置    //第四个参数toYDelta为动画结束时Y坐标上的移动位置TranslateAnimation(floatfromXDelta,floattoXDelta,floatfromYDelta,floattoYDelta)

③ 设置动画持续时间

//设置时间持续时间为 2000毫秒myAnimation_Translate.setDuration(2000);


7.4 RotateAnimation

① RotateAnimation类对象定义

privateAlphaAnimation myAnimation_Alpha;

② RotateAnimation类对象构造

RotateAnimation(floatfromDegrees,floattoDegrees,intpivotXType,floatpivotXValue,intpivotYType,float pivotYValue)

            //第一个参数fromDegrees为动画起始时的旋转角度    //第二个参数toDegrees为动画旋转到的角度  //第三个参数pivotXType为动画在X轴相对于物件位置类型  //第四个参数pivotXValue为动画相对于物件的X坐标的开始位置//第五个参数pivotXType为动画在Y轴相对于物件位置类型  //第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置myAnimation_Rotate=newRotateAnimation(0.0f, +350.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

② RotateAnimation类对象构造

//设置时间持续时间为 3000毫秒myAnimation_Rotate.setDuration(3000);


8.如何使用Java代码中的动画效果

 使用从View父类继承过来的方法startAnimation()来为View或是子类View等等添加一个动画效果

publicvoidstartAnimation (Animation animation)


9.还是来个栗子吧

9.1 使用XML文件方式

①效果图如下:

②在XML文件中定义动画,前面已提及

③主界面布局,这没啥好说的,很简单 o(∩_∩)o

④主界面逻辑代码,主要就是这个了,控制动画显示

package com.yanis.base;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView;publicclassAnimationActivityextendsActivityimplements OnClickListener {

    private ImageView imgPic;

    private Button btnAlpha, btnScale, btnTranslate, btnRotate;

    private Animation myAnimation;

    @Override

    protectedvoid onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_animation);

        intiView();

        initData();

    }

    /**    * 初始化组件

    */privatevoid intiView() {

        imgPic = (ImageView) findViewById(R.id.imgPic);

        btnAlpha = (Button) findViewById(R.id.btnAlpha);

        btnScale = (Button) findViewById(R.id.btnScale);

        btnTranslate = (Button) findViewById(R.id.btnTranslate);

        btnRotate = (Button) findViewById(R.id.btnRotate);

    }

    /**    * 初始化数据

    */privatevoid initData() {

        btnAlpha.setOnClickListener(this);

        btnScale.setOnClickListener(this);

        btnTranslate.setOnClickListener(this);

        btnRotate.setOnClickListener(this);

    }

    @Override

    publicvoid onClick(View v) {

        switch (v.getId()) {

        case R.id.btnAlpha:

            /**            * 使用XML中的动画效果 第一个参数Context为程序的上下文 第二个参数id为动画XML文件的引用

            */            myAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);

            imgPic.startAnimation(myAnimation);

            break;

        case R.id.btnScale:

            myAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);

            imgPic.startAnimation(myAnimation);

            break;

        case R.id.btnTranslate:

            myAnimation = AnimationUtils.loadAnimation(this,

                    R.anim.translate_anim);

            imgPic.startAnimation(myAnimation);

            break;

        case R.id.btnRotate:

            myAnimation = AnimationUtils

                    .loadAnimation(this, R.anim.rotate_anim);

            imgPic.startAnimation(myAnimation);

            break;

        }

    }

}


9.2 使用Java代码方式

博文 游戏开发基础(动画) 中有实例说明,此处不再赘述。


10. 用Animation-list实现逐帧动画

栗子效果图如下:

步骤如下:

①在res/drawable目录添加图片素材

②在drawable文件夹中添加动画Animation-list帧布局文件


    根标签下,通过item标签对动画中的每一个图片进行声明 

    android:duration 表示展示所用的该图片的时间长度  -->

        android:drawable="@drawable/cmmusic_progress_1"        android:duration="150">

        android:drawable="@drawable/cmmusic_progress_2"        android:duration="150">

        android:drawable="@drawable/cmmusic_progress_3"        android:duration="150">

        android:drawable="@drawable/cmmusic_progress_4"        android:duration="150">

        android:drawable="@drawable/cmmusic_progress_5"        android:duration="150">

        android:drawable="@drawable/cmmusic_progress_6"        android:duration="150">

        android:drawable="@drawable/cmmusic_progress_7"        android:duration="150">

        android:drawable="@drawable/cmmusic_progress_8"        android:duration="150">

③主界面页面布局设置,太简单,不赘述了

④主界面代码如下:

package com.yanis.base;import android.app.Activity;import android.graphics.drawable.AnimationDrawable;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.ImageView;publicclassAnimationActivityextendsActivityimplements OnClickListener {

    private ImageView imgPic;

    private Button btnStart, btnStop;

    private AnimationDrawable animationDrawable;

    @Override

    protectedvoid onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_animation);

        intiView();

        initData();

    }

    /**    * 初始化组件

    */privatevoid intiView() {

        imgPic = (ImageView) findViewById(R.id.imgPic);

        btnStart = (Button) findViewById(R.id.btnStart);

        btnStop = (Button) findViewById(R.id.btnStop);

    }

    /**    * 初始化数据

    */privatevoid initData() {

        btnStart.setOnClickListener(this);

        btnStop.setOnClickListener(this);

        //Sets a drawable as the content of this ImageView.        imgPic.setImageResource(R.drawable.loading_anim);

        //给动画资源赋值animationDrawable = (AnimationDrawable) imgPic.getDrawable();

    }

    @Override

    publicvoid onClick(View v) {

        switch (v.getId()) {

        case R.id.btnStart:

            animationDrawable.start();//开始break;

        case R.id.btnStop:

            animationDrawable.stop(); //停止break;

        }

    }

}


本文地址:http://www.cnblogs.com/yc-755909659/p/4290114.html

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

推荐阅读更多精彩内容

  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,673评论 0 10
  • 引言:这篇文章简单介绍一下Android动画的基本写法和一些要注意的地方,帮助大家更加容易使用Android动画。...
    androidjp阅读 3,267评论 3 46
  • 最近工作比较清闲,所以想系统的复习和学习下自己比较短缺的知识,所以。。。 程序运行效果图: Android动画主要...
    小沈新手阅读 497评论 0 1
  • 一: 传统 View 动画(Tween/Frame) 1.1 Tween 动画 主要有 4 中:缩放、平移、渐变、...
    dfg_fly阅读 696评论 1 2
  • 前言 在学习了Android的动画之后,简单总结了一下,看完这篇文章就可以自己动手写一个简单的动画了 正文 An...
    墨月城汐阅读 1,365评论 0 5