Android 动画基础

一. View 动画

分为四种:平移,缩放,旋转,渐变,他们之间有很多共性,所以有一个共同的父类 Animation,存放一些动画共有的属性

  1. Animation

    • duration 时长
    • fillAfter 停止后是否留在最后一帧
    • fillBefore 停止后是否回到第一帧,默认为 true
    • fillEnabledfillBefore 相同
    • repeatCount 重复的次数
    • repeatMode 重复的类型,分为 reverserestart ,前一个表示第一次动画结束后从最后一帧往前,后一个表示第一次动画结束后再从第一帧开始,默认是 restart
    • interpolator 差值器
  2. Translate 移动

    • android:fromXDelta 数值可以为 整数,百分数,百分数p ,例如 50、50%、50%p,
      • 50 表示以当前View左上角坐标加50px为初始点
      • 50% 表示以当前View的左上角加上当前View宽高的50%做为初始点
      • 50%p 表示以当前View的左上角加上父控件宽高的50%做为初始点,p 代表 parent
    • android:fromYDelta 同上
    • android:toXDelta 同上
    • android:toYDelta 同上
    <?xml version="1.0" encoding="utf-8"?>  
        <translate xmlns:android="http://schemas.android.com/apk/res/android"  
            android:fromXDelta="0"  
            android:fromYDelta="0"
            android:toXDelta="-80"  
            android:toYDelta="-80"  
            android:duration="2000">  
        </translate> 
    

    如果只是在 x 方向上移动,不在 y 方向上移动,只需要写成下面这样子, 不需要加上 y :

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

  3. Scale 缩放放大

    • android:fromXScale 浮点值,开始的时候 x方向 缩放或者放大比例
    • android:toXScale 浮点值,结束的时候 x方向 缩放或者放大比例
    • android:fromYScale 同上x
    • android:toYScale 同上x
    • android:pivotX 轴点 X 坐标,支持三种表示方式(数值,百分比,父 View 百分比)
    • android:pivotY 轴点 Y 坐标
  4. Rotate 旋转

    • android:fromDegrees 顺时针正值,逆时针负值
    • android:toDegrees
    • android:pivotX 轴点 X 坐标,支持三种表示方式
    • android:pivotY 轴点 Y 坐标
    <?xml version="1.0" encoding="utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromDegrees="0"  
        android:toDegrees="-650"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:duration="3000"  
        android:fillAfter="true">  
          
    </rotate>
    
  5. Alpha 渐变

    • android:fromAlpha 浮点值,0.0 - 1.0, 0为全透明,1位全不透明
    • android:toAlpha
    <?xml version="1.0" encoding="utf-8"?>  
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.1"  
        android:duration="3000"  
        android:fillBefore="true">  
    </alpha> 
    
  6. Set 动作合集
    也是直接继承自 Animation, 但是没有自己的属性,包裹其他动画,实现几个动画同时发生

    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:duration="3000"  
        android:fillAfter="true">  
          
      <alpha   
        android:fromAlpha="0.0"  
        android:toAlpha="1.0"/>  
        
      <scale  
        android:fromXScale="0.0"  
        android:toXScale="1.4"  
        android:fromYScale="0.0"  
        android:toYScale="1.4"  
        android:pivotX="50%"  
        android:pivotY="50%"/>  
        
      <rotate  
        android:fromDegrees="0"  
        android:toDegrees="720"  
        android:pivotX="50%"  
        android:pivotY="50%"/>  
             
    </set>
    
  7. View 动画的使用

    Animation translateAnim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
    view.startAnimation(translateAnim);
    

二. 帧动画

帧动画的载体是一个 ImageViwe, 设置一个 AnimationDrawable

  1. 先定义一个 animation-list 类型的 xml 文件, 名字叫 item01 ,放在 drawable 文件夹下面
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/anim_fram_08"
        android:duration="80" />
    <item
        android:drawable="@drawable/anim_fram_09"
        android:duration="80" />
    <item
        android:drawable="@drawable/anim_fram_10"
        android:duration="80" />

</animation-list>
  1. 具体设置代码:
ivAnim.setImageResource(R.drawable.item01);
AnimationDrawable animationDrawable = (AnimationDrawable) ivAnim.getDrawable();
animationDrawable.start();

三. 属性动画

属性动画原理是通过反射 setProp 方法不断修改对象的属性,例如 view 的 x 属性值等,达到动画的效果。

对于属性值,只设置一个的时候,会认为当前对象该属性的值为开始(getPropName反射获取),然后设置的值为终点。如果设置两个,则一个为开始、一个为结束

动画更新的过程中,会不断调用setPropName更新元素的属性,所有使用ObjectAnimator更新某个属性,必须得有getter(设置一个属性值的时候)和setter方法

  1. ObjectAnimator
    对象动画类,在构造的过程中需要传递一个对象,主要通过 of 方法 改变对象的属性,因为是 String 类型的参数传入,所以没有代码提示,可以通过 view.getXX 方法获得具体的属性名字和属性的数据类型,第三个参数可以设置多个参数值,标识在这几个参数之间变化, 例如下面就是先从 0 到 360,再从 360 到 120。
ObjectAnimator.ofFloat(view, "translationX", 0f, 360f,120f)
                        .setDuration(500)
                        .start();

Animator 有 addUpdateListener() 方法,用来设置在动画执行过程中的回调监听。

例如下面,随便设置了一个属性,因为属性值是逐渐变化的,变化的过程中会有触发回调,我们在回调里设置了scale 和 alpha 属性

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "valuae", 1.0f, 0f, 1.0f)
                        .setDuration(1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float animatValue = (float) animation.getAnimatedValue();
                        Log.i("value", animatValue + "");
                        view.setScaleX(animatValue);
                        view.setScaleY(animatValue);
                        view.setAlpha(animatValue);
                    }
                });
                animator.start();

PropertyValuesHolder 属性持有器
用来保存一些属性的变化过程,构造的时候只有属性和变化的数值,方便组合动画

PropertyValuesHolder scaleXHolder = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0f, 1.0f);
PropertyValuesHolder scaleYHolder = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0f, 1.0f);
PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0f, 1.0f);
ObjectAnimator.ofPropertyValuesHolder(view, scaleXHolder, scaleYHolder, alphaHolder)
                        .setDuration(1000)
                        .start();
  1. ValueAnimator
    构造的时候只传入变化的数值,然后在 animator.addUpdateListener 中根据动画的数值手动进行动画
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.0f, 0f, 1.0f);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (float) animation.getAnimatedValue();
                        view.setScaleX(value);
                        view.setScaleY(value);
                        view.setAlpha(value);
                        view.setPivotX(0);
                        view.setPivotY(0);
                    }
                });
valueAnimator.start();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容