Animation
介绍
Animation是一个实现android UI界面动画效果的API,它提供了一系列的动画效果:旋转、缩放、淡入淡出等。
分类
- Tweened Animations:
- Alpha:淡入淡出
- Scale:缩放效果
- Rotate:旋转
- Translate:平移
- Frame-by-Frame Animations
类似于gif动画,可以创建一个Drawable序列,按照固定的间隔时间,循环显示drawable序列中的图片。
示例
Tweened Animations
- 创建一个AnimationSet对象
- 创建相应地Animation对象
- AlphaAnimation:淡入淡出
- TranslateAnimation:平移
- ScaleAnimation:缩放
- RotateAnimation:旋转
- 为新建的Animation设置属性
- 将Animation添加到AnimationSet对象中
- 使用控制对象执行AnimationSet
AlphaAnimation
//创建一个AnimationSet对象,参数为Boolean型,
//true表示使用Animation的interpolator,false则是使用自己的
AnimationSet animationSet = new AnimationSet(true);
//创建一个AlphaAnimation对象,参数从完全的透明度,到完全的不透明
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
//设置动画执行的时间
alphaAnimation.setDuration(500);
//将alphaAnimation对象添加到AnimationSet当中
animationSet.addAnimation(alphaAnimation);
//使用ImageView的startAnimation方法执行动画
image.startAnimation(animationSet);
TranslateAnimation
AnimationSet animationSet = new AnimationSet(true);
//参数1~2:x轴的开始位置
//参数3~4:y轴的开始位置
//参数5~6:x轴的结束位置
//参数7~8:x轴的结束位置
TranslateAnimation translateAnimation =new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0.5f);
translateAnimation.setDuration(1000);
animationSet.addAnimation(translateAnimation);
image.startAnimation(animationSet);
ScaleAnimation
AnimationSet animationSet = new AnimationSet(true);
//参数1:x轴的初始值
//参数2:x轴收缩后的值
//参数3:y轴的初始值
//参数4:y轴收缩后的值
//参数5:确定x轴坐标的类型
//参数6:x轴的值,0.5f表明是以自身这个控件的一半长度为x轴
//参数7:确定y轴坐标的类型
//参数8:y轴的值,0.5f表明是以自身这个控件的一半长度为x轴
ScaleAnimation scaleAnimation = new ScaleAnimation(0, 0.1f,0,0.1f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(1000);
animationSet.addAnimation(scaleAnimation);
image.startAnimation(animationSet);
RotateAnimation
AnimationSet animationSet = new AnimationSet(true);
//参数1:从哪个旋转角度开始
//参数2:转到什么角度
//后4个参数用于设置围绕着旋转的圆的圆心在哪里
//参数3:确定x轴坐标的类型,有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
//参数4:x轴的值,0.5f表明是以自身这个控件的一半长度为x轴
//参数5:确定y轴坐标的类型
//参数6:y轴的值,0.5f表明是以自身这个控件的一半长度为x轴
RotateAnimation rotateAnimation = new RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
rotateAnimation.setDuration(1000);
animationSet.addAnimation(rotateAnimation);
image.startAnimation(animationSet);
补充
在代码中实现Animations不麻烦,但当我们需要很多地方用相同的效果时,就显得麻烦了,且代码的可维护性不高。—->使用XML配置属性
1. 在res下新建anim文件夹
2. 创建相应的xml文件
<!-- alpha -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<!-- fromAlpha和toAlpha是起始透明度和结束时透明度 -->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="500"
android:duration="500"/>
</set>
<!--rotate-->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<!--
fromDegrees:开始的角度
toDegrees:结束的角度,+表示是正的
pivotX:用于设置旋转时的x轴坐标
例
1)当值为"50",表示使用绝对位置定位
2)当值为"50%",表示使用相对于控件本身定位
3)当值为"50%p",表示使用相对于控件的父控件定位
pivotY:用于设置旋转时的y轴坐标
-->
<rotate
android:fromDegrees="0"
android:toDegrees="+360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>
</set>
<!--scale-->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<!--
起始x轴坐标
止x轴坐标
始y轴坐标
止y轴坐标
轴的坐标
轴的坐标
-->
<scale
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>
</set>
<!--translate-->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<!--
始x轴坐标
止x轴坐标
始y轴坐标
止y轴坐标
-->
<translate
android:fromXDelta="0%"
android:toXDelta="100%"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="2000"/>
</set>
3.使用时,通过AnimationUtils加载xml文件,并生成Animation对象。因为Animation是AnimationSet的父类,向上转型,用Animation对象接收。
Animation animation = AnimationUtils.loadAnimation(Animation1Activity.this, R.anim.alpha);
// 启动动画
image.startAnimation(animation);
Tween Animation
常见属性
- setDuration(long durationMills):设置动画持续时间–>毫秒
- setFillAfter(Boolean fillAfter):设置动画执行后是否停止在结束时的状态
- setFillBefore(Boolean fillBefore):设置动画停止后是否返回动画开始时的状态
- setStartOffSet(long startOffSet):设置动画执行之前的等待时间
- setRepeatCount(int repeatCount):设置动画执行次数
AnimationSet
AnimationSet是Animation的子类,一个AnimationSet包含了一系列的Animation。针对AnimationSet设置的一些Animation的常见属性,例如startOffset和duration等,可以被包含在AnimationSet中的Animation集成。
AnimationSet animationSet = new AnimationSet(true);
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
RotateAnimation rotateAnimation = new RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
rotateAnimation.setDuration(1000);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(alphaAnimation);
image.startAnimation(animationSet);
Interpolator
定义了动画变化的速率,在Animations框架中,系统定义了几种常见的Interpolator
1. AccelerateDecelerateInterpolator:动画开始和结束时速度较慢,中间时速率较快
2. AccelerateInterpolator:动画开始时较慢,逐渐加速
3. CycleInterpolator:动画循环播放特定的次数,速率改变沿着正弦曲线
xml
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:cycles="7" />
4. DecelerateInterpolator:动画开始时较快,逐渐减速
5. LinearInterpolator:动画以均匀地速率改变
情况示例
1.如何设置
<set xmls:anroid="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"/>
2.一个set标签中包含多个动画,并且希望这些动画共享一个Interpolator
set标签中增加android:shareInterpolator=”true”
<set xmls:anroid="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true"/>
或者
AnimationSet animationSet = new AnimationSet(true);//true
animationSet.setInterpolator(new AccelerateInterpolator());
3.多个动画,且不共享一个Interpolator
set标签中增加android:shareInterpolator=”false”并且在每一个动画标签下加入android:interpolator
或者
AnimationSet animationSet = new AnimationSet(false);//false
alphaAnimation.setInterpolator(new AccelerateInterpolator());
Frame-By-Frame
1.定义图片集
anim.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/a_01" android:duration="50"/>
<item android:drawable="@drawable/a_02" android:duration="50"/>
<item android:drawable="@drawable/a_03" android:duration="50"/>
<item android:drawable="@drawable/a_04" android:duration="50"/>
<item android:drawable="@drawable/a_05" android:duration="50"/>
<item android:drawable="@drawable/a_06" android:duration="50"/>
</animation-list>
2.调用
imageView.setBackgroundResource(R.anim.anim);
AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getBackground();
animationDrawable.start();
LayoutAnimationsController
用来实现多个控件按顺序一个个显示,可以为一个layout里面的控件或者是ViewGroup里面的控件设置统一的动画效果。
示例
创建一个listview加载动画
- xml方式
1.设置动画效果list_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000"/>
</set>
2.设置LayoutAnimation
<layoutAnimation
xmlns:android="http://schemas.android.com/apk/res/android"
<!-- 动画间隔时间 -->
android:delay="0.5"
<!-- 动画执行顺序 normal random(随机) reverse(反向)-->
android:animationOrder="normal"
android:animation="@anim/list_anim"/>
3.在布局文件中加入layoutAnimation
<ListView
android:id="@id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layoutAnimation="@anim/list_anim_layout"/>
- 代码方式
- 创建动画xml
- 创建一个Animation对象,装载动画xml文件
- 创建LayoutAnimationController
java
LayoutAnimationController controller = new LayoutAnimationController(animation);
- 设置显示顺序及延迟时间
java
controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
controller.setDelay(0.5f);
- 为listView设置LayoutAnimationController属性
java
listView.setLayoutAnimation(controller);
AnimationListener
故名思议,是一个动画监听器,该监听器在动画执行的各个阶段会得到通知,回调相应的方法
- onAnimationEnd
- onAnimationRepeat:当动画重复时调用
- onAnimationStart
步骤
1.创建一个listener类,集成AnimationListener
2.创建动画animation
3.为动画绑定监听器animation.setAnimationListener(AnimationListener al);
4.开始动画