思维导图:
动画两大类
View Animation视图动画
① 补间动画 Tween Animation
1、什么是补间动画
Tween(补间)动画可以在一个视图容器内执行一系列简单变换(位置、大小、旋转、透明度)。譬如,如果你有一个TextView对象,您可以移动、旋转、缩放、透明度设置其文本,当然,如果它有一个背景图像,背景图像会随着文本变化。
2、补间动画种类
java类名 | xml关键字 | 描述信息 |
---|---|---|
AlphaAnimation | <alpha> 放置在res/anim/目录下 | 渐变透明度动画效果 |
RotateAnimation | <rotate> 放置在res/anim/目录下 | 画面转移旋转动画效果 |
ScaleAnimation | <scale> 放置在res/anim/目录下 | 渐变尺寸伸缩动画效果 |
TranslateAnimation | <translate> 放置在res/anim/目录下 | 画面转换位置移动动画效果 |
AnimationSet | <set> 放置在res/anim/目录下 | 一个持有其它动画元素alpha、scale、translate、rotate或者其它set元素的容器 |
3、属性详解
3.1Animation属性
xml属性 | java方法 | 解释 |
---|---|---|
android:detachWallpaper | setDetachWallpaper(boolean) | 是否在壁纸上运行 |
android:duration | setDuration(long) | 动画持续时间,毫秒为单位 |
android:fillAfter | setFillAfter(boolean) | 控件动画结束时是否保持动画最后的状态 |
android:fillBefore | setFillBefore(boolean) | 控件动画结束时是否还原到开始动画前的状态 |
android:fillEnabled | setFillEnabled(boolean) | 与android:fillBefore效果相同 |
android:interpolator | setInterpolator(Interpolator) | 设定插值器(指定的动画效果,譬如回弹等) |
android:repeatCount | setRepeatCount(int) | 重复次数 |
android:repeatMode | setRepeatMode(int) | 重复类型有两个值,reverse表示倒序回放,restart表示从头播放 |
android:startOffset | setStartOffset(long) | 调用start函数之后等待开始运行的时间,单位为毫秒 |
android:zAdjustment | setZAdjustment(int) | 表示被设置动画的内容运行时在Z轴上的位置(top/bottom/normal),默认为normal |
3.2ALpha属性详解
xml属性 | java方法 | 解释 |
---|---|---|
android:fromAlpha | AlphaAnimation(float fromAlpha, …) | 动画开始的透明度(0.0到1.0,0.0是全透明,1.0是不透明) |
android:toAlpha | AlphaAnimation(…, float toAlpha) | 动画结束的透明度,同上 |
3.3Rotate属性详解
xml属性 | java方法 | 解释 |
---|---|---|
android:fromDegrees | RotateAnimation(float fromDegrees, …) | 旋转开始角度,正代表顺时针度数,负代表逆时针度数 |
android:toDegrees | RotateAnimation(…, float toDegrees, …) | 旋转结束角度,正代表顺时针度数,负代表逆时针度数 |
android:pivotX | RotateAnimation(…, float pivotX, …) | 缩放起点X坐标(数值、百分数、百分数p,譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点) |
android:pivotY | RotateAnimation(…, float pivotY) | 缩放起点Y坐标,同上规律 |
3.4Scale属性详解
xml属性 | java方法 | 解释 |
---|---|---|
android:fromXScale | ScaleAnimation(float fromX, …) | 初始X轴缩放比例,1.0表示无变化 |
android:toXScale | ScaleAnimation(…, float toX, …) | 结束X轴缩放比例 |
android:fromYScale | ScaleAnimation(…, float fromY, …) | 初始Y轴缩放比例 |
android:toYScale | ScaleAnimation(…, float toY, …) | 结束Y轴缩放比例 |
android:pivotX | ScaleAnimation(…, float pivotX, …) | 缩放起点X轴坐标(数值、百分数、百分数p,譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点) |
android:pivotY | ScaleAnimation(…, float pivotY) | 缩放起点Y轴坐标,同上规律 |
3.5 Translate 属性详解
xml属性 | java方法 | 解释 |
---|---|---|
android:fromXDelta | TranslateAnimation(float fromXDelta, …) | 起始点X轴坐标(数值、百分数、百分数p,譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点) |
android:fromYDelta | TranslateAnimation(…, float fromYDelta, …) | 起始点Y轴从标,同上规律 |
android:toXDelta | TranslateAnimation(…, float toXDelta, …) | 结束点X轴坐标,同上规律 |
android:toYDelta | TranslateAnimation(…, float toYDelta) | 结束点Y轴坐标,同上规律 |
Animation类的方法 | 解释 |
---|---|
reset() | 重置Animation的初始化 |
cancel() | 取消Animation动画 |
start() | 开始Animation动画 |
setAnimationListener(AnimationListener listener) | 给当前Animation设置动画监听 |
hasStarted() | 判断当前Animation是否开始 |
hasEnded() | 判断当前Animation是否结束 |
View类的常用动画操作方法 | 解释 |
---|---|
startAnimation(Animation animation) | 对当前View开始设置的Animation动画 |
clearAnimation() | 取消当View在执行的Animation动画 |
案列:
anim文件夹下
iv_alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0"
android:toAlpha="0.3"
android:duration="3000"
android:fillAfter="true"
>
</alpha>
iv_rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="720"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000"
android:fillAfter="true"
>
</rotate>
iv_scale.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="100%"
android:toXScale="20%"
android:fromYScale="100%"
android:toYScale="20%"
android:pivotX="50%"
android:pivotY="50%"
android:duration="100"
>
</scale>
iv_scale2.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="20%"
android:toXScale="100%"
android:fromYScale="20%"
android:toYScale="100%"
android:pivotX="50%"
android:pivotY="50%"
android:duration="100"
>
</scale>
iv_translate.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="50%"
android:fromYDelta="0"
android:toYDelta="50%"
android:duration="3000"
android:fillAfter="true"
>
</translate>
iv_all.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fillAfter="true"
>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.3"
>
</alpha>
<rotate
android:fromDegrees="0"
android:toDegrees="720"
android:pivotX="50%"
android:pivotY="50%"
>
</rotate>
<scale
android:fromXScale="100%"
android:toXScale="50%"
android:fromYScale="100%"
android:toYScale="150%"
android:pivotX="50%"
android:pivotY="50%"
>
</scale>
<translate
android:fromXDelta="0"
android:toXDelta="50%"
android:fromYDelta="0"
android:toYDelta="50%"
>
</translate>
</set>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zking.administrator.g160628_android17_animation.MainActivity">
<ImageView
android:layout_width="300dp"
android:layout_height="200dp"
android:src="@drawable/heart"
android:id="@+id/iv_main_image"
/>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="alpha"
android:onClick="operation"
android:id="@+id/btn_main_alpha"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="rotate"
android:onClick="operation"
android:id="@+id/btn_main_rotate"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="scale"
android:onClick="operation"
android:id="@+id/btn_main_scale"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="translate"
android:onClick="operation"
android:id="@+id/btn_main_translate"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="all"
android:onClick="operation"
android:id="@+id/btn_main_all"
/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
Java核心代码
package com.zking.administrator.g160628_android17_animation;
import android.animation.ObjectAnimator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private ImageView iv_main_image;
private Animation animation;
private Animation animation2;
private Animation animation1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv_main_image = (ImageView) findViewById(R.id.iv_main_image);
iv_main_image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了图片", Toast.LENGTH_SHORT).show();
}
});
}
public void operation(View view){
switch (view.getId()) {
case R.id.btn_main_alpha:
//加载动画
animation = AnimationUtils.loadAnimation(this, R.anim.iv_alpha);
break;
case R.id.btn_main_rotate:
//加载动画
animation=AnimationUtils.loadAnimation(this,R.anim.iv_rotate);
break;
case R.id.btn_main_scale:
//加载动画
//缩动画
animation1 = AnimationUtils.loadAnimation(this, R.anim.iv_scale);
//放动画
animation2 = AnimationUtils.loadAnimation(this, R.anim.iv_scale2);
//给动画设置监听
animation1.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
iv_main_image.startAnimation(animation2);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
animation2.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
iv_main_image.startAnimation(animation1);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
//给图片开启动画
iv_main_image.startAnimation(animation1);
return;
case R.id.btn_main_translate:
//加载动画
//animation=AnimationUtils.loadAnimation(this,R.anim.iv_translate);
//使用属性动画实现图片的移动
ObjectAnimator.ofFloat(iv_main_image,"translationX",0,200).setDuration(2000).start();
ObjectAnimator.ofFloat(iv_main_image,"translationY",0,200).setDuration(2000).start();
break;
case R.id.btn_main_all:
animation=AnimationUtils.loadAnimation(this,R.anim.iv_all);
break;
}
// iv_main_image.startAnimation(animation);
}
}
②帧动画 Frame Animation
Property Animation (3.0以后才有的) 属性动画
1、什么是帧动画
Drawable动画其实就是Frame动画(帧动画),它允许你实现像播放幻灯片一样的效果,这种动画的实质其实是Drawable,所以这种动画的XML定义方式文件一般放在res/drawable/目录下。
2、帧动画的详解
<animation-list>
必须是根节点,包含一个或者多个<item>
元素,属性有:android:oneshot true代表只执行一次,false循环执行。
<item>
类似一帧的动画资源。<item>
animation-list的子项,包含属性如下:
android:drawable 一个frame的Drawable资源。
android:duration 一个frame显示多长时间。
帧动画实例
XML代码:iv_frame.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true"
>
<item android:drawable="@drawable/anim_0010001" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010002" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010003" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010004" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010005" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010006" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010007" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010008" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010009" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010010" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010011" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010012" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010013" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010014" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010015" android:duration="2000"></item>
<item android:drawable="@drawable/anim_0010016" android:duration="200"></item>
<item android:drawable="@drawable/anim_0010017" android:duration="200"></item>
</animation-list>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zking.administrator.g160628_android17_animation.FrameActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv_frame_image"
android:background="@drawable/iv_frame"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开始"
android:onClick="start"
/>
</LinearLayout>
核心代码:
package com.zking.administrator.g160628_android17_animation;
import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
public class FrameActivity extends AppCompatActivity {
private ImageView iv_frame_image;
private AnimationDrawable animationDrawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_frame);
iv_frame_image = (ImageView) findViewById(R.id.iv_frame_image);
animationDrawable = (AnimationDrawable) iv_frame_image.getBackground();
}
public void start(View view){
animationDrawable.start();
}
}