Android基础15 动画特效

1. Tween动画

将某个组件以渐变的方式实现透明、缩放、移动、旋转等动画效果。
图片1

详见文档android-sdk-windows/docs/guide/topics/resources/animation-resource.html

2. Frame动画

通过多个画面连续播放实现动画效果,开发步骤:

  • 把准备好的图片放进项目res/ drawable下。
  • 在项目的res目录下创建文件夹anim,然后在anim文件夹下面定义动画XML文件,文件名称 可以自定义。当然也可以采用编码方式定义动画效果(使用AnimationDrawable类)。
1
2
3
4
5
6
7
<?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/girl_1" android:duration="200" />
<item android:drawable="@drawable/girl_2" android:duration="200" />
<item android:drawable="@drawable/girl_3" android:duration="200" />
</animation-list>
  • 为View控件绑定动画效果。调用代表动画的AnimationDrawable的start()方法开始动画。
    详见文档 android-sdk-windows/docs/guide/topics/resources/animation-resource.html

3. 使用动画切换Activity

在startActivity()方法调用之后调用
overridePendingTransition(int enterAnim, int exitAnim)方法
enterAnim 进入的动画资源id
exitAnim 退出的动画 资源id

4. 使用动画翻页

XML配置

1
2
3
4
5
6
7
8
9
10
11
12
13
<ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/bb2"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/bb3"/>
</ViewFlipper>

Java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public boolean onTouchEvent(MotionEvent event) {
trueViewFlipper viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
trueswitch (event.getAction()) {
truetruecase MotionEvent.ACTION_DOWN:
truetruetruestart = event.getX();
truetruetruebreak;
truetruecase MotionEvent.ACTION_UP:
truetruetruefloat end = event.getX();
truetruetrueif (end > start) {
truetruetruetrueviewFlipper.setInAnimation(this, R.anim.previous_enter);
truetruetruetrueviewFlipper.setOutAnimation(this, R.anim.previous_exit);
truetruetruetrueviewFlipper.showPrevious();
truetruetrue} else if (end < start) {
truetruetruetrueviewFlipper.setInAnimation(this, R.anim.next_enter);
truetruetruetrueviewFlipper.setOutAnimation(this, R.anim.next_exit);
truetruetruetrueviewFlipper.showNext();
truetruetrue}
truetruetruebreak;
true}
truereturn super.onTouchEvent(event);
}

5. 动画练习

5.1 本例要实现对ImageView对象进行渐变尺寸缩放动画效果

  • 在项目的res目录下创建文件夹anim,然后在anim文件夹下面定义动画XML文件,文件名称可以自定义,如:scale.xml,内容如下:
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">
<scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:toXScale="5"
android:toYScale="5"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="5000" />
</set>

动画的进度使用interpolator控制,android提供了几个Interpolator 子类,实现了不同的速度曲线,如LinearInterpolator实现了匀速效果、Accelerateinterpolator实现了加速效果、DecelerateInterpolator实现了减速效果等。还可以定义自己的Interpolator子类,实现抛物线、自由落体等物理效果。

fromXScale(浮点型) 属性为动画起始时X坐标上的缩放尺寸
fromYScale(浮点型) 属性为动画起始时Y坐标上的缩放尺寸
toXScale(浮点型) 属性为动画结束时X坐标上的缩放尺寸
toYScale(浮点型) 属性为动画结束时Y坐标上的缩放尺寸

说明: 以上四种属性值
0.0表示收缩到没有
1.0表示正常无缩放
值小于1.0表示收缩
值大于1.0表示放大
pivotX(浮点型) 属性为动画相对于物件的X坐标的开始位置
pivotY(浮点型) 属性为动画相对于物件的Y坐标的开始位置

说明:
以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置
duration(长整型)属性为动画持续时间 。说明: 时间以毫秒为单位
fillAfter(布尔型)属性当设置为true,该动画转化在动画结束后被应用

  • 在layout文件添加<ImageView>节点:
1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"
android:id="@+id/imageView" />
</LinearLayout>

说明:除了可以对<ImageView>实现动画效果,其实也可以对其他View实现动画效果,如:<TextView>

  • 在Activity里对ImageView使用前面定义好的动画效果:
1
2
3
4
5
6
7
8
9
10
11
12
public class AnimationActivity extends Activity {
true@Override
truepublic void onCreate(Bundle savedInstanceState) {
truetruesuper.onCreate(savedInstanceState);
truetruesetContentView(R.layout.main);
truetrueImageView imageView = (ImageView)this.findViewById(R.id.imageView);
truetrue//加载动画XML文件,生成动画指令
truetrueAnimation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
truetrue//开始执行动画
truetrueimageView.startAnimation(animation);
true}
}

备注:上面采用的是xml文件定义动画效果,作为代替,也可以采用编码方式实现。下面采用编码方式实现上述例子同样的效果:

1
2
3
4
5
6
7
8
9
10
11
12
public class AnimationActivity extends Activity {
true@Override
truepublic void onCreate(Bundle savedInstanceState) {
truetruesuper.onCreate(savedInstanceState);
truetruesetContentView(R.layout.main);
truetrueImageView imageView = (ImageView)this.findViewById(R.id.imageView);
truetrueScaleAnimation animation = new ScaleAnimation(0.0f, 5f, 0.0f, 5f,
truetrueAnimation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
truetrueanimation.setDuration(5000); //设置持续时间5秒
truetrueimageView.startAnimation(animation);
true}
}

5.2 其他动画效果定义例子

  • 渐变透明度动画效果
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
true<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="3000"/>
</set>

编码实现透明度动画效果:

1
2
3
4
5
6
7
8
9
10
11
public class AnimationActivity extends Activity {
true@Override
truepublic void onCreate(Bundle savedInstanceState) {
truetruesuper.onCreate(savedInstanceState);
truetruesetContentView(R.layout.main);
truetrueImageView imageView = (ImageView)this.findViewById(R.id.imageView);
truetrueAlphaAnimation animation = new AlphaAnimation(0.1, 1.0);
truetrueanimation.setDuration(5000); //设置持续时间5秒
truetrueimageView.startAnimation(animation);
true}
}
  • 画面位置移动动画效果
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">
<translate
android:repeatCount="2"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="120"
android:toYDelta="120"
android:duration="3000"/>
<!-- fromXDelta fromYDelta 为动画起始时 X和Y坐标上的位置
toXDelta toYDelta为动画结束起始时 X和Y坐标上的位置 -->
</set>

编码实现位置移动动画效果:

1
2
3
4
5
6
7
8
9
10
11
public class AnimationActivity extends Activity {
true@Override
truepublic void onCreate(Bundle savedInstanceState) {
truetruesuper.onCreate(savedInstanceState);
truetruesetContentView(R.layout.main);
truetrueImageView imageView = (ImageView)this.findViewById(R.id.imageView);
truetrueTranslateAnimation animation = new TranslateAnimation(0, 120, 0, 120);
truetrueanimation.setDuration(5000); //设置持续时间5秒
truetrueimageView.startAnimation(animation);
true}
}
  • 画面旋转动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_interpolator"
android:repeatCount="2"
android:fromDegrees="0"
android:toDegrees="+360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000"/>
<!--
repeatCount 重复次数
fromDegrees为动画起始时物件的角度:
当角度为负数——表示逆时针旋转
当角度为正数——表示顺时针旋转
(负数fromDegrees——toDegrees正数:顺时针旋转)
(负数fromDegrees——toDegrees负数:逆时针旋转)
(正数fromDegrees——toDegrees正数:顺时针旋转)
(正数fromDegrees——toDegrees负数:逆时针旋转)
toDegrees属性为动画结束时物件旋转的角度 可以大于360度
pivotX,pivotY 为动画相对于物件的X、Y坐标的开始位置。说明:以上两个属性值 从0%-100%中取值,50%为物件的X或Y方向坐标上的中点位置
-->
</set>

编码实现:

1
2
3
RotateAnimation animation = new RotateAnimation(0, -90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(500);
imageView.startAnimation(animation);
  • Frame动画例子
    a) 把准备好的图片放进项目res/ drawable下。图片有:girl_1.gif, girl_2.gif, girl_3.gif
    b) 在项目的res目录下创建文件夹anim,然后在anim文件夹下面定义动画XML文件,文件名称可以自定义,如:frame.xml。
1
2
3
4
5
6
7
<?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/girl_1" android:duration="200" />
<item android:drawable="@drawable/girl_2" android:duration="200" />
<item android:drawable="@drawable/girl_3" android:duration="200" />
</animation-list>

上面的XML就定义了一个Frame动画,其包含3帧动画,3帧动画中分别应用了drawable中的3张图片:girl_1.gif, girl_2.gif, girl_3.gif,每帧动画持续200毫秒。android:oneshot属性如果为true,表示动画只播放一次停止在最后一帧上,如果设置为false表示动画循环播放。

c) 为View控件绑定动画效果,调用代表动画的AnimationDrawable的start()方法开始动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class FrameActivity extends Activity {
trueprivate AnimationDrawable animationDrawable;
true@Override
truepublic void onCreate(Bundle savedInstanceState) {
truetruesuper.onCreate(savedInstanceState);
truetruesetContentView(R.layout.main);
truetrueImageView imageView = (ImageView)this.findViewById(R.id.imageView);
truetrueimageView.setBackgroundResource(R.anim.frame);
truetrueanimationDrawable = (AnimationDrawable) imageView.getBackground();
true}
true@Override
truepublic boolean onTouchEvent(MotionEvent event) {
truetrue if (event.getAction() == MotionEvent.ACTION_DOWN) {//按下
truetruetrue animationDrawable.start();
truetruetrue return true;
truetrue }
truetrue return super.onTouchEvent(event);
true}
}

有一点需要强调的是:启动Frame动画的代码animationDrawable.start();不能应用在OnCreate()方法中,因为在OnCreate()中 AnimationDrawable还没有完全的与ImageView绑定。在OnCreate()中启动动画,只能看到第一张图片。这里在触摸事件中实现的。


 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×