本人水平有限,文章中如果出现什么不正确或者模糊的地方,还请各位小伙伴留下评论,多多指教 : )
目录
【动画概述】
动画种类
- Tween animation 变换动画
- Frame animation 帧动画
- Layout animation 布局动画
- Property animation 属性动画
动画的公共属性
(1)Duration:动画持续时间(单位:毫秒)
(2)fillAfter:设置为true,动画转化在动画结束后被应用
(3)fillBefore:设置为true,动画转化在动画开始前被应用
(4)interpolator:动画插入器(加速、减速插入器)
(5)repeatCount:动画重复次数
(6)repeatMode:顺序重复/倒序重复
(7)startOffset:动画之间的时间间隔
Animation的两种实现方式
(1)配置文件(res/admin)——alpha,scale,translate,rotate(适用于动画形式和参数固定)。实现方式如下:
//通过一个动画工具类去加载xml文件
Animation scale =AnimationUtils.loadAnimation(Activity.this,R.anim.alpha);
//开始动画
view.startAnimation(scale);
然后还要在res/anim/alpha.xml里面写上
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="1000"
android:fromAlpha="0.1"
android:toAlpha="1.0"/>
</set>
(2)Java代码实现——AlphaAnimation,ScaleAnimation,TranslateAnimation,RotateAnimation(偏向动画的动态实现)。实现方式如下:
//透明度从%10到%100
Animation alpha = new AlphaAnimation(0.1f,1.0f);
//设置动画的时间为1秒
alpha.setDuration(1000);
//开始播放
view.startAnimation(alpha);
【变换动画的重要属性】
Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.alpha);
img.startAnimation(animation);
这是使用配置文件设置动画的模板代码,加载不同的xml文件,就能实现相应的效果
AlphaAnimation (透明度动画)
(1)fromAlpha:动画起始透明度
(2)toAlpha:动画终止时透明度
0.0表示完全透明 | 1.0表示完全不透明
xml栗子:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="1000"
android:fromAlpha="0.1"
android:toAlpha="1.0"/>
</set>
java栗子:
AlphaAnimation alpha=new AlphaAnimation(0,1); //由透明到不透明
alpha.setDuration(1000);
view.startAnimation(alpha);
ScaleAnimation(缩放动画)
(1)fromX,toX 分别是起始时和结束时X坐标上的伸缩尺寸。
(2)fromY,toY分别是起始和结束时y坐标上的伸缩尺寸。
(3)pivotX,pivoY分别为伸缩动画相对于x,y坐标开始的位置。(可以理解为缩放中心点)
xml栗子
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="2000"
android:fillAfter="false"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toXScale="1.0"
android:toYScale="1.0"/>
</set>
java栗子:
//参数1:x轴的初始值
//参数2:x收缩后的值
//参数3:y轴的初始值
//参数4:y轴收缩后的值
//参数5:确定x轴坐标的类型
//参数6:x轴的值,0.5f表示以自身这个控件的一半长度为x轴
//参数7:确定y轴坐标的类型
//参数8:y轴的值,0.5f表示以自身这个控件的一半长度为y轴
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);
view.startAnimation(scaleAnimation);
TranslateAnimation(位移动画)
(1)fromXDelta,fromYdelta 分别是起始时的X坐标和Y坐标。
(2)ftoXDelta,toYdelta,分别是结束时X坐标和Y坐标。
xml栗子:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="100"/>
</set>
java栗子:
//参数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);
view.startAnimation(translateAnimation);
RotateAnimation(旋转动画)
(1)fromDegrees起始角度。
(2)toDegrees 终止角度
(3)pivotX,pivotY,分别为旋转动画相对于x,y的坐标开始位置。
xml栗子:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="2000"
android:fromDegrees="0"
android:toDegrees="360"
android:fillAfter="false"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotY="50%"
android:pivotX="50%"/>
</set>
java栗子:
//参数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);
view.startAnimation(rotateAnimation);
以上的四种基本变换动画比较简单,但是还是希望小伙伴们自己亲手码一码。
【组合动画的使用】
本节内容将刚才讲解的几种基础动画进行组合,制作出更加流畅的动画
栗子一:
分别播放两个动画A和B,先播放A,设置A的AnimationListner。当onAnimationEnd触发(即A播放完毕)时,开始播放B
思路:首先加载A的动画,然后让view执行A动画,然后加载B动画,将B动画的执行逻辑放在A的动画监听事件当中。看下代码就能理解
//加载A动画
Animation animation1=AnimationUtils.loadAnimation(this,R.anim.translate);
img.startAnimation(animation1);
//加载B动画
final Animation animation2=AnimationUtils.loadAnimation(this,R.anim.rotate);
//设置动画监听事件
animation2.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
img.startAnimation(animation2);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
栗子二:
写一个动画集AnimationSet(可以存储多个动画),在其中定义动画A和B,为动画B设置startOffset,其值就是前一个动画播放所需要的时间。
java代码:
Animation group_animation=AnimationUtils.loadAnimation(this,R.anim.group_anim);
img.startAnimation(group_animation);
动画配置文件:group_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="2000"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<alpha
android:duration="2000"
android:fillAfter="false"
android:fromAlpha="1.0"
android:startOffset="2000"
android:toAlpha="0.0" />
</set>
也可以完成栗子一的效果.
栗子三:
利用Animation的setRepeatCount、setRepeatMode来实现循环动画
代码如下:
Animation alphaAnimation=new AlphaAnimation(0.1f,1.0f);
alphaAnimation.setDuration(100);
alphaAnimation.setRepeatCount(10);
//设置重复模式
alphaAnimation.setRepeatMode(Animation.REVERSE);
img.startAnimation(alphaAnimation);
栗子四:
使用overridePendingTransition方法,完成Activity切换动画。
该方法传递2个参数:
[第二个activity进入动画] [第一个activity退出的动画]
代码如下:
Intent intent=new Intent(MainActivity.this,SecondActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.zoom_in,R.anim.zoom_out);
动画配置文件:zoom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="1000"
android:pivotX="50%"
android:pivotY="50%"
android:fromYScale="0.1"
android:fromXScale="0.1"
android:toYScale="1.0"
android:toXScale="1.0"/>
<alpha
android:duration="1000"
android:fromAlpha="0.5"
android:toAlpha="1.0"/>
</set>
动画配置文件:zoom_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="1000"
android:pivotX="50%"
android:pivotY="50%"
android:fromYScale="0.1"
android:fromXScale="0.1"
android:toYScale="1.0"
android:toXScale="1.0"/>
<alpha
android:duration="1000"
android:fromAlpha="0.5"
android:toAlpha="1.0"/>
</set>