View(3) 的属性动画

参考链接 向刘老师学习,所以摘抄了老师的笔记,只想作为自己的技术积累。

前言

View 的属性动画可以使其展现时更加帅气,结合好的动画可以优化用户体验。

视图动画

视图动画不具有交互性,当某个元素发生视图动画后,其响应事件的位置依然在动画前的地方,所以视图动画只能做普通的动画效果,避免交互的发生。但是它的优点也非常明显:效率比较高使用也方便。

AlphaAnimationRotateAnimation,TranslateAnimation,ScaleAnimation四种动画方式,并提供了AnimationSet动画集合来混合使用多中动画。

属性动画

由于android3.0之前已有的动画框架Animation存在一些局限性:动画改变的只是显示,并不能响应事件。因此,在android3.0之后,谷歌就推出了新的动画框架,帮助开发者实现更加丰富的动画效果。

Animator框架中使用最多的就是AnimatorSetObjectAnimator配合,使用ObjectAnimator进行更精细化的控制,控制一个对象和一个属性值,而使用多个ObjectAnimator组合到AnimatorSet形成一个动画。属性动画通过调用属性get,set方法来真实地控制了一个View的属性值,因此强大的属性动画框架,基本可以实现所有的动画效果。

ObjectAnimator

ObjectAnimator是属性动画最重要的类,创建一个ObjectAnimator只需通过他的静态工厂类直接返还一个ObjectAnimator对象。参数包括一个对象和对象的属性名字,但这个属性必须有getset函数,内部会通过java反射机制来调用set函数修改对象的属性值。
来看看平移动画是如何实现的:

利用Java实现

ObjectAnimator mObjectAnimator=ObjectAnimator.ofFloat(view,"translationX",200);
mObjectAnimator.setDuration(300);
mObjectAnimator.start();

利用kotlin实现

        objectAnimatior = ObjectAnimator.ofFloat(mv_test, "translationX", 200.toFloat())
        objectAnimatior.duration = 3000
        objectAnimatior.start()

通过ObjectAnimator 的静态工厂方法,创建一个ObjectAnimator 对象,第一个对象是要操作的View,第二个参数则是要操纵的属性,最后一个参数是一个可变的数组参数,需要传进去一个该属性变化的一个取值的过程,这里设置了一个参数,变化到200。与视图动画一样,也可以给属性动画设置显示时长,差值器等属性。在使用ObjectAnimator的时候,有一个非常重要,那就是是要操纵的属性必须要有get,set方法,不然ObjectAnimator 就无法起效。下面就是一些常用的可以直接使用的属性动画的属性值:

  • translationXtranslationY:这两个属性作为增量控制View对象从他的布局容器的左上角开始位置。负责View位置的改变。
  • rotationrotationXrotationY:这三个属性控制View对象围绕它的支点进行2D和3D旋转。
  • PrivotXPrivotY:控制View对象的支点位置,围绕这个支点进行旋转和缩放变换处理。默认该支点位置就是View对象的中心点。
  • alpha:透明度,默认是1(不透明),0代表完全透明。
  • xy:描述View对象在它容器中的最终位置,它是最初的做上角坐标和translationXtranslationY值的累计的和。

如果一个属性没有get,set方法,也可以通过自定义一个属性类或则包装类来间接地给这个属性增加get和set方法。来看看如何通过包装类的方法给一个属性增加get和set方法:

private static class MyView{
    private View mTarget;
    private MyView(View mTarget){
    this.mTarget=mTarget;
    }
    public int getWidth(){
        return mTarget.getLayoutParams().width;
    }
    public void setWidth(int width){
        mTarget.getLayoutParams().width=width;
        mTarget.requestLayout();
    }
}

使用时只需要操纵包类就可以调用get,set方法:

MyView mMyView=new MyView(mButton); 
ObjectAnimator.ofInt(mMyView,"width",500).setDuration(500).start();

ValueAnimator

ValueAnimator不提供任何动画效果,它更像一个数值发生器,用来产生一定规律数字,从而让调用者来控制动画的实现过程。通常情况下,在ValueAnimatorAnimatorUpdateListener中监听数值的变化,从而完成动画的变换:

ValueAnimator mValueAnimator=ValueAnimator.ofFloat(0,100);
mValueAnimator.setTarget(view);
mValueAnimator.setDuration(1000).start();
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Float mFloat=(Float)animation.getAnimatedValue();
            }
        });
    }

我自己的Demo代码如下:

private fun valueSimpleTest() {
    valueAnimator = ValueAnimator.ofInt(0, 400)
    valueAnimator.duration = 3000
    valueAnimator.addUpdateListener { valueAnimator ->
        val currentValue: Int = valueAnimator.animatedValue as Int
        tv_test.layout(tv_test.left, currentValue, tv_test.right, currentValue + tv_test.height)
    }
    valueAnimator.start()
}
效果图

动画的监听

完整的动画具有start,Repeat,End,Cancel四个过程:

ObjectAnimator animator=ObjectAnimator.ofFloat(view,"alpha",1.5f);
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }
            @Override
            public void onAnimationEnd(Animator animation) {
            }
            @Override
            public void onAnimationCancel(Animator animation) {
            }
            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
    }

大部分时候我们只关心onAnimationEnd事件,android也提供了AnimatorListenterAdaper来让我门选择必要的事件进行监听:

ObjectAnimator animator=ObjectAnimator.ofFloat(view,"alpha",1.5f);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }
        });

组合动画-AnimatorSet

这个类提供了一个play()方法,如果我们向这个方法中传入一个Animator对象(ValueAnimatorObjectAnimator)将会返回一个AnimatorSet.Builder的实例,AnimatorSet.Builder中包括以下四个方法:

  • after(Animator anim) 将现有动画插入到传入的动画之后执行
  • after(long delay) 将现有动画延迟指定毫秒后执行
  • before(Animator anim) 将现有动画插入到传入的动画之前执行
  • with(Animator anim) 将现有动画和传入的动画同时执行
ObjectAnimator animator1 = ObjectAnimator.ofFloat(mCustomView, "translationX", 0.0f, 200.0f, 0f);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mCustomView, "scaleX", 1.0f, 2.0f);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(mCustomView, "rotationX", 0.0f, 90.0f, 0.0F);
AnimatorSet set=new AnimatorSet();
set.setDuration(1000);
set.play(animator1).with(animator2).after(animator3);
set.start();

首先我们创建三个ObjectAnimator,分别是animator1、animator2和animator3。然后创建AnimatorSet,在这里我们先执行animator3,然后同时执行animator1和animator2的动画,当然也可以调用set.playTogether(animator1,animator2);来使这两种动画同时执行。

我的例子代码如下:

private fun animationSet() {
   val animator1 = ObjectAnimator.ofFloat(tv_test, "translationX", 0.0f, 200.0f, 0f)
   val animator2 = ObjectAnimator.ofFloat(tv_test, "scaleX", 1.0f, 2.0f)
    val animator3 = ObjectAnimator.ofFloat(tv_test, "rotationX", 0.0f, 90.0f, 0.0f)
    val set = AnimatorSet()
    set.duration = 1000
    set.play(animator1).with(animator2).after(animator3)
    set.start()
}
效果图

组合动画-PropertyValuesHolder

除了上面AnimatorSet类还可以使用PropertyValuesHolder类来实现组合动画,不过这个组合动画就没有上面的丰富了,使用PropertyValuesHolder类只能多个动画一起执行。当然我们得结合ObjectAnimator.ofPropertyValuesHolder(Object target,PropertyValuesHolder… values);方法来使用。第一个参数是动画的目标对象,之后的参数是PropertyValuesHolder类的实例,可以有多个这样的实例。代码如下:

PropertyValuesHolder valuesHolder1 = PropertyValuesHolder.ofFloat('scaleX', 1.0f, 1.5f);
PropertyValuesHolder valuesHolder2 = PropertyValuesHolder.ofFloat('rotationX', 0.0f, 90.0f, 0.0F);
PropertyValuesHolder valuesHolder3 = PropertyValuesHolder.ofFloat('alpha', 1.0f, 0.3f, 1.0F);
ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(imageView,  valuesHolder1, valuesHolder2, valuesHolder3);
objectAnimator.setDuration(2000).start();

这个不难,偷个懒。

xml中使用属性动画

和视图动画一样,属性动画也可以直接写在xml中:
在res文件中新建animator文件,在里面新建一个scale.xml,里面的内容如下:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:duration="1000"
    android:propertyName="scaleX"
    android:valueFrom="1.0"
    android:valueTo="2.0"
    android:valueType="floatType"
    >
</objectAnimator>

程序中引用xml定义的属性动画:

Animator animator=AnimatorInflater.loadAnimator(this,R.animator.scale);
animator.setTarget(view);
animator.start();

我的实现代码如下:

private fun moveViaAnimation() {
    // 使用动画使其位移
    mv_test.animation = AnimationUtils.loadAnimation(this, R.anim.translate)
    ObjectAnimator.ofFloat(mv_test, "translationX", 0.toFloat(), 300.toFloat()).setDuration(1000).start()
}
效果图

源码链接

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

推荐阅读更多精彩内容