引言
Animation
动画说白了就是在一个时间段,改变一个目标的视图状态。
---
example:1秒钟内,让一个图片的透明度从1编程0.5
1.设置时间-1秒钟,对于抽象类Animation直接提供setDuration(long milis)方法进行设置
2.执行目标,View提供startAnimation(Animation anim)方法执行动画
3.改变状态视图,动画的多样化就是改变视图的各种状态,可以分为透明度,坐标矩阵俩种,坐标矩阵就可以引申出位移,旋转,缩放等等变形了。
---
Animation里面提供一个自定义动画行为的方法
applyTransformation
(float interprolatedTime, Transformation t)
float型参数interprolatedTime代表动画的插值,动画开始为0,动画结束为1,所有的动画行为可以从这个值的变化引申出自定义的各种动画
Transformation类型的参数t表示当前动画目标的行为状态,可以通过getMatrix和setMatrix方法对目标的坐标矩阵进行获取和设置,通过setAlpha对其透明度进行设置
---
下面是example的代码实现:
1
public
class CustomAnimation
extends Animation {
2
3 float mFromAlpha, mToAlpha;
4
5 public CustomAnimation( float fromAlpha, float toAlpha) {
6 mFromAlpha = fromAlpha;
7 mToAlpha = toAlpha;
8 }
9
10 @Override
11 protected void applyTransformation( float interpolatedTime, Transformation t) {
12 t.setAlpha(mFromAlpha + (mToAlpha - mFromAlpha) * interpolatedTime);
13 super.applyTransformation(interpolatedTime, t);
14 }
15 }
2
3 float mFromAlpha, mToAlpha;
4
5 public CustomAnimation( float fromAlpha, float toAlpha) {
6 mFromAlpha = fromAlpha;
7 mToAlpha = toAlpha;
8 }
9
10 @Override
11 protected void applyTransformation( float interpolatedTime, Transformation t) {
12 t.setAlpha(mFromAlpha + (mToAlpha - mFromAlpha) * interpolatedTime);
13 super.applyTransformation(interpolatedTime, t);
14 }
15 }
调用代码:
1 CustomAnimation anim =
new CustomAnimation(0.5f, 1f);
2 anim.setDuration(300);
3 anim.setInterpolator( new AccelerateInterpolator());
4 img.startAnimation(anim);
2 anim.setDuration(300);
3 anim.setInterpolator( new AccelerateInterpolator());
4 img.startAnimation(anim);
setInterpolator方法为设置动画行为控制器,例如线性运动,加速运动,曲线运动等等。
上述一个简单的自定义动画就完成。
3D Animation
看下3D动画的实现
1
public
class Custom3DAnimation
extends Animation {
2 public static final int AXIS_Y = 0;
3 public static final int AXIS_X = 1;
4
5 float mCenterX, mCenterY;
6 float mFromDegree, mToDegree, mDistanceZ;
7 int mAxis = AXIS_Y;
8
9 public Custom3DAnimation(
10 float centerX,
11 float centerY,
12 float fromDegree,
13 float toDegree,
14 float distanceZ,
15 int axis) {
16 mCenterX = centerX;
17 mCenterY = centerY;
18 mFromDegree = fromDegree;
19 mToDegree = toDegree;
20 mDistanceZ = distanceZ;
21 mAxis = axis;
22 }
23
24 @Override
25 protected void applyTransformation( float interpolatedTime, Transformation t) {
26 float degree = mFromDegree + (mToDegree - mFromDegree) * interpolatedTime;
27 float distanceZ = mDistanceZ * interpolatedTime;
28
29 Matrix matrix = t.getMatrix();
30 Camera camera = new Camera();
31 camera.save();
32 if (mDistanceZ != 0) {
33 camera.translate(0.0f, 0.0f, distanceZ);
34 }
35 if (mAxis == AXIS_X) {
36 camera.rotateX(degree);
37 } else if (mAxis == AXIS_Y) {
38 camera.rotateY(degree);
39 }
40 camera.getMatrix(matrix);
41 camera.restore();
42
43 // 设置旋转中心
44 matrix.preTranslate(-mCenterX, -mCenterY);
45 matrix.postTranslate(mCenterX, mCenterY);
46
47 super.applyTransformation(interpolatedTime, t);
48 }
49 }
2 public static final int AXIS_Y = 0;
3 public static final int AXIS_X = 1;
4
5 float mCenterX, mCenterY;
6 float mFromDegree, mToDegree, mDistanceZ;
7 int mAxis = AXIS_Y;
8
9 public Custom3DAnimation(
10 float centerX,
11 float centerY,
12 float fromDegree,
13 float toDegree,
14 float distanceZ,
15 int axis) {
16 mCenterX = centerX;
17 mCenterY = centerY;
18 mFromDegree = fromDegree;
19 mToDegree = toDegree;
20 mDistanceZ = distanceZ;
21 mAxis = axis;
22 }
23
24 @Override
25 protected void applyTransformation( float interpolatedTime, Transformation t) {
26 float degree = mFromDegree + (mToDegree - mFromDegree) * interpolatedTime;
27 float distanceZ = mDistanceZ * interpolatedTime;
28
29 Matrix matrix = t.getMatrix();
30 Camera camera = new Camera();
31 camera.save();
32 if (mDistanceZ != 0) {
33 camera.translate(0.0f, 0.0f, distanceZ);
34 }
35 if (mAxis == AXIS_X) {
36 camera.rotateX(degree);
37 } else if (mAxis == AXIS_Y) {
38 camera.rotateY(degree);
39 }
40 camera.getMatrix(matrix);
41 camera.restore();
42
43 // 设置旋转中心
44 matrix.preTranslate(-mCenterX, -mCenterY);
45 matrix.postTranslate(mCenterX, mCenterY);
46
47 super.applyTransformation(interpolatedTime, t);
48 }
49 }
3D动画的参数:中心点X,中心点Y,旋转开始角度,旋转结束角度,旋转是X轴还是Y轴,Z轴动画距离
调用如下:
1 Custom3DAnimation anim =
new Custom3DAnimation(
2 img.getWidth() / 2,
3 img.getHeight() / 2,
4 0,
5 180,
6 100,
7 Custom3DAnimation.AXIS_Y);
8 anim.setDuration(1000);
9 anim.setInterpolator( new AccelerateInterpolator());
10 img.startAnimation(anim);
2 img.getWidth() / 2,
3 img.getHeight() / 2,
4 0,
5 180,
6 100,
7 Custom3DAnimation.AXIS_Y);
8 anim.setDuration(1000);
9 anim.setInterpolator( new AccelerateInterpolator());
10 img.startAnimation(anim);
扩展
一般3D的使用,都是分正反俩面,当View翻转90度以后,View的内容或者View本身编程变换,然后完成另外90度的选中,来达到翻面的效果。
1 Custom3DAnimation anim =
new Custom3DAnimation(
2 img.getWidth() / 2,
3 img.getHeight() / 2,
4 0,
5 90,
6 0,
7 Custom3DAnimation.AXIS_Y);
8 anim.setDuration(500);
9 anim.setInterpolator( new AccelerateInterpolator());
10 anim.setAnimationListener( new AnimationListener() {
11 @Override
12 public void onAnimationStart(Animation animation) { }
13 @Override
14 public void onAnimationRepeat(Animation animation) {}
15 @Override
16 public void onAnimationEnd(Animation animation) {
17 img.setImageResource(R.drawable.logo_l2);
18 Custom3DAnimation anim1 = new Custom3DAnimation(
19 img.getWidth() / 2,
20 img.getHeight() / 2,
21 -90,
22 0,
23 0,
24 Custom3DAnimation.AXIS_Y);
25 anim1.setDuration(500);
26 anim1.setInterpolator( new AccelerateInterpolator());
27 img.startAnimation(anim1);
28 }
29 });
30 img.startAnimation(anim);
2 img.getWidth() / 2,
3 img.getHeight() / 2,
4 0,
5 90,
6 0,
7 Custom3DAnimation.AXIS_Y);
8 anim.setDuration(500);
9 anim.setInterpolator( new AccelerateInterpolator());
10 anim.setAnimationListener( new AnimationListener() {
11 @Override
12 public void onAnimationStart(Animation animation) { }
13 @Override
14 public void onAnimationRepeat(Animation animation) {}
15 @Override
16 public void onAnimationEnd(Animation animation) {
17 img.setImageResource(R.drawable.logo_l2);
18 Custom3DAnimation anim1 = new Custom3DAnimation(
19 img.getWidth() / 2,
20 img.getHeight() / 2,
21 -90,
22 0,
23 0,
24 Custom3DAnimation.AXIS_Y);
25 anim1.setDuration(500);
26 anim1.setInterpolator( new AccelerateInterpolator());
27 img.startAnimation(anim1);
28 }
29 });
30 img.startAnimation(anim);
涉及到的内容比较简单,只是起到总结作用,便于以后使用备忘。