厚积薄发

0%

Android动画基础

Posted on Edited on In

  Android动画分为补间动画和帧动画两种。补间动画提供旋转、移动、缩放、透明度四种效果；帧动画是通过放置每一帧的图片，按顺序改变图片形成动画效果。
然而自Android 3.0版本开始，系统给我们提供了一种全新的动画模式，属性动画(property animation)，它的功能非常强大，弥补了之前补间动画的一些缺陷，几乎是可以完全替代掉补间动画了。
虽然可以代替掉，但是作为平时学习的话还是必须了解。

1、补间动画

补间动画是可以对View进行一系列的动画操作。

1.1移动动画

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
private void translateAnimation() {
	/**
	 *1.坐标的的类型（ Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT.）
	 *2.x坐标的相对起始位置。这里是0.1就是相对于当前view x坐标 + view长度10%位置。
	 *3.坐标类型
	 *4.y坐标的相对起始位置。这里是0.1就是相对于当前view y 坐标 + view高度10%位置。
	 * */
	animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.1f, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF,
			0.1f, Animation.RELATIVE_TO_SELF, 1f);
	//动画时间
	animation.setDuration(1000 * 2);
	//动画运行完后保持动画完成的效果
	animation.setFillAfter(true);
	animation.setAnimationListener(new Animation.AnimationListener() {
		@Override
		public void onAnimationStart(Animation animation) {

		}

		@Override
		public void onAnimationEnd(Animation animation) {

		}

		@Override
		public void onAnimationRepeat(Animation animation) {

		}
	});
}

1.2缩放动画

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
private void scaleAnimation() {
	/**
	 *1.fromX 起始view长度相对自己本身大小的比值 。（起始view相对与自己的50%）
	 *2.toX 结束view长度相对自己本身大小的比值 。
	 *3.pivotXType view的相对目标。
	 *4.pivotXValue 缩放的相对起始位置。（如果是0.5 从中间向四周放大）
	 * */
	animation = new ScaleAnimation(0.5f, 1f, 0.5f, 1f, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
	//动画时间
	animation.setDuration(1000 * 2);
	//动画运行完后保持动画完成的效果
	animation.setFillAfter(true);
	animation.setAnimationListener(new Animation.AnimationListener() {
		@Override
		public void onAnimationStart(Animation animation) {

		}

		@Override
		public void onAnimationEnd(Animation animation) {

		}

		@Override
		public void onAnimationRepeat(Animation animation) {

		}
	});
}

1.3旋转动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private void  rotateAnimation() {
	animation = new RotateAnimation(0f, 180f,  Animation.RELATIVE_TO_SELF, 0.5f,  Animation.RELATIVE_TO_SELF, 0.5f);
	//动画时间
	animation.setDuration(1000 * 2);
	//动画运行完后保持动画完成的效果
	animation.setFillAfter(true);
	animation.setAnimationListener(new Animation.AnimationListener() {
		@Override
		public void onAnimationStart(Animation animation) {

		}

		@Override
		public void onAnimationEnd(Animation animation) {

		}

		@Override
		public void onAnimationRepeat(Animation animation) {

		}
	});
}

1.4透明度动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private void alphaAnimation() {
    animation = new AlphaAnimation(0.5f, 1f);
    //动画时间
    animation.setDuration(1000 * 2);
    //动画运行完后保持动画完成的效果
    animation.setFillAfter(true);
    animation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
}

1.5动画集合

1
2
3
4
5
6
7
8
9
10
11
private void animationSet() {
	AnimationSet animationSet = new AnimationSet(true);
	//动画时间 在AnimationSet 中需要设置给AnimationSet，设置给子animation是无效的。
	animationSet.setDuration(1000 * 2);
	//动画运行完后保持动画完成的效果，在AnimationSet 中需要设置给AnimationSet，设置给子animation是无效的。
	animationSet.setFillAfter(true);
	Animation scaleAnimation = new ScaleAnimation(0.5f, 1f, 0.5f, 1f, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
	Animation alphaAnimation = new AlphaAnimation(0.5f, 1f);
	animationSet.addAnimation(scaleAnimation);
	animationSet.addAnimation(alphaAnimation);
}

1.6interpolator

AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢，在中间的时候加速

AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速

AnticipateInterpolator 开始的时候向后然后向前甩

AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值

BounceInterpolator 动画结束的时候弹起

CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线

DecelerateInterpolator 在动画开始的地方快然后慢

LinearInterpolator 以常量速率改变

OvershootInterpolator 向前甩一定值后再回到原来位置 

1
2
3
4
5
6
7
8
9
10
private void interpolator() {
	Interpolator interpolator = new LinearInterpolator(); //动画插值器， 用于设置动画改变的速率。
	animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.1f, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF,
			0.1f, Animation.RELATIVE_TO_SELF, 1f);
	//动画时间
	animation.setDuration(1000 * 2);
	//动画运行完后保持动画完成的效果
	animation.setFillAfter(true);
	animation.setInterpolator(interpolator);
}

1.7xml中编辑动画

在res下新建一个anim文件夹，添加动画文件。 参数意义和代码中的一样。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="0%p"
        android:toXDelta="0%p"
        android:fromYDelta="40%p"
        android:toYDelta="0%p"
        android:duration="80"/>

    <scale android:duration="80"
        android:fromXScale="0.8"
        android:toXScale="1.2"
        android:fromYScale="0.8"
        android:toYScale="1.2"
        android:pivotX="50%"
        android:pivotY="50%"
        />

</set>

在代码中获取动画

1
Animation popShowAni = AnimationUtils.loadAnimation(this, R.anim.dynamic_pop_enter);

2、帧动画

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
<?xml version="1.0" encoding="utf-8"?><!--
	根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
	根标签下，通过item标签对动画中的每一个图片进行声明
	android:duration 表示展示所用的该图片的时间长度
 -->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/pulling_load1"
        android:duration="40"></item>
    <item
        android:drawable="@drawable/pulling_load2"
        android:duration="40"></item>
    <item
        android:drawable="@drawable/pulling_load3"
        android:duration="40"></item>
    <item
        android:drawable="@drawable/pulling_load4"
        android:duration="40"></item>
    <item
        android:drawable="@drawable/pulling_load5"
        android:duration="40"></item>
    <item
        android:drawable="@drawable/pulling_load6"
        android:duration="40"></item>
</animation-list>
1
2
3
4
5
<ImageView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/pulling_load"
	android:id="@+id/animation_view"/>
1
2
3
4
5
private void frameAnimation() {
	ImageView imageView = (ImageView) findViewById(R.id.animation_view);
	AnimationDrawable drawable = (AnimationDrawable) imageView.getDrawable();
	drawable.start();
}

3 属性动画

Android属性动画完全解析(上)，初识属性动画的基本用法

Android属性动画完全解析(中)，ValueAnimator和ObjectAnimator的高级用法

Android属性动画完全解析(下)，Interpolator和ViewPropertyAnimator的用法