Android动画的灵魂舞曲(二)

视图动画(View Animation)

视图动画中有两个类型:

1、渐变动画(Tween animation)
2、帧动画(Frame animation)

1、渐变动画(Tween animation)实现

通过创建一个动画来对一个图像或视图执行一系列的转换。如旋转,渐变,移动和拉伸。

先来看看一些xml属性的解释:

<set>
包裹其他动画元素(<alpha>, <scale>, <translate>, <rotate>)或其他<set>元素,java代码中为AnimationSet。

attributes description
android:interpolator: 插值器
android:shareInterpolator boolean值,为true的时候将同一个插值器共享到每个子元素中

<alpha>
一个淡入淡出的动画,java代码中是AlphaAnimation。

attributes description
android:fromAlpha float型,起点的透明度,从0.0-1.0
android:toAlpha float型,终点的透明度,从0.0-1.0

<scale>
一个缩放动画,java代码中是ScaleAnimation。

attributes description
android:fromXScale float,动画开始时基于原图像X轴方向的比例,1.0是没有变化,0就是无
android:toXScale float,动画结束时基于原图像X轴方向的比例,1.0是没有变化,0就是无
android:fromYScale float,动画开始时基于原图像Y轴方向的比例,1.0是没有变化,0就是无
android:toYScale float,动画结束时基于原图像Y轴方向的比例,1.0是没有变化,0就是无
android:pivotX 动画的起点X轴位置,有三种类型,基于像素大小,基于自身大小,基于父容器大小。(基于控件左上角为原点,50、50%、50%p-分别指的是坐标50px,视图X轴方向长度的一半,父布局的一半)
android:pivotY 动画的起点Y轴位置,与pivotX类型一致,换成Y轴方向

<translate>
一个位移动画,java代码中是TranslateAnimation。

attributes description
android:fromXDelta 动画X轴开始的起点,有三种类型,基于像素大小,基于自身大小,基于父容器大小。(基于控件左上角为原点,50、50%、50%p-分别指的是坐标50px,视图X轴方向长度的一半,父布局的一半)
android:toXDelta 动画X轴结束的起点,类型与上诉一致
android:fromYDelta 动画Y轴开始的起点
android:toYDelta 动画Y轴结束的起点

<rotate>
一个旋转动画,java代码中是RotateAnimation。计算旋转量,toDegrees -fromDegrees的角度就是旋转量(负数是逆时针,正数是顺时针)。0度是手机的竖直方向。

attributes description
android:fromDegrees float,开始旋转的角度(负数是逆时针,正数是顺时针)
android:toDegrees float,结束旋转的角度,同上
android:pivotX 旋转的点的X轴坐标(基于控件左上角为原点,50、50%、50%p-分别指的是坐标50px,视图X轴方向长度的一半,父布局的一半)
android:pivotY 旋转的点的Y轴坐标

以上的xml在对应的对象中都有相应的getter和setter方法来获取属性和设置属性。

xml实现

大概了解了上面的属性后,我们要开始来点实战来实现这些个属性。

视图动画文件

xml配置文件:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false"
    android:duration="5000">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%" />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="500"
        android:toYDelta="500" />
    <!-- 0度是竖直状态 -->
    <rotate
        android:fromDegrees="0"
        android:toDegrees="270"
        android:pivotX="50%" 
       android:pivotY="50%"/>
</set>

java代码:

AnimationSet animSet = (AnimationSet) AnimationUtils.loadAnimation(context, R.anim.anim_set);
moveBtn.startAnimation(animSet);

只需要通过以上步骤我们就能够实现压缩动画了。在这里解释下对于setAnimation()和startAnimation()的区别,如下图:设置下一条要播放的动画,若是需要立即播放动画,使用startAnimation()。而setAnimation()这种方法提供了允许细粒度的控制开始时间和无效,但是必须确保1)动画有一组开始时间,和2)视图的父(控制动画在儿童)将动画应该开始时失效。该方法的是需要一定的条件才能触发的。

谷歌官方文档setAnimation()说明.png

java代码实现:

我先放几张图,让大家了解相关的类:


Paste_Image.png

AlphaAnimation构造函数

AnimationSet构造函数

RotateAnimation构造函数

ScaleAnimation构造函数

TranslateAnimation构造函数

其实这几种动画的构造函数都是需要在实例化对象的将值传递进去的。而后在实例化对象后,直接让视图调用startAnimation()即可。

translate animation
TranslateAnimation
rotate animation
RotateAnimation
scale animation
ScaleAnimation
alpha animation
device-2016-08-31-215431.gif
animation-set
Animation-set

2、帧动画(Frame animation)实现

将图片像电影一样按顺序播放。

<animation-list>
该标签必须是根标签,包裹<item>

attributes description
android:oneshot boolean,是否只播放一次,false-否,true-只播放一次

<item>
一个动画的单帧,必须是<animation-list>的子元素

attributes description
android:drawable int,图片资源
android:duration Integer,动画播放时间

xml实现

帧动画的文件放在/res/drawable中。


animation-list文件
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/dog"
        android:duration="500" />
    <item
        android:drawable="@drawable/cat_dog"
        android:duration="500" />
</animation-list>

java代码:

Drawable drawable = context.getDrawable(R.drawable.list_anim);
imageView.setBackground(drawable);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
animationDrawable.start();

java代码实现

AnimationDrawable animDrawable = new AnimationDrawable();
animDrawable.addFrame(getDrawable(R.drawable.cat_dog), 200);
animDrawable.addFrame(getDrawable(R.drawable.dog), 200);
imageView.setBackground(animDrawable);
animDrawable.start();
animation-list
Animation-list

以上就是视图动画的学习总结,总结出来可能有遗漏或者错误,欢迎指正~
个人总结。转载请注明出处~http://www.jianshu.com/p/78f5987d01b6

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

推荐阅读更多精彩内容