更新时间:2022-09-25 23:24:18
Animation从总体来说可以分为两类:
Tweened Animations:该类提供了旋转,移动,伸展,淡入淡出等效果
Frame-By-Frame Animations:该类可以创建一个Drawable序列,这些Drawable可以按照指定的事件间隔一个一个显示,和动画片差不多
Tweened Animations也有四种类型:
Alpha:淡入淡出效果
Scale:缩放效果
Rotate:旋转效果
Translate:移动效果
设置动画效果可以在XML文件中设置,也可以在Java代码中设置。我们先来讲解在Java代码中怎么设置这四种动画效果
Java代码中设置动画效果的步骤:
创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
根据需要创建相应的Animation对象
根据需要对Animation对象的各个属性进行设值
将Animation对象添加到AnimationSet对象中
使用控件的startAnimation()方法执行AnimationSet
Java代码中的通用属性:
setDuration(long durationMillis):设置动画持续事件(单位:毫秒)
setFillAfter(boolean fillAfter):如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态
setFillBefore(boolean fillBefore):如果fillBefore设为true,则动画执行后,控件将回到动画开始的状态
setStartOffset(long startOffset):设置动画执行之前等待的时间(单位:毫秒)
setRepeatCount(int repeatCount):设置动画重复的次数
setInterpolator(Interpolator i):设置动画的变化速度
setInterpolator(new AccelerateDecelerateInterpolator()):先加速,后减速
setInterpolator(new AccelerateInterpolator()):加速
setInterpolator(new DecelerateInterpolator()):减速
setInterpolator(new CycleInterpolator()):动画循环播放特定次数,速率改变沿着正弦曲线
setInterpolator(new LinearInterpolator()):匀速
以及其他一些特定的动画效果
Java代码中设置动画效果的Demo(AnimationDemo01):
main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical" >
< ImageView
android:id = "@+id/imageView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginTop = "100dip"
android:src = "@drawable/ic_launcher" />
< LinearLayout
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:gravity = "bottom"
android:orientation = "vertical" >
< Button
android:id = "@+id/alphaButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "测试alpha动画效果" />
< Button
android:id = "@+id/scaleButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "测试scale动画效果" />
< Button
android:id = "@+id/rotateButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "测试rotate动画效果" />
< Button
android:id = "@+id/translateButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "测试translate动画效果" />
</ LinearLayout >
</ LinearLayout >
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
package com.tianjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
private ImageView mImageView;
private Button mAlphaButton;
private Button mScaleButton;
private Button mRotateButton;
private Button mTranslateButton;
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.main);
mImageView = (ImageView) findViewById(R.id.imageView);
mAlphaButton = (Button) findViewById(R.id.alphaButton);
mScaleButton = (Button) findViewById(R.id.scaleButton);
mRotateButton = (Button) findViewById(R.id.rotateButton);
mTranslateButton = (Button) findViewById(R.id.translateButton);
mAlphaButton.setOnClickListener( this );
mScaleButton.setOnClickListener( this );
mRotateButton.setOnClickListener( this );
mTranslateButton.setOnClickListener( this );
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.alphaButton:
// 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
AnimationSet animationSet = new AnimationSet( true );
// 创建一个AlphaAnimation对象(参数表示从完全不透明到完全透明)
AlphaAnimation alphaAnimation = new AlphaAnimation( 1 , 0 );
// 设置动画执行的时间(单位:毫秒)
alphaAnimation.setDuration( 1000 );
// 将AlphaAnimation对象添加到AnimationSet当中
animationSet.addAnimation(alphaAnimation);
// 使用ImageView的startAnimation方法开始执行动画
mImageView.startAnimation(animationSet);
break ;
case R.id.scaleButton:
// 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
animationSet = new AnimationSet( true );
// 创建一个ScaleAnimation对象(以某个点为中心缩放)
ScaleAnimation scaleAnimation = new ScaleAnimation( 1 , 0 .1f, 1 , 0 .1f,
Animation.RELATIVE_TO_SELF, 0 .5f, Animation.RELATIVE_TO_SELF, 0 .5f);
// 设置动画执行之前等待的时间(单位:毫秒)
scaleAnimation.setStartOffset( 1000 );
// 设置动画执行的时间(单位:毫秒)
scaleAnimation.setDuration( 2000 );
// 如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态
// 运行了一下发现以下奇怪的现象
// scaleAnimation.setFillAfter(true);不会停留在动画结束的状态
// animationSet.setFillAfter(true);则会停留在动画结束的状态
animationSet.setFillAfter( true );
// 将ScaleAnimation对象添加到AnimationSet当中
animationSet.addAnimation(scaleAnimation);
// 使用ImageView的startAnimation方法开始执行动画
mImageView.startAnimation(animationSet); break ;
case R.id.rotateButton:
// 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
animationSet = new AnimationSet( true );
// 创建一个RotateAnimation对象(以某个点为圆心旋转360度)
RotateAnimation rotateAnimation = new RotateAnimation( 0 , 360 ,
Animation.RELATIVE_TO_PARENT, 0 .5f, Animation.RELATIVE_TO_PARENT, 0 .25f);
// 设置动画执行的时间(单位:毫秒)
rotateAnimation.setDuration( 5000 );
// 将RotateAnimation对象添加到AnimationSet当中
animationSet.addAnimation(rotateAnimation);
// 使用ImageView的startAnimation方法开始执行动画
mImageView.startAnimation(animationSet);
break ;
case R.id.translateButton:
// 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
animationSet = new AnimationSet( true );
// 创建一个RotateAnimation对象(从某个点移动到另一个点)
TranslateAnimation translateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0 .5f,
Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1 .0f);
// 设置动画执行的时间(单位:毫秒)
translateAnimation.setDuration( 1000 );
// 将TranslateAnimation对象添加到AnimationSet当中
animationSet.addAnimation(translateAnimation);
// 使用ImageView的startAnimation方法开始执行动画
mImageView.startAnimation(animationSet);
break ;
default :
break ;
}
}
} |
剩下的3中动画效果都涉及到了参考点的问题,下面我们逐一解释
RotateAnimation的创建中用到了Animation.RELATIVE_TO_PARENT(表示以父控件为参考),另外还有2种参考:Animation.RELATIVE_TO_SELF(以自身为参考),Animation.ABSOLUTE(绝对坐标,没有参考)
我们就拿Animation.RELATIVE_TO_PARENT来画图讲解到底RotateAnimation旋转的圆心在哪儿?
例子中,X轴设置了相对于父控件,值是0.5f;Y轴设置了相对于父控件,值是0.25f。也就是说,圆心是0.5个父控件的width和0.25个父控件的height
那么,控件就围绕着上图的圆心,从0°旋转到360°(如果是0,-360,那么就是0°旋转到-360°)
以父控件为参照理解了的话,以自身为参考就可以举一反三了。
ScaleAnimation的创建的参数的解释:缩放的中心点可以按照上文中的计算方法,缩小后的图片大小是0.1个自身width,0.1个自身height,相当于缩小90%
TranslateAnimation的创建的参数的解释:参数主要是决定移动的起始点和终了点,计算方法参考上文
上面的Java代码设置动画效果有一个缺点:代码的可复用性很低,不利于维护。为了维护,可以使用XML来设置动画效果
XML中设置动画效果的步骤:
在res文件夹下新建一个名为anim的文件夹
创建xml文件,并首先加入set标签(set标签就相当于Java代码中的AnimationSet)
在Set标签中加入alpha,scale,rotate,translate标签(相当于Java代码中的AlphaAnimation,ScaleAnimation,RotateAnimation,TranslateAnimation)
在Java代码中使用AnimationUtils的loadAnimation方法来加载XML文件,并得到一个Animation对象
使用控件的startAnimation()方法执行这个Animation对象
XML中的通用属性:
android:duration:设置动画持续事件(单位:毫秒)
android:fillAfter:如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态
android:fillBefore:如果fillBefore设为true,则动画执行后,控件将回到动画开始的状态
android:startOffset(long startOffset):设置动画执行之前等待的时间(单位:毫秒)
android:repeatCount(int repeatCount):设置动画重复的次数
android:interpolator:设置动画的变化速度
XML中设置动画效果的Demo(AnimationDemo02):android:interpolator="@android:anim/accelerate_decelerate_interpolator":先加速,后减速
android:interpolator="@android:anim/accelerate_interpolator":加速
android:interpolator="@android:anim/decelerate_interpolator":减速
android:interpolator="@android:anim/cycle_Interpolator":动画循环播放特定次数,速率改变沿着正弦曲线
android:interpolator="@android:anim/linear_Interpolator":匀速
以及其他一些特定的动画效果
main.xml
同上
alpha.xml
1
2
3
4
5
6
7
8
9
|
<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
android:interpolator = "@android:anim/accelerate_interpolator" >
< alpha
android:duration = "500"
android:fromAlpha = "1.0"
android:startOffset = "500"
android:toAlpha = "0.0" />
</ set >
|
1
2
3
4
5
6
7
8
9
10
|
<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
android:interpolator = "@android:anim/accelerate_interpolator" >
< rotate
android:duration = "5000"
android:fromDegrees = "0"
android:pivotX = "50%"
android:pivotY = "50%"
android:toDegrees = "360" />
</ set >
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
android:interpolator = "@android:anim/accelerate_interpolator" >
< scale
android:duration = "2000"
android:fromXScale = "1.0"
android:fromYScale = "1.0"
android:pivotX = "50%"
android:pivotY = "50%"
android:toXScale = "0.0"
android:toYScale = "0.0" />
</ set >
|
1
2
3
4
5
6
7
8
9
10
|
<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
android:interpolator = "@android:anim/accelerate_interpolator" >
< translate
android:duration = "2000"
android:fromXDelta = "50%"
android:fromYDelta = "0%"
android:toXDelta = "100%"
android:toYDelta = "100%" />
</ set >
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
package com.tianjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
private ImageView mImageView;
private Button mAlphaButton;
private Button mScaleButton;
private Button mRotateButton;
private Button mTranslateButton;
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.main);
mImageView = (ImageView) findViewById(R.id.imageView);
mAlphaButton = (Button) findViewById(R.id.alphaButton);
mScaleButton = (Button) findViewById(R.id.scaleButton);
mRotateButton = (Button) findViewById(R.id.rotateButton);
mTranslateButton = (Button) findViewById(R.id.translateButton);
mAlphaButton.setOnClickListener( this );
mScaleButton.setOnClickListener( this );
mRotateButton.setOnClickListener( this );
mTranslateButton.setOnClickListener( this );
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.alphaButton:
Animation alphaAnimation = AnimationUtils.loadAnimation( this , R.anim.alpha);
mImageView.startAnimation(alphaAnimation);
break ;
case R.id.scaleButton:
Animation scaleAnimation = AnimationUtils.loadAnimation( this , R.anim.scale);
mImageView.startAnimation(scaleAnimation);
break ;
case R.id.rotateButton:
Animation rotateAnimation = AnimationUtils.loadAnimation( this , R.anim.rotate);
mImageView.startAnimation(rotateAnimation);
break ;
case R.id.translateButton:
Animation translateAnimation = AnimationUtils.loadAnimation( this , R.anim.translate);
mImageView.startAnimation(translateAnimation);
break ;
default :
break ;
}
}
} |
值得一提的是,AnimationDemo01中出现的绝对定位(Animation.ABSOLUTE),相对于自身定位(Animation.RELATIVE_TO_SELF),相对于父控件定位(Animation.RELATIVE_TO_PAREN),在XML文件中用XX(绝对),XX%(相对于自身),XX%p(相对于父控件)
上面两个例子都有一个类叫:AnimationSet(XML文件中是set标签),这个AnimationSet就相当于一个集合,可以存放一个或多个Animation对象,如果我们对AnimationSet设置属性值,那么,这些属性值将应用到AnimationSet下的所有Animation对象中去。
直接上代码(AnimationDemo03)
main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical" >
< ImageView
android:id = "@+id/imageView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginTop = "100dip" />
< LinearLayout
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:gravity = "bottom"
android:orientation = "vertical" >
< Button
android:id = "@+id/frameByFrameButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "测试Frame-By-Frame动画效果" />
</ LinearLayout >
</ LinearLayout >
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<? 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/nv1"
android:duration = "500" />
< item
android:drawable = "@drawable/nv2"
android:duration = "500" />
< item
android:drawable = "@drawable/nv3"
android:duration = "500" />
< item
android:drawable = "@drawable/nv4"
android:duration = "500" />
</ animation-list >
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
package com.tianjf;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
private ImageView mImageView;
private Button mFrameByFrameButton;
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.main);
mImageView = (ImageView) findViewById(R.id.imageView);
mFrameByFrameButton = (Button) findViewById(R.id.frameByFrameButton);
mFrameByFrameButton.setOnClickListener( this );
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.frameByFrameButton:
// 为ImageView设置背景资源
mImageView.setBackgroundResource(R.drawable.anim_nv);
// 通过ImageView得到AnimationDrawable
AnimationDrawable animationDrawable = (AnimationDrawable) mImageView.getBackground();
// 开始执行动画
animationDrawable.start();
break ;
default :
break ;
}
}
} |
LayoutAnimationController可以在XML中设置,也可在Java代码中设置
先看一个在XML中设置的Demo(AnimationDemo04)
list_anim.xml
1
2
3
4
5
6
7
8
9
|
<? 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:duration = "2000"
android:fromAlpha = "0.0"
android:toAlpha = "1.0" />
</ set >
|
1
2
3
4
5
|
<? xml version = "1.0" encoding = "utf-8" ?>
< layoutAnimation xmlns:android = "http://schemas.android.com/apk/res/android"
android:delay = "1"
android:animationOrder = "normal"
android:animation = "@anim/list_anim" />
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical" >
< ListView
android:id = "@id/android:list"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layoutAnimation = "@anim/list_anim_layout"
android:scrollbars = "vertical"
android:visibility = "gone" />
< LinearLayout
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:gravity = "bottom"
android:orientation = "vertical" >
< Button
android:id = "@+id/button"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "测试LayoutAnimation动画效果" />
</ LinearLayout >
</ LinearLayout >
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "horizontal"
android:paddingBottom = "1dip"
android:paddingLeft = "10dip"
android:paddingRight = "10dip"
android:paddingTop = "1dip" >
< TextView
android:id = "@+id/user_name"
android:layout_width = "180dip"
android:layout_height = "30dip"
android:singleLine = "true"
android:textSize = "20dip" />
< TextView
android:id = "@+id/user_gender"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:singleLine = "true"
android:textSize = "20dip" />
</ LinearLayout >
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
package com.tianjf;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class AnimationDemoActivity extends ListActivity implements OnClickListener {
private ListView mListView;
private Button mButton;
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.main);
mListView = getListView();
mButton = (Button) findViewById(R.id.button);
mListView.setAdapter(buildListAdapter());
mButton.setOnClickListener( this );
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
mListView.setVisibility(View.VISIBLE);
break ;
default :
break ;
}
}
private ListAdapter buildListAdapter() {
List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
HashMap<String, String> m1 = new HashMap<String, String>();
m1.put( "user_name" , "张三" );
m1.put( "user_gender" , "女" );
HashMap<String, String> m2 = new HashMap<String, String>();
m2.put( "user_name" , "李四" );
m2.put( "user_gender" , "女" );
HashMap<String, String> m3 = new HashMap<String, String>();
m3.put( "user_name" , "王五" );
m3.put( "user_gender" , "男" );
list.add(m1);
list.add(m2);
list.add(m3);
SimpleAdapter simpleAdapter = new SimpleAdapter( this , list, R.layout.item, new String[] {
"user_name" , "user_gender" }, new int [] { R.id.user_name, R.id.user_gender });
return simpleAdapter;
}
} |
如果要在Java代码中设置LayoutAnimation,可以按照如下设置
删掉list_anim_layout.xml文件,删掉main.xml下的ListView的android:layoutAnimation属性,最后,在OnClick方法里面加上如下代码:
1
2
3
4
5
|
Animation animation = (Animation) AnimationUtils.loadAnimation( this , R.anim.list_anim);
LayoutAnimationController lac = new LayoutAnimationController(animation);
lac.setOrder(LayoutAnimationController.ORDER_NORMAL); lac.setDelay( 0 .5f);
mListView.setLayoutAnimation(lac); |
AnimationListener主要包含三个方法:
onAnimationEnd:动画结束
onAnimationStart:动画开始
onAnimationRepet:动画重复