Android - 动画(帧动画,补间动画,属性动画,以及插值器)

老婆保佑,代码无BUG

目录

  • 一: 动画的分类
  • 二:解析
      1. 帧动画
      1. 补间动画
      • 属性讲解
      • interpolator插值器
      1. 属性动画
    • ValueAnimator
    • ObjectAnimator

一: 动画的分类

  1. 帧动画
  2. 补间动画
  3. 属性动画

二:解析

1. 帧动画

(1)定义

这些图片是将一些列的drawable组合在一起,进行连续的播放, 类似于以前电影源用胶卷进行动画播放

(2)有图有真相

(3)准备图片

看着是不是还行,哈哈,下面说一下实现,首先准备几个图片,百度吧,啥都有,还有美女动图,哈哈,准备好图片以后就开始我们的项目咯

(4)创建XML 配置文件

  1. 在res下创建一个drawable文件夹,在其中创建一个anim.xml
  2. 在 <animation-list>标签中将一系列的图片组合在一起
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <!--  oneshot 是否只播放一次 -->
    <item
        android:drawable="@drawable/pic_01"
        android:duration="200" />
    <!-- duration 延时时间 单位毫秒 -->
    <item
        android:drawable="@drawable/pic_02"
        android:duration="200" />
    <item
        android:drawable="@drawable/pic_03"
        android:duration="200" />
    <item
        android:drawable="@drawable/pic_04"
        android:duration="200" />
    <item
        android:drawable="@drawable/pic_05"
        android:duration="200" />
    <item
        android:drawable="@drawable/pic_06"
        android:duration="200" />
    <item
        android:drawable="@drawable/pic_07"
        android:duration="200" />
</animation-list>

(5) 如何在代码中使用

//开始动画
 private void init_startAnim() {
        anim = (AnimationDrawable) getResources().getDrawable(R.drawable.anim);
        img.setBackgroundDrawable(anim);//img 是我们放在布局文件中的ImageView
        anim.start();
    }

//停止动画
 private void init_stopAnim() {
        if (anim != null) {
            anim.stop();
        }
    }

2. 补间动画

本文很多参考这篇文章,有兴趣的小伙伴,可以点击详细查看

(1) 定义

指的View可以是TextView,Button等等 可以让指定的View进行缩放,旋转,位移,透明度的变化 (对前面的4个效果可以组合实用)

(2)属性讲解

属性名称 作用
Alpha 透明度
Rotate 旋转
Canle 缩放
Translate 位移
Set 组合

先有个概念,后续会对每个属性详细讲解。。。

(3)使用

  1. 创建res/anim的文件夹 , 在anim中定义指定标签的布局文件
  2. 在动态代码中加载补间动画
  3. 找到指定的View播放动画


    还有比我还细心的嘛

anim_test中的属性

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500"
    android:fillAfter="true"
    android:fromAlpha="1.0"
    android:repeatCount="infinite"
    android:toAlpha="0.1" />

动画属性的介绍,这里很重要

(4) 属性讲解

Animaton属性讲解(上诉的动画都有这些属性,是父类)

属性名称 作用 备注
duration 动画执行的时间 以毫秒为单位
fillEnabled 动画结束时,是否还原到开始动画前的状态 true或者false
fillBefore 与fillEnabled相同
fillAfter 动画结束时,是否将保持动画最后时的状态 true或者false
repeatMode 重复类型 reverse:表示倒序回访,restart:表示重新放一遍,这个属性必须与repeatCount联合使用,因为牵扯到重复,即重复播放时的播放类型。
repeatCount 动画重复的次数 infinite:表示无限循环
interpolator 设定的插值器,它主要用来为动画设置一些特殊的效果,比方说:加速运动、减速运动、动画结束的时候弹起等等。 下面会详细介绍

alpha属性详解

属性名称 作用 备注
fromAlpha 动画开始时的透明度 变化范围为0.0-1.0,0.0表示完全透明,1.0表示完全不透明
toAlpha 动画结束时的透明度 同上

rotate属性详解

属性名称 作用 备注
fromDegrees 动画开始时旋转的角度位置 float类型;正值代表顺时针方向度数,负值代码逆时针方向度数
toDegrees 动画结束时旋转到的角度位置 同上
pivotX 旋转点X轴坐标 排版问题,请看下面的备注
pivotY 旋转点Y轴坐标 同上

pivotX:float类型,可以是数值、百分数、百分数p三种样式,比如50、50%、50%p; 当为数值时,表示在当前View的左上角,即原点处加上50px,做为旋转点X坐标,如果是50%;表示在当前控件的左上角加上自己宽度的50%做为旋转点X坐标;如果是50%p,那么就是表示在当前控件的左上角加上父控件宽度的50%做为旋转点X坐标

canle属性详解

属性名称 作用 备注
fromXScale 起始的X方向上相对自身的缩放比例 型float,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍
toXScale 结尾的X方向上相对自身的缩放比例 类型float
fromYScale 起始的Y方向上相对自身的缩放比例 类型float
toYScale 结尾的Y方向上相对自身的缩放比例 类型float
pivotX 缩放起点X轴坐标 可以是数值、百分数、百分数p
pivotY 缩放起点Y轴坐标 取值及意义与pivotX一样

Translate属性详解

属性名称 作用 备注
fromXDelta 起始点X轴坐标 可以是数值、百分数、百分数p 三种样式
fromYDelta 起始点Y坐标 同上
toXDelta 结束点X坐标
toYDelta 结束点Y坐标

Set属性详解

他没有特殊的属性,因为他的作用只是将所有属性融合在一起

例如

<?xml version="1.0" encoding= "utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fillAfter="true">  
     
    <alpha  
        android:fromAlpha= "0.0"  
        android:toAlpha= "1.0"  
        android:duration= "3000" />  
    <scale  
        android:fromXScale= "0.0"  
        android:toXScale= "1.0"  
        android:fromYScale= "0.0"  
        android:toYScale= "1.0"  
        android:pivotX= "50%"  
        android:pivotY= "50%"  
        android:duration= "3000" />  
    <rotate  
        android:fromDegrees= "0"  
        android:toDegrees= "720"  
        android:pivotX= "50%"  
        android:pivotY= "50%"  
        android:duration= "3000"/>  
     <translate  
        android:startOffset= "3000"  
        android:fromXDelta= "0"  
        android:fromYDelta= "0"  
        android:toXDelta= "85"  
        android:toYDelta= "0"  
        android:duration= "1000" />  
    <alpha  
        android:startOffset= "4000"  
        android:fromAlpha= "1.0"  
        android:toAlpha= "0.0"  
        android:duration= "1000" />  
  
</set>

interpolator插值器

这篇文章对interpolator,讲解的比较深入

interpolaotor定义了动画变化的速率,它允许基础动画(alpha, scale, translate, rotate)加速,减速,重复变化等等。在补间动画中,我们一般只定义关键帧(首帧和尾帧),然后由系统自动生成中间帧,生成中间帧的这个过程可以成为“插值”。插值器定义了动画变化的速率,提供不同的函数定义变化值相对于时间的变化规则,可以定义各种各样的非线性变化函数,比如加速、减速等。下面是几种常见的插值器:

Interpolator对象 功能作用 属性讲解
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator 先加速再减速
AccelerateInterpolator @android:anim/accelerate_interpolator 加速 android:factor 浮点值,加速速率,默认为1; android:tension浮点值,起始点后退的张力、拉力数,默认为2
AnticipateInterpolator @android:anim/anticipate_interpolator 先回退一小步然后加速前进
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator 先回退一小步然后加速前进,超出终点一小步后再回到终点 android:tension 同上; android:extraTension 浮点值,拉力的倍数,默认为1.5(2 * 1.5)
BounceInterpolator @android:anim/bounce_interpolator 最后阶段弹球效果
CycleInterpolator @android:anim/cycle_interpolator 周期运动 android:cycles整数值,循环的个数,默认为1
DecelerateInterpolator @android:anim/decelerate_interpolator 减速 android:factor 浮点值,减速的速率,默认为1
LinearInterpolator @android:anim/linear_interpolator 匀速
OvershootInterpolator @android:anim/overshoot_interpolator 快速到达终点并超出一小步最后回到终点 tension浮点值,超出终点后的张力、拉力,默认为2
插值器的使用
<?xml version="1.0" encoding="utf-8"?>  
<translate   
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/bounce_interpolator"   
    android:fromXDelta="0"  
    android:fromYDelta="0"  
    android:toXDelta="200"  
    android:toYDelta="300"  
    android:duration="5000">  
</translate> 
animation.setInterpolator(new OvershootInterpolator());

(5)代码中如何使用补间动画

Animation animation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);  
ivGirl.startAnimation(animation);  

3. 属性动画

推荐这文章,讲的真的挺好的

(1)定义

通过改变任何对象的属性,在属性改变的过程当中产生的动画 (3.0以后提出的)
比如:颜色 字体的颜色是红色 最后最后的颜色是绿色 (属性动画体现该变化效果) 更改控件的宽度高度等等,和补间动画相比他是改变了Object的属性,而补间动画不会改变View的属性

ValueAnimator


    private void init_ValueAnimator() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0,100);
        valueAnimator.setDuration(200);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float) animation.getAnimatedValue();
                img.setTranslationX(value);
            }
        });
        valueAnimator.start();
    }

ObjectAnimator

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

推荐阅读更多精彩内容