概述
可译为视图动画,分为
- 缩放动画
- 平移动画
- 渐变动画
- 旋转动画
Android系统中定义了一个抽象类Animation来定义这种视图动画,它的具体子类如下表:
动画名称 | 对应的子类 | xml中标签 | 描述 |
---|---|---|---|
缩放动画 | ScaleAnimation | < scale /> | S |
平移动画 | TranslateAnimaiton | < translate /> | T |
渐变动画 | AlphaAnimation | < alpha /> | A |
旋转动画 | RoateAnimation | < roate /> | R |
动画集合 | AnimationSet | < set /> | 是用来存放上面四种动画的集合,容器的概念而已 |
这类动画也被称作是补间动画(Tween Animation),取他们首字母这样样记忆呢 STAR 动画如何?(哈哈别闹,我自称), “明星” 动画是Android提供最早的动画框架,只能这几种效果或者他们的组合效果(明星独唱或者组合喽),使用起来也是非常方便简单,可以代码实现也可以在XML中定义使用。
那么这些视图动画有哪些通用属性,这里列举了父类Animaiton常用属性:
xml中属性 | 对应的方法 | 描述 |
---|---|---|
android:duration | setDuration(long) | 指定动画持续时间,单位毫秒 |
android:fillAfter | setFillAfter(boolean) | 设置为true时,指动画结束时界面会停留在动画播放完时的界面,默认false |
android:fillBefore | setFillBefore(boolean) | 指动画结束时画面停留在此动画的第一帧 |
android:fillEnabled | setFillEnabled(boolean) | 该方法用于使能填充效果。当该方法设置为true时,将执行setFillBefore和setFillAfter方法,否则将忽略setFillBefore和setFillAfter方法 |
android:interpolator | setInterpolator(Interpolator) | 指定动画的插值器类型,比如常见类型有 accelerate_interpolator 加速-动画插入器; decelerate_interpolator 减速- 动画插入器; accelerate_decelerate_interpolator 加速-减速 动画插入器 |
android:repeatCount | setRepeatCount(int) | 指定动画的重复次数 |
android:repeatMode | setRepeatMode(int) | 定义动画的重复模式,该类中指定了两个常量值 RESTART 值为1,表示重新开始 REVERSE 值为2,表示play backward |
android:startOffset | setStartOffset(long) | 动画之间的时间间隔,从上次动画停多少时间开始执行下个动画 |
android:zAdjustment | setZAdjustment(int) | 定义动画的Z Order的改变,有三个常量值: ZORDER_NORMAL 值为0,保持Z Order不变 ZORDER_TOP 值为1,保持在最上层 ZORDER_BOTTOM值为-1,保持在最下层 |
使用
文件存放位置:
res/anim/filename.xml
资源引用:
In Java:
R.anim.filename
In XML:@[package:]anim/filename
XML中实现通常做法是:
- 对应目录下定义一个动画文件(在Android studio中直接new --> android resources file,然后选择对应的root标签和目录即可,会自动创建anim文件夹)
- 在资源文件中添加标签等具体的动画属性值
- 在代码中使用AnimationUtils来加载定义好的动画文件,会返回一个Animation对象,然后将其附在view控件上即可
Animation animation = AnimationUtils.loadAnimation(this, R.anim.scal);
imageView.startAnimation(animation);
代码实现通常做法:
- 创建一个AnimationSet对象,并设置相关属性,比如插值器等,后续会具体讲解
- 创建你想要的某一种或多种动画对象,包括动画执行时间等
- 然后将这些对象添加到这个AnimationSet对象中
- 使用控件对象开始执行这个动画集合
AnimationSet animationSet = new AnimationSet(true);
比如创建一个缩放动画ScaleAnimation scale;
animationSet.addAnimation(scale);
imageView.startAnimation(animationSet);
AnimationSet
这个类对应的标签是< set/>,相当于一个容器,来存放其他四种动画或者是子容器的(动画集合嵌套动画集合)
<set xmlns:android="http://schemas.android.com/apk/res/android"
// 指定一个差值器,如果是调用系统内置差值器,包名即为android
android:interpolator="@[package:]anim/interpolator_resource"
// **独有属性** 如果是true 表示它的所有子元素标签都共用这个差值器
android:shareInterpolator=["true" | "false"] >
</set>
ScaleAnimation
<scale
//动画起始时x轴伸缩尺寸,取值float型,1.0表示不变
android:fromXScale="float"
//动画结束时x轴伸缩尺寸,取值float型,1.0表示不变
android:toXScale="float"
//动画起始时Y轴伸缩尺寸,取值float型,1.0表示不变
android:fromYScale="float"
//动画结束时Y轴伸缩尺寸,取值float型,1.0表示不变
android:toYScale="float"
//缩放的中心点,x轴点位置
android:pivotX="float"
//缩放的中心点,Y轴点位置
android:pivotY="float" />
值得注意的是,这里的缩放的轴心位置pivotX pivotY在xml中依然有三种形式的取值:
- 50% 自身的百分比
- 50%p 父容器的百分比
- 50 具体的数值
它们都是相当于在view的(x,y)坐标上加上 轴点的值 确定的位置,比如android:pivotX="50%"
那么就表示这个轴点的x位置是 它自身的x坐标加上 它自身宽度的一半
DEMO
首先定义一个布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.smart.myapplication.animation.ViewAnimationAct">
<LinearLayout
android:layout_width="300dp"
android:background="#00ffff"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:layout_height="200dp">
<ImageView
android:id="@+id/imageView"
android:scaleType="center"
android:layout_gravity="center"
android:src="@drawable/girl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="@+id/start_anim"
android:layout_alignParentBottom="true"
android:text="缩放"
android:layout_width="wrap_content"
android:background="#2efe4f"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
/>
</RelativeLayout>
xml动画文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator">
<scale
android:duration="2000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale="1.5"
android:toYScale="1.5" />
</set>
然后在代码中使用这个动画文件:
public class ViewAnimationAct extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_animation);
imageView = (ImageView) findViewById(R.id.imageView);
final Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
findViewById(R.id.start_anim).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
imageView.startAnimation(animation);
}
});
}
}
直接看效果(录屏反应慢,实际动画时间就两秒)
TranslateAnimation
xml中标签中独有属性:
<translate
android:fromXDelta="float|percent" // 动画开始的点离当前View的 X坐标上的差值
android:toXDelta="float|percent" // 动画结束的点离当前View的 X坐标上的差值
android:fromYDelta="float|percent" // 动画开始的点离当前View的 Y坐标上的差值
android:toYDelta="float|percent" // 动画结束的点离当前View的 Y坐标上的差值
/>
这四个属性值支持三种形式的参数:
-
view自身宽或者高的百分比,范围是-100% -- 100%
- x方向的差值(xDelta)就是取得view自身的width 然后作以百分比作为差值
- y方向的差值(yDelta)就是取得view自身的height 然后作以百分比作为差值
-
view父View的宽或者高的百分比,范围是 -100%p -- 100%p
- x方向的差值(xDelta)就是取得view的父控件的width 然后作以百分比作为差值
- y方向的差值(yDelta)就是取得view的父控件的height 然后作以百分比作为差值
具体位置的像素值 比如 50
**都是以view的(x,y)坐标变换,相当于给他一个transitionX,transitionY
**
DEMO:
页面布局文件(后续的布局和activity中代码实现类似,不在贴出):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.smart.myapplication.animation.ViewAnimationAct">
<ImageView
android:id="@+id/imageView"
android:scaleType="center"
android:src="@drawable/girl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
对应的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:repeatCount="1"
android:repeatMode="reverse"
android:toXDelta="80%"
android:toYDelta="80%" />
</set>
对应的效果
AlphaAnimation
是一种改变透明度的动画,渐进渐出,默认的透明度都是1表示不透明。对应< alpha/>标签,两个独有属性:
<alpha
android:fromAlpha="float" // 从一个透明度
android:toAlpha="float" // 变化到另一个透明度
/>
这两个属性值的取值:透明度范围为0.0(完全不可见) --- 1.0(不透明)
DEMO
动画文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="2000"
android:fromAlpha="1.0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toAlpha="0" />
</set>
对应的效果:
RoateAnimation
旋转动画,给定一个轴心和旋转的角度,组成一个旋转的动画效果。对应的标签是< roate/>
<rotate
// 旋转的开始角度
android:fromDegrees="float"
// 旋转结束的角度
android:toDegrees="float"
// 旋转的轴心,x位置
android:pivotX="float"
// 旋转的轴心,y位置
android:pivotY="float" />
需要说明的是:
- 旋转的起始角度可以有正负,并且支持任意角度旋转,比如从0到720,那么会旋转两周
- privotX 和 privotY 和缩放动画轴心取值一样,也有三种形式,其实定义的就是圆心的位置
DEMO
动画文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator">
<rotate
android:duration="2000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
</set>
对应的效果
上述列举了每一种动画独有的属性,但是别忘了他们共有的属性定义,比如动画执行完停留的位置控制,重复播放动画,多个动画组合时提供不同的时间偏移等等