android-different-loading-animations动画加载分析

Demo地址

android-different-loading-animations动画加载分析
github地址:https://github.com/raweng/android-different-loading-animations

windows like

enter image description here

这个动画相关代码

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
   	public void windowsAnimation() {
final ValueAnimator valueTvOne_x = ObjectAnimator.ofFloat(windowsTvOne, "x", windowsTvOne.getX() - 50, (screenWidth / 2) + 10f, (screenWidth / 2) + 25f,(screenWidth / 2) + 50f, screenWidth * .94f, screenWidth + 5);

valueTvOne_x.setDuration(5200);
valueTvOne_x.setRepeatCount(0);
valueTvOne_x.setRepeatMode(ValueAnimator.REVERSE);

valueTvOne_x.addListener(new AnimatorListener() {
...
});

final ValueAnimator valueTvTwo_x = ObjectAnimator.ofFloat(windowsTvTwo, "x", windowsTvTwo.getX() - 50, (screenWidth / 2.1f) + 10f, (screenWidth / 2.1f) + 25f, (screenWidth / 2.1f) + 50f, screenWidth * .94f, screenWidth + 5);

valueTvTwo_x.setDuration(6000);
valueTvTwo_x.setRepeatCount(0);
valueTvTwo_x.setStartDelay(200);
valueTvTwo_x.setRepeatMode(ValueAnimator.REVERSE);

valueTvTwo_x.addListener(new AnimatorListener() {
...
});

final ValueAnimator valueTvThree_x = ObjectAnimator.ofFloat(windowsTvThree, "x", windowsTvThree.getX() - 50, (screenWidth / 2.2f) + 10f, (screenWidth / 2.2f) + 25f, (screenWidth / 2.2f) + 50f, screenWidth * .94f, screenWidth + 5);

valueTvThree_x.setDuration(6500);
valueTvThree_x.setRepeatCount(0);
valueTvTwo_x.setStartDelay(500);
valueTvThree_x.setRepeatMode(ValueAnimator.REVERSE);

valueTvThree_x.addListener(new AnimatorListener() {
...
});

windowsAnimatorSet = new AnimatorSet();
windowsAnimatorSet.playTogether(valueTvTwo_x, valueTvThree_x, valueTvOne_x);

windowsAnimatorSet.start();
windowsAnimatorSet.addListener(new AnimatorListener() {
@Override
public void onAnimationEnd(Animator animation) {
windowsAnimatorSet.start();
}
});

}

需要注意的地方是:

  1. 三个小块移动的范围不一样 ,screenWidth / (2.0f或者2.1f或者2.2f)
  2. 后面两个块有延时,200ms和500ms
  3. 三个快移动的速度第一个最快,第三个最慢。这个是通过控制动画执行时间达到的(5200ms,6000ms,6500ms)

hangout like

enter image description here

主要代码:

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
   	public void waveAnimation() {
PropertyValuesHolder tvOne_Y = PropertyValuesHolder.ofFloat(hangoutTvOne.TRANSLATION_Y, -40.0f);
PropertyValuesHolder tvOne_X = PropertyValuesHolder.ofFloat(hangoutTvOne.TRANSLATION_X, 0);
waveOneAnimator = ObjectAnimator.ofPropertyValuesHolder(hangoutTvOne, tvOne_X, tvOne_Y);
waveOneAnimator.setRepeatCount(-1);
waveOneAnimator.setRepeatMode(ValueAnimator.REVERSE);
waveOneAnimator.setDuration(300);
waveOneAnimator.start();

PropertyValuesHolder tvTwo_Y = PropertyValuesHolder.ofFloat(hangoutTvTwo.TRANSLATION_Y, -40.0f);
PropertyValuesHolder tvTwo_X = PropertyValuesHolder.ofFloat(hangoutTvTwo.TRANSLATION_X, 0);
waveTwoAnimator = ObjectAnimator.ofPropertyValuesHolder(hangoutTvTwo, tvTwo_X, tvTwo_Y);
waveTwoAnimator.setRepeatCount(-1);
waveTwoAnimator.setRepeatMode(ValueAnimator.REVERSE);
waveTwoAnimator.setDuration(300);
waveTwoAnimator.setStartDelay(100);
waveTwoAnimator.start();

PropertyValuesHolder tvThree_Y = PropertyValuesHolder.ofFloat(hangoutTvThree.TRANSLATION_Y, -40.0f);
PropertyValuesHolder tvThree_X = PropertyValuesHolder.ofFloat(hangoutTvThree.TRANSLATION_X, 0);
waveThreeAnimator = ObjectAnimator.ofPropertyValuesHolder(hangoutTvThree, tvThree_X, tvThree_Y);
waveThreeAnimator.setRepeatCount(-1);
waveThreeAnimator.setRepeatMode(ValueAnimator.REVERSE);
waveThreeAnimator.setDuration(300);
waveThreeAnimator.setStartDelay(200);
waveThreeAnimator.start();
}

实现分析:

  1. 动画时间都是300ms
  2. 第一个没有延时,第二个100ms,第三个延时200ms。这样就连贯起来了

###left2right like
enter image description here

主要代码:

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
   public void leftToRightToLeftMove() {

final ValueAnimator valueTvOne_x = ObjectAnimator.ofFloat(leftRightTvOne, "x", leftRightTvOne.getX(), screenWidth * .9f);

valueTvOne_x.setDuration(1000);
valueTvOne_x.setRepeatCount(0);
valueTvOne_x.setRepeatMode(ValueAnimator.REVERSE);
valueTvOne_x.setInterpolator(new DecelerateInterpolator());

final ValueAnimator valueTvTwo_x = ObjectAnimator.ofFloat(leftRightTvTwo, "x", leftRightTvTwo.getX(), screenWidth * .93f);//- 35);

valueTvTwo_x.setDuration(1000);
valueTvTwo_x.setRepeatCount(0);
valueTvTwo_x.setRepeatMode(ValueAnimator.REVERSE);
valueTvTwo_x.setInterpolator(new DecelerateInterpolator());

final ValueAnimator valueTvThree_x = ObjectAnimator.ofFloat(leftRightTvThree, "x", leftRightTvThree.getX(), screenWidth * .96f);// - 20);

valueTvThree_x.setDuration(1000);
valueTvThree_x.setRepeatCount(0);
valueTvThree_x.setRepeatMode(ValueAnimator.REVERSE);
valueTvThree_x.setInterpolator(new DecelerateInterpolator());

animatorSet1 = new AnimatorSet();
animatorSet1.playSequentially(valueTvOne_x, valueTvTwo_x, valueTvThree_x);

animatorSet1.start();
animatorSet1.addListener(new AnimatorListener() {

@Override
public void onAnimationStart(Animator animation) {
}

@Override
public void onAnimationRepeat(Animator animation) {

}

@Override
public void onAnimationEnd(Animator animation) {
ValueAnimator valueTvOne_x = ObjectAnimator.ofFloat(leftRightTvOne, "x", leftRightTvOne.getX(), leftRightTvOne.getX() * .01f);

valueTvOne_x.setDuration(1000);
valueTvOne_x.setRepeatCount(0);
valueTvOne_x.setRepeatMode(ValueAnimator.REVERSE);
valueTvOne_x.setInterpolator(new DecelerateInterpolator());

final ValueAnimator valueTvTwo_x = ObjectAnimator.ofFloat(leftRightTvTwo, "x", leftRightTvTwo.getX(), leftRightTvTwo.getX() * .03f);

valueTvTwo_x.setDuration(1000);
valueTvTwo_x.setRepeatCount(0);
valueTvTwo_x.setRepeatMode(ValueAnimator.REVERSE);
valueTvTwo_x.setInterpolator(new DecelerateInterpolator());

final ValueAnimator valueTvThree_x = ObjectAnimator.ofFloat(leftRightTvThree, "x", leftRightTvThree.getX(), leftRightTvThree.getX() * .06f);

valueTvThree_x.setDuration(1000);
valueTvThree_x.setRepeatCount(0);
valueTvThree_x.setRepeatMode(ValueAnimator.REVERSE);
valueTvThree_x.setInterpolator(new DecelerateInterpolator());

animatorSet = new AnimatorSet();
animatorSet.playSequentially(valueTvThree_x, valueTvTwo_x, valueTvOne_x);

animatorSet.start();
animatorSet.addListener(new AnimatorListener() {

@Override
public void onAnimationStart(Animator animation) {

}

@Override
public void onAnimationRepeat(Animator animation) {

}

@Override
public void onAnimationEnd(Animator animation) {
animatorSet1.start();
}

@Override
public void onAnimationCancel(Animator animation) {

}
});
}

@Override
public void onAnimationCancel(Animator animation) {
}
});

}

原理分析:

  1. 三个点动画是顺序执行的,所以调用animatorSet.playSequentially()
  2. 从左到右三个点停留的位置不一样,分别是屏幕宽度的0.9,0.93,0.96
  3. 从右到左三个点停留的位置也不一样,分别是屏幕宽度的0.01,0.03,0.06

foursquare like

enter image description here

这个效果是几张图片合成的o(╯□╰)o

horizontalincreamental like

enter image description here
这个效果也是几张图片合成的o(╯□╰)o

文章目录
  1. 1. Demo地址
  2. 2. windows like
  3. 3. hangout like
  4. 4. foursquare like
  5. 5. horizontalincreamental like