Android 视图动画
一、视图动画标签
0.概述
视图动画有5中类型组成:
alpha:渐变透明度
scale:渐变尺寸伸缩
translate:画面变换位置移动
rotate:画面转移旋转移动
set:定义动画集
1.scale标签
scale_anim.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000"> //动画持续时间 <scale android:fromxscale="0.1" //初始x轴的缩放 android:fromyscale="0.1" //初始y轴的缩放 android:toxscale="1.4" //目标x轴的缩放 android:toyscale="1.4" //目标y轴的缩放 android:pivotx="150" //以控件的位置原点坐标,动画开始的起始位置x轴坐标 android:pivoty="150"/> //以控件的位置原点坐标,动画开始的起始位置y轴坐标 </set>
pivotx有三种数值:
150
直接数字,则是以控件为原点坐标的xy的坐标值(150,150),以目标控件为原点
150%
百分比的,是以控件为原点坐标的,为控件的宽度的150%的坐标,150%那就是控件宽度的150%
150%p
上面同理,但是以父控件的150%
java代码
startanimbtn.setonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { //装载动画 r.anim.scale_anim 为动画位置 animation scaleanimation=animationutils.loadanimation(mcontext,r.anim.scale_anim); //启动动画 scaletv.startanimation(scaleanimation); } });
效果
2.共同属性
所有动画都继承自animation类,所以有一些共同的属性。
android:duration="3000" //动画持续时间,毫秒单位 android:fillafter="true" //true动画结束,保持控件结束时的状态 android:fillbefore="true"//true动画结束,保持控件最初始状态 android:repeatcount="3" //动画重复次数,infinite表示无限循环 android:repeatmode="restart" //重复的类型,restart表示从头开始,reverse表示倒序回放 android:interpolator="@android:interpolator/accelerate_cubic" //插值器,控制速度等
看看回放和倒序回放
倒序回放:
android:repeatcount="3" android:repeatmode="reverse"
回放:
android:repeatcount="3" android:repeatmode="restart"
3.alpha标签
<alpha android:duration="3000" //持续时间 android:fromalpha="0.1" //初始透明度 android:toalpha="1"/> //最大透明度 数值在0.0~1.0之间
效果:
4.rotate标签
<alpha android:fromalpha="0.01" //初始角度 android:toalpha="1"/> //旋转角度 取值范围可以为负值,为逆时针,正值为顺时针
效果:
5.translate标签
<translate android:fromxdelta="50" //以控件为原坐标,x轴加50 为起始x轴 android:fromydelta="50" //以控件为原坐标,y轴加50 为起始y轴 android:toxdelta="400" //目标x轴 android:toydelta="400" /> //目标y轴
效果:
7.set标签
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="8000" android:fillafter="false" android:fillbefore="true"> <scale android:fromxscale="0.1" android:fromyscale="0.1" android:pivotx="150" android:pivoty="150" android:toxscale="1.4" android:toyscale="1.4" /> <alpha android:fromalpha="0.5" android:toalpha="1"/> <rotate android:fromdegrees="0.0" android:todegrees="360"/> <translate android:fromxdelta="50" android:fromydelta="50" android:toxdelta="300" android:toydelta="300" /> </set>
效果:
二、视图动画代码实现
0.概述
这些标签,都对应一个类,但他们都是派生自animation
类。
scale | scaleanimation |
---|---|
alpha | alphaanimation |
rotate | rotateanimation |
translate | translateanimation |
set | aetanimation |
1.scaleanimation
四个构造方法来加载scale动画
scaleanimation(context context, attributeset attrs) scaleanimation(float fromx, float tox, float fromy, float toy) scaleanimation(float fromx, float tox, float fromy, float toy, float pivotx, float pivoty) scaleanimation(float fromx, float tox, float fromy, float toy, int pivotxtype, float pivotxvalue, int pivotytype, float pivotyvalue)
scaleanimation(float fromx
, //初始x轴的缩放
float tox
, //目标缩放
float fromy
, //初始y轴缩放
float toy
, //目标y轴缩放
int pivotxtype, float pivotxvalue
, //以原坐标为原点,x轴的起始点
int pivotytype, float pivotyvalue
) //以原坐标为原点,y轴的起始点
pivotxtype
的类型有:
relative_to_self
百分比,相对自身百分比 50%
relative_to_parent
百分比,相对父控件百分比 50%p
absolute
具体数值 比如 50
2.alphaanimation
alphaanimation(context context, attributeset attrs) alphaanimation(float fromalpha, float toalpha)
alphaanimation(float fromalpha
, //初始透明度
float toalpha
) //目标透明度
3.rotateanimation
rotateanimation(context context, attributeset attrs) rotateanimation(float fromdegrees, float todegrees) rotateanimation(float fromdegrees, float todegrees, float pivotx, float pivoty) rotateanimation(float fromdegrees, float todegrees, int pivotxtype, float pivotxvalue, int pivotytype, float pivotyvalue)
rotateanimation(float fromdegrees
, //初始角度
float todegrees
, //目标角度
int pivotxtype, float pivotxvalue,
int pivotytype, float pivotyvalue)
4.translateanimation
translateanimation(context context, attributeset attrs) translateanimation(float fromxdelta, float toxdelta, float fromydelta, float toydelta) translateanimation(int fromxtype, float fromxvalue, int toxtype, float toxvalue, int fromytype, float fromyvalue, int toytype, float toyvalue)
translateanimation(
int fromxtype, float fromxvalue, //起始x轴坐标
int toxtype, float toxvalue, //目标x轴坐标
int fromytype, float fromyvalue, //起始y轴坐标
int toytype, float toyvalue) //目标y轴坐标
5.animationset
animationset(context context, attributeset attrs) animationset(boolean shareinterpolator) //true 共用一个插值器,false 各自定义插值器
都是继承自animation,有这些共同属性
animationset1.setduration(3000); //动画时长 animationset1.scalecurrentduration(4.0f); //当前动画时间 animationset1.setfillafter(true); //true动画结束,保持控件结束时的状态 animationset1.setfillbefore(true); //true动画结束,保持控件最初始状态 animationset1.setrepeatmode(animation.restart); //循环模式 animationset1.setstartoffset(1000); //在什么时间停止动画 animationset1.setstarttime(500); //在什么时间开始动画 animationset1.setrepeatcount(5); //循环次数 animationset1.setfillenabled(true); //true动画结束,保持控件结束时的状态
装载所有动画效果
scaleanimation scaleanimation1 = new scaleanimation( 0.0f, 1.4f, 0.0f, 1.4f, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f); alphaanimation alphaanimation1=new alphaanimation(0.1f,0.5f); rotateanimation rotateanimation1=new rotateanimation(0.1f,0.1f); translateanimation translateanimation1=new translateanimation( animation.absolute, 50, animation.absolute, 50); animationset animationset1=new animationset(true); //装载 animationset1.addanimation(scaleanimation1); animationset1.addanimation(alphaanimation1); animationset1.addanimation(rotateanimation1); animationset1.addanimation(translateanimation1); animationset1.setduration(3000); animationset1.scalecurrentduration(4.0f); animationset1.setfillafter(true); animationset1.setfillbefore(true); animationset1.setrepeatmode(animation.restart); animationset1.setstartoffset(1000); animationset1.setstarttime(500); animationset1.setrepeatcount(5); animationset1.setfillenabled(true);
6.animation
animationset1.cancel(); //取消动画 animationset1.reset(); //将控件重置到初始化状态 animationset1.setanimationlistener(animationlistener listener); //设置监听
监听,利用监听可以实现动画的连续效果,比如,先实现缩放,再实现位移
animationset1.setanimationlistener(new animation.animationlistener() { @override public void onanimationstart(animation animation) { //动画开始 } @override public void onanimationend(animation animation) { //动画结束 } @override public void onanimationrepeat(animation animation) { //动画结束 } });
三、基础插值器
0.概述
控制动画变化速率的值,就叫插值器,也叫加速器。有interpolator类来决定。
使用方法
在xml中使用:android:interpolator="@android:anim/accelerate_interpolator"
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:duration="3000" android:fillafter="false" android:fillbefore="true"> </set>
在java代码中使用;animationset1.setinterpolator(new accelerateinterpolator());
1.系统插值器
系统已经定义了一些常见的插值器
acceleratedecelerateinterpolator | @android:anim/accelerate_decelerate_interpolator | 先加速,后减速 |
---|---|---|
accelerateinterpolator | @android:anim/accelerate_interpolator | 开始慢,后一直加速 |
decelerateinterpolator | @android:anim/decelerate_interpolator | 开始一瞬间加到最大,后慢慢减慢 |
linearinterpolator | @android:anim/linear_interpolator | 匀速加速器 |
bounceinterpolator | @android:anim/bounce_interpolator | 模拟*落体回弹的效果 |
anticipateinterpolator | @android:anim/anticipate_interpolator | 反方向效果一段时间,再执行正常动画,如,旋转。先反旋转一段距离 |
overshootinterpolator | @android:anim/overshoot_interpolator | 动画结束之后,再执行一段时间 |
anticipateovershootinterpolator | @android:anim/anticipate_overshoot_interpolator | 开始时,反方向效果一段时间,结束时,超过效果时间一段时间 |
cycleinterpolator(1) | @android:anim/cycle_interpolator | 动画特定循环播放的次数,速率沿正弦曲线变化 |
四、动画示例
1.镜头由远及近
控件
<imageview android:id="@+id/img" android:src="@drawable/ali" android:layout_width="match_parent" android:layout_height="match_parent"/>
java代码
scaleanimation scaleanimation=new scaleanimation( 0.5f, 1.2f, 0.5f, 1.2f, animation.relative_to_self,0.5f, animation.relative_to_self,0.5f); scaleanimation.setfillafter(true); scaleanimation.setinterpolator(new accelerateinterpolator()); scaleanimation.setduration(6000); imgiv.startanimation(scaleanimation);
效果:
2.加载框效果
<imageview android:id="@+id/load" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margintop="30dp" android:src="@drawable/load" />
rotateanimation rotateanimation=new rotateanimation( 0, 360, animation.relative_to_self,0.5f, animation.relative_to_self,0.5f); rotateanimation.setfillafter(true); rotateanimation.setrepeatcount(animation.infinite); //无限循环 rotateanimation.setinterpolator(new linearinterpolator()); //匀速 rotateanimation.setduration(2000); loadiv.startanimation(rotateanimation);
效果:
编程中我们会遇到多少挫折?表放弃,沙漠尽头必是绿洲。
上一篇: JS基础知识理解之一: 原型链
下一篇: 进程间通信