基本属性动画

这篇文章只是对属性动画的一个简单的概括,下面所有的例子,都在这个Demo里,首先总结一下属性动画用到的东西

  • ObjectAnimator
  • ValueAnimator
  • PropertyValueHolder
  • TypeEvaluator
  • Interpolator

首先看一下ObjectAnimator的简单使用

ObjectAnimator oa = ObjectAnimator.ofFloat(mIv, "translationX", 0f, 200f);
oa.setDuration(500);
oa.start();

效果是这样的

objan_tx.gif

逗我?有什么特殊的吗?其实属性动画会改变view的实际属性。比如:改变button的位置,平移后的状态还是可以被点击的,而传统2D动画只是canvas绘制的,移动是用Matrix变换View的位置,并没有改变view的实际属性。
ObjectAnimator还有一些其他的属性

oa.reverse();//与start()二选一,这个执行与start相反
oa.setRepeatCount(1);//重复次数
oa.setRepeatCount(ValueAnimator.INFINITE);//无限循环
oa.setStartDelay(1000);//设置延迟执行
//与重复动画配合使用
oa.setRepeatMode(ValueAnimator.RESTART);//重新开始
oa.setRepeatMode(ValueAnimator.REVERSE);//反转开始
//重写全部的监听
oa.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) {}//重复
});
//重写需要的
oa.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation){super.onAnimationEnd(animation);}
});

注释很明确就不多做演示。多个动画同是执行应该怎么实现呢,这里有很多实现的方式。先看第一种用ObjectAnimator来实现。

ObjectAnimator animator = ObjectAnimator.ofFloat(mIv, "translationX", 0f, 100f);
animator.setDuration(300);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
            // 监听动画回调
            //animation.getAnimatedFraction();//动画执行的百分比 0~1 //API 12+
             float value = (float) animation.getAnimatedValue();//得到0f~100f当中的这个时间点对应的值
             mIv.setScaleX(0.5f+value/200);
             mIv.setScaleY(0.5f+value/200);
      }
});
animator.start();
objans1.gif

这里可以监听ObjectAnimator执行期间所用到的变量的值,根据这个值来设置第二个动画。第二种方法是ValueAnimator其实和第一种方法一样。

ValueAnimator animator = ValueAnimator.ofFloat(0f, 100f);
animator.setDuration(200);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
         @Override
          public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();//得到0f~100f当中的这个时间点对应的值
                 mIv.setScaleX(0.5f + value / 200);
                 mIv.setScaleY(0.5f + value / 200);
          }
});
animator.start();

这里也是通过添加监听实现自己想要的动画。第三种是PropertyValuesHolder。

PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("alpha", 1f, 0.5f, 1f);
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0.5f, 1f);
PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0.5f, 1f);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(mIv, holder1, holder2, holder3);
animator.setDuration(200);
animator.start();
ans2.gif

第四种是最常用的AnimatorSet。

ObjectAnimator animator1 = ObjectAnimator.ofFloat(mIv, "translationX", 0f, 100f, 0f);
//animator1.setRepeatCount(3);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mIv, "alpha", 0f, 1f);
//animator2.setStartDelay(startDelay)//设置延迟执行  动画的间隔时间
ObjectAnimator animator3 = ObjectAnimator.ofFloat(mIv, "scaleX", 0f, 2f, 1f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(500);
//animatorSet.play(animator3).with(animator2).after(animator1);//animator1在前面
 animatorSet.play(animator3).with(animator2).before(animator1);//animator1在后面
//animatorSet.playTogether(animator1,animator2,animator3);//一起进行
//animatorSet.playSequentially(animator1, animator2, animator3);//顺序播放
animatorSet.start();
ans3.gif

AnimatorSet还是比较灵活的,用法比较多。接下来看一下TypeEvaluator估值器,它可以控制view轨迹运动。

                /**
                 * x: 匀速
                 * y: 加速度 y=vt=1/2*g*t*t
                 * 估值器---控制坐标PointF(x,y)
                 */
                ValueAnimator valueAnimator = new ValueAnimator();
                valueAnimator.setDuration(2000);
                valueAnimator.setObjectValues(new PointF(0, 0));
                final PointF pointF = new PointF();
                valueAnimator.setEvaluator(new TypeEvaluator<PointF>() {

                    @Override
                    public PointF evaluate(float fraction, PointF startValue,
                                           PointF endValue) {
                        // 估值计算方法---可以在执行的过程当中干预改变属性的值---做效果:用自己的算法来控制
                        //不断地去计算修改坐标
                        //x匀速运动 x=v*t 为了看起来效果好我让t变成fraction*5
                        pointF.x = 100f * (fraction * 5);
                        //加速度 y=vt=1/2*g*t*t
//                      pointF.y = 0.5f*9.8f*(fraction*5)*(fraction*5);
                        pointF.y = 5f * 0.5f * 9.8f * (fraction * 5) * (fraction * 5);
                        return pointF;
                    }
                });
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        PointF f = (PointF) animation.getAnimatedValue();
                        mIv.setX(f.x);
                        mIv.setY(f.y);
                    }
                });
                valueAnimator.start();

            }
        });
te_an.gif

估值器就是设置Evaluator通过一定的算法返回X,Y让View进行移动。
最后就是插值器这里只写出几种。

ObjectAnimator oa = ObjectAnimator.ofFloat(mIv, "translationY", 0f, 800f);
oa.setDuration(800);
oa.setInterpolator(new AccelerateInterpolator(1));//加速
oa.setInterpolator(new AccelerateDecelerateInterpolator());//先加速后减速
oa.setInterpolator(new BounceInterpolator());//回弹
oa.setInterpolator(new AnticipateInterpolator());//先后撤一下然后正常进行
oa.setInterpolator(new CycleInterpolator(1));//周期执行
oa.start();

这里只是属性动画基本的一个概括,和个人的一个总结,如果其中有错误还请指出,我会尽快修改文章,并改正自己的理解,谢谢。

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

推荐阅读更多精彩内容