View动画

一.效果图

image

二.使用 xml 文件实现方式

通用属性:

  • android:duration 动画持续时间,以毫秒为单位
  • android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态
  • android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态
  • android:fillEnabled 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
  • android:repeatCount 重复次数
  • android:repeatMode 重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。
  • android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等
  1. 渐变

    自身属性:

  • android:fromAlpha 动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
  • android:toAlpha 动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明

示例:

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

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

调用:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.view_alpha);
        animation.setFillAfter(true);//设置保持动画后的状态
        mIvIcon.startAnimation(animation);
  1. 平移
    自身属性:
  • android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲
  • android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;
  • android:toXDelta 结束点X轴坐标
  • android:toYDelta 结束点Y轴坐标

示例:

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

    <translate android:fromXDelta="0"
               android:toXDelta="100%"
               android:fromYDelta="0"
               android:toYDelta="100%"
               android:duration="2000"
    />
</set>
  1. 缩放
    自身属性:
  • android:fromXScale 起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;
  • android:toXScale 结尾的X方向上相对自身的缩放比例,浮点值;
  • android:fromYScale 起始的Y方向上相对自身的缩放比例,浮点值,
  • android:toYScale 结尾的Y方向上相对自身的缩放比例,浮点值;
  • android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。
  • android:pivotY 缩放起点Y轴坐标,取值及意义跟android:pivotX一样。

示例:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000">

    <scale android:fromXScale="1.0"
    android:toXScale="0.5"
    android:fromYScale="1.0"
    android:toYScale="0.5"
           android:pivotX="100%p"
           android:pivotY="100%p"/>

    <!--默认缩放中心在左上角-->
</set>
  1. 旋转

    自身属性:

  • android:fromDegrees 开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:toDegrees 结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
  • android:pivotY 缩放起点Y轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

示例:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate android:pivotX="50%"
            android:pivotY="50%"
            android:fromDegrees="0"
            android:toDegrees="180"
    android:duration="2000"/>
</set>
  1. 动画集合

    示例:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true">


    <alpha android:fromAlpha="1"
           android:toAlpha="0.5"/>

    <rotate android:fromDegrees="0"
            android:toDegrees="180"
            android:pivotX="50%"
            android:pivotY="50%"
    />
</set>

三.使用代码实现

  1. 渐变
//声明一个渐变动画, 参数1代表起始透明度,参数2代表结束透明度  //1代表完全不透明,0是完全透明
AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
        //设置持续时间
        alphaAnimation.setDuration(2000);
        //设置动画后的状态
        alphaAnimation.setFillAfter(true);
        //设置重复次数
        alphaAnimation.setRepeatCount(2);
        //设置重复模式
        alphaAnimation.setRepeatMode(Animation.REVERSE);
         //设置动画监听
        alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                
            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        mIvIcon.startAnimation(alphaAnimation);
  1. 平移
//      (int fromXType,    表示X的起始值类型,该类型指定相对长度的类型
//      Animation.RELATIVE_TO_PARENT   相对于父亲的长度
//      Animation.RELATIVE_TO_SELF     相对于自身的长度
//      Animation.ABSOLUTE             表示绝对类型,传入长度的绝对值
        
//      float fromXValue,  表示的是动画开始的时候,X的起始位置  (值由类型确定)
        
//      
//      int toXType, 表示X的结束值类型,该类型指定相对长度的类型
//      float toXValue,表示的是动画结束的时候,X的结束位置  (值由类型确定)
//      
//       y的起始类型,       y的起始值                              y的结束类型,       y的结束值  
//      int fromYType, float fromYValue, int toYType, float toYValue

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0f
                , Animation.RELATIVE_TO_PARENT, 1f,
                Animation.RELATIVE_TO_PARENT, 0f,
                Animation.RELATIVE_TO_PARENT, 1f);
        translateAnimation.setDuration(2000);
        translateAnimation.setFillAfter(true);
        mIvIcon.startAnimation(translateAnimation);
  1. 缩放
//      float fromX, 起始X的大小,  值为自身长度的倍数
//      
//      float toX, 结束X的大小,  值为自身长度的倍数
        
//      float fromY,
//      float toY,
//      int pivotXType,  缩放中心点的X位置的类型, 相对长度类型
//      float pivotXValue,   圆心的X的值 (值由类型确定) ,相对长度类型
//      int pivotYType, float pivotYValue   
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f);
        scaleAnimation.setFillAfter(true);
        scaleAnimation.setDuration(2000);
        mIvIcon.startAnimation(scaleAnimation);
  1. 旋转
//申明一个旋转动画    参数1:起始角度    参数2:旋转的度数               起始值小于结束值 顺时针,  大于 逆时针
//      RotateAnimation rotateAnimation = new  RotateAnimation(-180, -90);
//      RotateAnimation rotateAnimation = new RotateAnimation(0, 180, 150, 0);
//      float fromDegrees,起始角度  
//      float toDegrees, 结束角度               起始值小于结束值 顺时针旋转,  大于 逆时针旋转
//      int pivotXType, 表示圆心X位置的相对类型, 相对长度类型
//      
//      float pivotXValue, 圆心的X的值 (值由类型确定)
//      
//      int pivotYType, float pivotYValue
      //设置旋转中心在图片的中心
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180
                ,Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,0.5f);
        rotateAnimation.setDuration(2000);
        rotateAnimation.setFillAfter(true);
        mIvIcon.startAnimation(rotateAnimation);
  1. 集合
//先声明一个动画集合
    AnimationSet animationSet = new AnimationSet(true);
    //声明需要的动画
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180
                ,Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,0.5f);

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

推荐阅读更多精彩内容