专栏首页微卡智享学习|Android属性动画的组合动画之二--AnimatorSet

学习|Android属性动画的组合动画之二--AnimatorSet

本文长度为2943字,预计阅读8分钟

AnimatorSet组合动画

上一篇中《学习|Android属性动画的组合动画之一--AnimationSet》我们已介绍了AnimationSet的组合动画,也简单说了一下AnimationSet与AnijmatorSet的区别,这一篇我们就要说试一试AnimatorSet的效果。

AnimatorSet的使用

微卡智享

AnimatorSet和AnimationSet中的大部分播放设计的函数都是差不多的,但是相比较而言AnimatorSet要比AnimationSet要强大的多。上一篇中我们就说到AnimationSet中所有的动画效果是一起播放的,而AnimatorSet中是可以实现顺序播放的。

在AnimatorSet中给为我们提供了两个方法playSequentially和playTogether,

  • playSequentially 表示所有动画依次播放
  • playTogether 表示所有动画一起开始

playSequentially函数

public void playSequentially(Animator... items);
public void playSequentially(List<Animator> items);

上面两个方法的参数不同,第一个类型后面...在Android中代表的可变长参数,比较灵活,所以第一个参数比较常后,第二个类型就是自己定义一个List<Animator>的集合传入进去执行。

代码演示

private void AnimatorArray() {
        //设置动画一往X轴方向从2缩放到10
        ObjectAnimator animator1=ObjectAnimator.ofFloat(tvshow, "scaleX", 2, 10);
        //设置动画二往Y轴方向从2缩放到10
        ObjectAnimator animator2=ObjectAnimator.ofFloat(tvshow, "scaleY", 2, 10);

        AnimatorSet set=new AnimatorSet();
        //设置动画的基础属性
        set.playSequentially(animator1, animator2);

        set.setDuration(1000);//播放时长
        set.setStartDelay(100);//延迟播放
        set.setInterpolator(new AccelerateDecelerateInterpolator());
        set.start();
    }

上面代码我们设置了两个动画,第一个是设置动画一往X轴方向从2缩放到10,第二个是设置动画二往Y轴方向从2缩放到10。

上图是通过playSequentially实现的效果,我们可以看到,两个动画是按顺序播放的,即播放完了X轴横向的动画再播放到Y轴纵向的动画。

playTogether函数

public void playTogether(Animator... items);
public void playTogether(Collection<Animator> items);

上面两个方法的参数和上面的playSequentially是一样的,所以这里我就不再详细说明了,代码还是用刚才的,我们直接把playSequentially改为playTogether看看效果

上图是通过playTogether实现的效果,可以看出是同时播放的,和我们上一篇的AnimationSet是一样的效果。

用AnimatorSet实现的动画效果后,我们原来的控件效果会一直保留,就像上图中两个放大后就一直保存着放大的效果。

AnimatorSet.Builder(自由设置动画顺序)

AnimatorSet.Builder可以实现playSequentially和playTogether无法实现的效果,比如说有三个动画,我们想先放第二个后,然后第一个和第三个再同时播放,用playSequentially和playTogether是无法实现的,这里我们就可以用AnimatorSet.Builder来实现。

方法

描述

public Builder play(Animator anim)

表示要播放哪个动画。AnimatorSet中的play方法是获取AnimatorSet.Builder对象的唯一途径

public Builder with(Animator anim)

和前面动画一起执行

public Builder before(Animator anim)

执行前面的动画后才执行该动画

public Builder after(Animator anim)

执行先执行这个动画再执行前面动画

public Builder after(long delay)

延迟n毫秒之后执行动画

代码演示

private void AnimatorArray() {
        //设置动画一往X轴方向从2缩放到10
        ObjectAnimator animator1=ObjectAnimator.ofFloat(tvshow, "scaleX", 2, 10);
        //设置动画二往Y轴方向从2缩放到10
        ObjectAnimator animator2=ObjectAnimator.ofFloat(tvshow, "scaleY", 2, 10);
        //设置动画三往X轴平移100再返回
        ObjectAnimator animator3=ObjectAnimator.ofFloat(tvshow, "translationX", 0, 100, 0);
        //设置动画四往Y轴平移100再返回
        ObjectAnimator animator4=ObjectAnimator.ofFloat(tvshow, "translationY", 0, 100, 0);

        AnimatorSet set=new AnimatorSet();
        //设置动画的基础属性
        set.play(animator1).with(animator2).after(animator3).before(animator4);

        set.setDuration(1000);//播放时长
        set.setStartDelay(100);//延迟播放
        set.setInterpolator(new AccelerateDecelerateInterpolator());
        set.start();
    }

上面代码我们在原来的基础又加了两个动画,动画三是向左平移100再返回动画四是向下平移100再返回。

上图中的设置属性说明先执行animator3(向左平移再返回),再同时执行animator1和animator2(横向及纵向同时放大),最后再执行animator4(向下平移再返回),接下来我们看看效果

本篇主要把关于AnimatorSet的常用方法介绍了一下,更多的细节操作可以查看AnimatorSet的一些相关文档。

本文分享自微信公众号 - 微卡智享(VaccaeShare),作者:Vaccae

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学习|Android属性动画TypeEvaluator和Interpolator使用

    最近几章都是在学习Android的动画,也是慢慢的有了个了解了,前两篇也是主要做了一些简单的应用,其有说介绍到ValueAnimator的使用,今天这篇针对Va...

    Vaccae
  • Sql Server各系统表说明及使用案例

    我们平时写一般的SQL语句的时候,可能不会用到系统表,不过在一些特殊的情况下就会用到了,比如说在系统运用的时候,我们根据日期动态创建的数据表,如果要从里面获取数...

    Vaccae
  • C# SqlSugar框架的学习使用(二)-- 类的生成及增删改查的应用

    前一篇《C# SqlSugar框架的学习使用(一)--SqlSugar简介及创建》我们已经简单的介绍了一下SqlSugar,最后我们在项目中新建了一个SqlSu...

    Vaccae
  • iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

    stanbai
  • animation动画实践

    由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

    IMWeb前端团队
  • animation动画实践

    由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

    IMWeb前端团队
  • H5动画开发快车道 - AnimateCC与createjs开发实践

    腾讯ISUX
  • 【Flutter 专题】51 图解动画小插曲之 Flare 动画

    和尚前两天学习了一下 Lottie 动画,确实很方便,今天来尝试一下 Flare 动画,学习 Flutter 的朋友对此并不陌生,Flare 可以为...

    阿策
  • 透过WebGL 3D看动画Easing函数本质

    50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当...

    HT for Web
  • 05-老马jQuery教程-动画

    前言 jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实...

    老马

扫码关注云+社区

领取腾讯云代金券