Android动画初探

安卓动画目前共分为三种动画逐帧动画、补间动画和属性动画。

一、逐帧动画(frame-by-frame animation)

逐帧动画就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理。

  • 素材图片放到drawable文件夹下,mipmap下无法引用
素材图片
  • 在drawable文件夹下新建wifi-z的xml文件用来存放图片
    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    //oneshot表示是否循环播放 true只播放一次,false循环播放,图片顺序不能变否则动画不连贯
    <item
    android:drawable="@drawable/icon_5"
    android:duration="300" />
    <item
    android:drawable="@drawable/icon_4"
    android:duration="300" />
    <item
    android:drawable="@drawable/icon_3"
    android:duration="300" />
    <item
    android:drawable="@drawable/icon_2"
    android:duration="300" />
    <item
    android:drawable="@drawable/icon_1"
    android:duration="300" />
    <item
    android:drawable="@drawable/icon_0"
    android:duration="300" />
    </animation-list>

  • Activity中引用动画
    // 存放动画图片的imageview
    private ImageView mImg;
    // 开启动画的按钮
    private Button mBtn;
    // 实现逐帧动画的类
    private AnimationDrawable animationDrawable;

        mBtn.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              mImg.setImageResource(R.drawable.wifi_d);
              animationDrawable = (AnimationDrawable) mImg.getDrawable();
              animationDrawable.start();//停止调用stop方法
          }
      });
    

二、补间动画(tweened animation)

补间动画则是可以对View进行一系列的动画操作,包括淡入淡出、缩放、平移、旋转四种。
<b>
补间动画只是表面上的View移动,View实际还在原来位置,而属性动画则是View也跟着移动</b>

  • 淡入淡出
    AlphaAnimation:透明度(alpha)渐变效果,对应<alpha/>标签。
    外部xml方法
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="1.0"
    android:fillAfter="false"//动画结束时是否保持在该位置
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"//插值器
    android:toAlpha="0.1" />

      Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
      mImg.startAnimation(animation);
    

    java方式
    Animation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
    alphaAnimation.setDuration(2000);
    alphaAnimation.setFillAfter(false);
    mImg.startAnimation(alphaAnimation);

  • 缩放
    ScaleAnimation:缩放渐变,可以指定缩放的参考点,对应<scale/>标签。
    xml方式
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXScale="0.2"
    android:fromYScale="0.2"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%" //动画起始位置,相对于屏幕的百分比,两个都为50%表示动画从自身中间开始
    android:toXScale="1.5"
    android:toYScale="1.5" />
    java方式
    Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(2000);//设置动画持续时间为500毫
    scaleAnimation.setInterpolator(this, android.R.anim.accelerate_interpolator);//设置动画插入器
    mImg.startAnimation(scaleAnimation);

  • 平移
    TranslateAnimation:位移渐变,需要指定移动点的开始和结束坐标,对应<translate/>标签。
    xml方式
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toXDelta="320"
    android:toYDelta="0" />
    java方式
    Animation translateAnimation = new TranslateAnimation(0, 320, 0, 0);
    translateAnimation.setDuration(2000);
    translateAnimation.setInterpolator(this, android.R.accelerate_decelerate_interpolator);//设置动画插入器
    mImg.startAnimation(translateAnimation);

  • 旋转
    RotateAnimation:旋转渐变,可以指定旋转的参考点,对应<rotate/>标签。
    xml方式
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:repeatCount="-1"//-1代表无限循环 正数代表循环几次
    android:repeatMode="reverse"//动画重复的模式,reverse为反向,当第偶次执行时,动画方向会相反。restart为重新执行,方向不变
    android:toDegrees="360" />
    java方式
    Animation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    rotateAnimation.setDuration(1000);
    rotateAnimation.setInterpolator(this, android.R.anim.accelerate_decelerate_interpolator);//设置动画插入器
    mImg.startAnimation(rotateAnimation);

  • 组合
    AnimationSet:组合渐变,支持组合多种渐变效果,对应<set/>标签。
    java方式
    AnimationSet animationSet = new AnimationSet(true);
    animationSet.addAnimation(alphaAnimation);
    animationSet.addAnimation(scaleAnimation);
    mImg.startAnimation(animationSet);

  • 动画监听器
    alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
    //动画开始时调用 }
    @Override
    public void onAnimationEnd(Animation animation) {
    //动画结束时调用 }
    @Override
    public void onAnimationRepeat(Animation animation) {
    //动画重复时调用 } });

  • 插值器
    AccelerateInterpolator 加速,开始时慢中间加速
    DecelerateInterpolator 减速,开始时快然后减速
    AccelerateDecelerateInterolator 先加速后减速,开始结束时慢,中间加速
    AnticipateInterpolator 反向,先向相反方向改变一段再加速播放
    AnticipateOvershootInterpolator 反向加超越,先向相反方向改变,再加速播放,会超出目的值然后缓慢移动至目的值
    BounceInterpolator 跳跃,快到目的值时值会跳跃,如目的值100,后面的值可能依次为85,77,70,80,90,100
    CycleIinterpolator 循环,动画循环一定次数,值的改变为一正弦函数:Math.sin(2* mCycles* Math.PI* input)
    LinearInterpolator 线性,线性均匀改变
    OvershootInterpolator超越,最后超出目的值然后缓慢改变到目的值

三、属性动画(property animation)

功能很强大,可以替代逐帧动画与补间动画。

  • ValueAnimator
    属性动画的运行机制是通过不断地对值进行操作来实现的,而初始值和结束值之间的动画过渡就是由ValueAnimator这个类来负责计算的。它的内部使用一种时间循环的机制来计算值与值之间的动画过渡,我们只需要将初始值和结束值提供给ValueAnimator,并且告诉它动画所需运行的时长,那么ValueAnimator就会自动帮我们完成从初始值平滑地过渡到结束值这样的效果。

      //从0-1-5-1 float 类型 整型可以ofInt
      ValueAnimator animator = ValueAnimator.ofFloat(0f, 1.0f, 5.0f, 1.0f);
      animator.setDuration(300);
      animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
          @Override
          public void onAnimationUpdate(ValueAnimator valueAnimator) {
              float value = (float) valueAnimator.getAnimatedValue();
              Log.d(TAG, "onAnimationUpdate: " + value);
          }
      });
      animator.start();
    
  • ObjectAnimator
    可以直接对任意对象的任意属性进行动画操作的,比如说View的alpha属性。
    // 旋转:rotation 渐变:alpha 平移:x轴tarnslationX(平移时需要先获取当前位置,getTranslationX)
    //缩放 scaleX/scaleY
    ObjectAnimator animator = ObjectAnimator.ofFloat(mProperty, "alpha", 1.f, 0f);
    animator.setDuration(1000);
    animator.start();

  • AnimatorSet(组合动画)

  • after(Animator anim) 将现有动画插入到传入的动画之后执行

  • after(long delay) 将现有动画延迟指定毫秒后执行

  • before(Animator anim) 将现有动画插入到传入的动画之前执行

  • with(Animator anim) 将现有动画和传入的动画同时执行
    ObjectAnimator translate = ObjectAnimator.ofFloat(mProperty, "translationX", -500f, 0f);
    ObjectAnimator rotation = ObjectAnimator.ofFloat(mProperty, "rotation", 0f, 360f);
    ObjectAnimator scale = ObjectAnimator.ofFloat(mProperty, "scaleX", 1.0f, 2.0f, 1.0f);
    AnimatorSet set = new AnimatorSet();
    set.play(rotation).with(scale).after(translate);
    set.setDuration(5000);
    set.start();

  • Animator监听器

  • 监听所有方法
    translate.addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animator) {

         }
    
         @Override
         public void onAnimationEnd(Animator animator) {
    
         }
    
         @Override
         public void onAnimationCancel(Animator animator) {
    
         }
    
         @Override
         public void onAnimationRepeat(Animator animator) {
    
         }
     });
    
  • 监听单个方法
    rotation.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
    super.onAnimationEnd(animation);
    }
    });

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

推荐阅读更多精彩内容

  • Animation Animation类是所有动画(scale、alpha、translate、rotate)的基...
    四月一号阅读 1,899评论 0 10
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,688评论 0 10
  • Android中动画分为三种: 逐帧动画 补间动画 属性动画 逐帧动画 逐帧动画类似于gif或是电影的原理,通过将...
    fengmlo阅读 711评论 0 2
  • 本文参加#未完待续,就要表白#活动,本人承诺,文章内容为原创,且未在其他平台发表过。 入我相思门,知我相思苦, 长...
    唇寒阅读 297评论 1 5
  • 上次写的文章里面提到了我的女儿,有朋友惊呼「你竟然已经有孩子了!」这时候我才想起来,我经常在网上交流的朋友们,大都...
    c5de959d631b阅读 919评论 8 6