Android app引导页(背景图片切换加各个页面动画效果)

超、凢脫俗 2024-02-17 18:50 55阅读 0赞

**先看效果图:**

![20150827235112507][]

转自：http://blog.csdn[.NET][]/lowprofile\_coding/article/details/48037095

1.显示三个页面的Activity 用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了view pager,实现了背景图片的移动效果.

**\[java\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* 主Activity
3.   \* @author ansen
4.   \* @create time 2015-08-07
5.   \*/
6.  **public****class** KaKaLauncherActivity **extends** FragmentActivity \{ 
7.  **private** GuideViewPager vPager; 
8.  **private** List<LauncherBaseFragment> list = **new** ArrayList<LauncherBaseFragment>(); 
9.  **private** BaseFragmentAdapter adapter; 
10. 
11. **private** ImageView\[\] tips; 
12. **private****int** currentSelect; 
13. 
14. @Override
15. **protected****void** onCreate(Bundle savedInstanceState) \{ 
16. **super**.onCreate(savedInstanceState); 
17.  setContentView(R.layout.activity\_luancher\_main); 
18. 
19. //初始化点点点控件
20.  ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup); 
21.  tips = **new** ImageView\[3\]; 
22. **for** (**int** i = 0; i < tips.length; i++) \{ 
23.  ImageView imageView = **new** ImageView(**this**); 
24.  imageView.setLayoutParams(**new** LayoutParams(10, 10)); 
25. **if** (i == 0) \{ 
26.  imageView.setBackgroundResource(R.drawable.page\_indicator\_focused); 
27.  \} **else** \{ 
28.  imageView.setBackgroundResource(R.drawable.page\_indicator\_unfocused); 
29.  \} 
30.  tips\[i\]=imageView; 
31. 
32.  LinearLayout.LayoutParams layoutParams = **new** LinearLayout.LayoutParams(**new** ViewGroup.LayoutParams(LayoutParams.WRAP\_CONTENT,LayoutParams.WRAP\_CONTENT)); 
33.  layoutParams.leftMargin = 20;//设置点点点view的左边距
34.  layoutParams.rightMargin = 20;//设置点点点view的右边距
35.  group.addView(imageView,layoutParams); 
36.  \} 
37. 
38. //获取自定义viewpager 然后设置背景图片
39.  vPager = (GuideViewPager) findViewById(R.id.viewpager\_launcher); 
40.  vPager.setBackGroud(BitmapFactory.decodeResource(getResources(),R.drawable.bg\_kaka\_launcher)); 
41. 
42. /\*\*
43.  \* 初始化三个fragment 并且添加到list中
44.  \*/
45.  RewardLauncherFragment rewardFragment = **new** RewardLauncherFragment(); 
46.  PrivateMessageLauncherFragment privateFragment = **new** PrivateMessageLauncherFragment(); 
47.  StereoscopicLauncherFragment stereoscopicFragment = **new** StereoscopicLauncherFragment(); 
48.  list.add(rewardFragment); 
49.  list.add(privateFragment); 
50.  list.add(stereoscopicFragment); 
51. 
52.  adapter = **new** BaseFragmentAdapter(getSupportFragmentManager(),list); 
53.  vPager.setAdapter(adapter); 
54.  vPager.setOffscreenPageLimit(2); 
55.  vPager.setCurrentItem(0); 
56.  vPager.setOnPageChangeListener(changeListener); 
57.  \} 
58. 
59. /\*\*
60.  \* 监听viewpager的移动
61.  \*/
62.  OnPageChangeListener changeListener=**new** OnPageChangeListener() \{ 
63. @Override
64. **public****void** onPageSelected(**int** index) \{ 
65.  setImageBackground(index);//改变点点点的切换效果
66.  LauncherBaseFragment fragment=list.get(index); 
67. 
68.  list.get(currentSelect).stopAnimation();//停止前一个页面的动画
69.  fragment.startAnimation();//开启当前页面的动画
70. 
71.  currentSelect=index; 
72.  \} 
73. 
74. @Override
75. **public****void** onPageScrolled(**int** arg0, **float** arg1, **int** arg2) \{\} 
76. @Override
77. **public****void** onPageScrollStateChanged(**int** arg0) \{\} 
78.  \}; 
79. 
80. /\*\*
81.  \* 改变点点点的切换效果
82.  \* @param selectItems
83.  \*/
84. **private****void** setImageBackground(**int** selectItems) \{ 
85. **for** (**int** i = 0; i < tips.length; i++) \{ 
86. **if** (i == selectItems) \{ 
87.  tips\[i\].setBackgroundResource(R.drawable.page\_indicator\_focused); 
88.  \} **else** \{ 
89.  tips\[i\].setBackgroundResource(R.drawable.page\_indicator\_unfocused); 
90.  \} 
91.  \} 
92.  \} 
93. \}

2.重写viewpager 在dispatchDraw方法中控制显示的背景图片区域,

**\[java\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* 重写ViewPager 主要做一个切换背景的功能
3.   \* @author ansen
4.   \* @create time 2015-08-07
5.   \*/
6.  **public****class** GuideViewPager **extends** ViewPager \{ 
7.  **private** Bitmap bg; 
8.  **private** Paint b = **new** Paint(1); 
9.  
10. **public** GuideViewPager(Context context) \{ 
11. **super**(context); 
12.  \} 
13. 
14. **public** GuideViewPager(Context context, AttributeSet attrs) \{ 
15. **super**(context, attrs); 
16.  \} 
17. 
18. @Override
19. **protected****void** dispatchDraw(Canvas canvas) \{ 
20. **if** (**this**.bg != **null**) \{ 
21. **int** width = **this**.bg.getWidth(); 
22. **int** height = **this**.bg.getHeight(); 
23. **int** count = getAdapter().getCount(); 
24. **int** x = getScrollX(); 
25. // 子View中背景图片需要显示的宽度，放大背景图或缩小背景图。
26. **int** n = height \* getWidth() / getHeight(); 
27. 
28. /\*\*
29.  \* (width - n) / (count - 1)表示除去显示第一个ViewPager页面用去的背景宽度，剩余的ViewPager需要显示的背景图片的宽度。
30.  \* getWidth()等于ViewPager一个页面的宽度，即手机屏幕宽度。在该计算中可以理解为滑动一个ViewPager页面需要滑动的像素值。
31.  \* ((width - n) / (count - 1)) /getWidth()也就表示ViewPager滑动一个像素时，背景图片滑动的宽度。
32.  \* x \* ((width - n) / (count - 1)) / getWidth()也就表示ViewPager滑动x个像素时，背景图片滑动的宽度。
33.  \* 背景图片滑动的宽度的宽度可以理解为背景图片滑动到达的位置。
34.  \*/
35. **int** w = x \* ((width - n) / (count - 1)) / getWidth(); 
36.  canvas.drawBitmap(**this**.bg, **new** Rect(w, 0, n + w, height), **new** Rect( x, 0, x + getWidth(), getHeight()), **this**.b); 
37.  \} 
38. **super**.dispatchDraw(canvas); 
39.  \} 
40. 
41. **public****void** setBackGroud(Bitmap paramBitmap) \{ 
42. **this**.bg = paramBitmap; 
43. **this**.b.setFilterBitmap(**true**); 
44.  \} 
45. \}

3.主体布局文件 上面放一个自定义的viewpager 下面放一个显示点点的RelativeLayout

**\[html\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****RelativeLayout**xmlns:android="http://schemas.android.com/apk/res/android"
2.  xmlns:tools="http://schemas.android.com/tools"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"**>**
5.  
6.  **<****com.example.view.GuideViewPager**
7.  android:id="@+id/viewpager\_launcher"
8.  android:layout\_width="match\_parent"
9.  android:layout\_height="match\_parent"**/>**
10. 
11. **<****RelativeLayout**
12. android:layout\_width="fill\_parent"
13. android:layout\_height="wrap\_content"
14. android:orientation="vertical"**>**
15. 
16. **<****LinearLayout**
17. android:id="@+id/viewGroup"
18. android:layout\_width="fill\_parent"
19. android:layout\_height="wrap\_content"
20. android:layout\_alignParentBottom="true"
21. android:layout\_marginBottom="30dp"
22. android:gravity="center\_horizontal"
23. android:orientation="horizontal"**/>**
24. **</****RelativeLayout****>**
25. 
26. **</****RelativeLayout****>**

4.ViewPager适配器

**\[java\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* Viewpager适配器
3.   \* @author apple
4.   \*
5.   \*/
6.  **public****class** BaseFragmentAdapter **extends** FragmentStatePagerAdapter \{ 
7.  **private** List<LauncherBaseFragment>list; 
8.  **public** BaseFragmentAdapter(FragmentManager fm, List<LauncherBaseFragment> list) \{ 
9.  **super**(fm); 
10. **this**.list = list; 
11.  \} 
12. 
13. **public** BaseFragmentAdapter(FragmentManager fm) \{ 
14. **super**(fm); 
15.  \} 
16. 
17. @Override
18. **public** Fragment getItem(**int** arg0) \{ 
19. **return** list.get(arg0); 
20.  \} 
21. 
22. @Override
23. **public****int** getCount() \{ 
24. **return** list.size(); 
25.  \} 
26. \}

5.Fragment抽象类 有两个抽象方法,开启动画跟停止动画 所有的Fragment都继承这个类 Viewpager切换的时候可以更好的控制每个Fragment开启动画,结束动画

**\[java\]** [view plain][view plain 1] [copy][view plain 1]

[![在CODE上查看代码片][CODE]][CODE_CODE 1] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 2]

1.  /\*\*
2.   \* Fragment抽象类
3.   \* @author ansen
4.   \* 
5.   \*/
6.  **public****abstract****class** LauncherBaseFragment **extends** Fragment\{ 
7.  **public****abstract****void** startAnimation(); 
8.  **public****abstract****void** stopAnimation(); 
9.  \}

6.打赏页Fragment 三个动画效果 硬币向下移动动画+打赏图片缩放动画+改变打赏图片透明度然后隐藏图片

**\[java\]** [view plain][view plain 1] [copy][view plain 1]

[![在CODE上查看代码片][CODE]][CODE_CODE 1] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 2]

1.  /\*\*
2.   \* 打赏页面
3.   \* @author ansen
4.   \* @create time 2015-08-07
5.   \*/
6.  **public****class** RewardLauncherFragment **extends** LauncherBaseFragment\{ 
7.  **private** ImageView ivReward; 
8.  **private** ImageView ivGold; 
9.  
10. **private** Bitmap goldBitmap; 
11. **private****boolean** started;//是否开启动画(ViewPage滑动时候给这个变量赋值)
12. 
13. @Override
14. **public** View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) \{ 
15.  View rooView=inflater.inflate(R.layout.fragment\_reward\_launcher, **null**); 
16.  ivGold=(ImageView) rooView.findViewById(R.id.iv\_gold); 
17.  ivReward=(ImageView) rooView.findViewById(R.id.iv\_reward); 
18. 
19. //获取硬币的高度
20.  goldBitmap=BitmapFactory.decodeResource(getActivity().getResources(),R.drawable.icon\_gold); 
21.  startAnimation(); 
22. **return** rooView; 
23.  \} 
24. 
25. **public****void** startAnimation()\{ 
26.  started=**true**; 
27. 
28. //向下移动动画 硬币的高度\*2+80 
29.  TranslateAnimation translateAnimation=**new** TranslateAnimation(0,0,0,goldBitmap.getHeight()\*2\+80); 
30.  translateAnimation.setDuration(500); 
31.  translateAnimation.setFillAfter(**true**); 
32. 
33.  ivGold.startAnimation(translateAnimation); 
34.  translateAnimation.setAnimationListener(**new** AnimationListener() \{ 
35. @Override
36. **public****void** onAnimationStart(Animation animation) \{\} 
37. @Override
38. **public****void** onAnimationEnd(Animation animation)\{ 
39. **if**(started)\{ 
40.  ivReward.setVisibility(View.VISIBLE); 
41. //硬币移动动画结束开启缩放动画
42.  Animation anim=AnimationUtils.loadAnimation(getActivity(),R.anim.reward\_launcher); 
43.  ivReward.startAnimation(anim); 
44.  anim.setAnimationListener(**new** AnimationListener()\{ 
45. @Override
46. **public****void** onAnimationStart(Animation animation) \{\} 
47. @Override
48. **public****void** onAnimationRepeat(Animation animation) \{\} 
49. @Override
50. **public****void** onAnimationEnd(Animation animation) \{ 
51. //缩放动画结束 开启改变透明度动画
52.  AlphaAnimation alphaAnimation=**new** AlphaAnimation(1,0); 
53.  alphaAnimation.setDuration(1000); 
54.  ivReward.startAnimation(alphaAnimation); 
55.  alphaAnimation.setAnimationListener(**new** AnimationListener() \{ 
56. @Override
57. **public****void** onAnimationStart(Animation animation) \{\} 
58. @Override
59. **public****void** onAnimationRepeat(Animation animation) \{\} 
60. @Override
61. **public****void** onAnimationEnd(Animation animation) \{ 
62. //透明度动画结束隐藏图片
63.  ivReward.setVisibility(View.GONE); 
64.  \} 
65.  \}); 
66.  \} 
67.  \}); 
68.  \} 
69.  \} 
70. @Override
71. **public****void** onAnimationRepeat(Animation animation) \{\} 
72.  \}); 
73.  \} 
74. 
75. @Override
76. **public****void** stopAnimation()\{ 
77.  started=**false**;//结束动画时标示符设置为false
78.  ivGold.clearAnimation();//清空view上的动画
79.  \} 
80. \}

7.私信页面 四个动画效果 并且四个动画都相同,其实只要我们实现了一个,其他的基本都很容易了. 依次实现四个图片的放大然后还原

**\[java\]** [view plain][view plain 1] [copy][view plain 1]

[![在CODE上查看代码片][CODE]][CODE_CODE 1] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 2]

1.  /\*\*
2.   \* 私信
3.   \* @author ansen
4.   \*/
5.  **public****class** PrivateMessageLauncherFragment **extends** LauncherBaseFragment\{ 
6.  **private** ImageView ivLikeVideo,ivThinkReward,ivThisWeek,ivWatchMovie; 
7.  
8.  **private** Animation likeAnimation,thinkAnimation,watchAnimation,thisWeekAnimation; 
9.  
10. **private****boolean** started;//是否开启动画
11. 
12. @Override
13. **public** View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) \{ 
14.  View rooView=inflater.inflate(R.layout.fragment\_private\_message\_launcher, **null**); 
15. 
16.  ivLikeVideo=(ImageView) rooView.findViewById(R.id.iv\_private\_message\_like\_video); 
17.  ivThinkReward=(ImageView) rooView.findViewById(R.id.iv\_private\_message\_think\_reward); 
18.  ivWatchMovie=(ImageView) rooView.findViewById(R.id.iv\_private\_message\_watch\_movie); 
19.  ivThisWeek=(ImageView) rooView.findViewById(R.id.private\_message\_this\_week); 
20. **return** rooView; 
21.  \} 
22. 
23. **public****void** stopAnimation()\{ 
24. //动画开启标示符设置成false 
25.  started=**false**; 
26. /\*\*
27.  \* 清空所有控件上的动画
28.  \*/
29.  ivLikeVideo.clearAnimation(); 
30.  ivThinkReward.clearAnimation(); 
31.  ivWatchMovie.clearAnimation(); 
32.  ivThisWeek.clearAnimation(); 
33.  \} 
34. 
35. 
36. **public****void** startAnimation()\{ 
37.  started=**true**; 
38. 
39. /\*\*
40.  \* 每次开启动画前先隐藏控件
41.  \*/
42.  ivLikeVideo.setVisibility(View.GONE); 
43.  ivThinkReward.setVisibility(View.GONE); 
44.  ivWatchMovie.setVisibility(View.GONE); 
45.  ivThisWeek.setVisibility(View.GONE); 
46. 
47. **new** Handler().postDelayed(**new** Runnable() \{ //延时0.5秒之后开启喜欢视频动画
48. @Override
49. **public****void** run()\{ 
50. **if**(started) 
51.  likeVideoAnimation(); 
52.  \} 
53.  \},500); 
54.  \} 
55. 
56. /\*\*
57.  \* 好喜欢你的视频
58.  \*/
59. **private****void** likeVideoAnimation()\{ 
60.  ivLikeVideo.setVisibility(View.VISIBLE); 
61. 
62.  likeAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private\_message\_launcher); 
63.  ivLikeVideo.startAnimation(likeAnimation);//开启动画
64.  likeAnimation.setAnimationListener(**new** AnimationListener()\{ 
65. @Override
66. **public****void** onAnimationStart(Animation animation) \{\} 
67. @Override
68. **public****void** onAnimationRepeat(Animation animation) \{\} 
69. @Override
70. **public****void** onAnimationEnd(Animation animation) \{ //监听动画结束
71. **if**(started) 
72.  thinkReward(); 
73.  \} 
74.  \}); 
75.  \} 
76. 
77. /\*\*
78.  \* 谢谢你的打赏
79.  \*/
80. **private****void** thinkReward()\{ 
81.  ivThinkReward.setVisibility(View.VISIBLE); 
82.  thinkAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private\_message\_launcher); 
83.  ivThinkReward.startAnimation(thinkAnimation); 
84.  thinkAnimation.setAnimationListener(**new** AnimationListener()\{ 
85. @Override
86. **public****void** onAnimationStart(Animation animation) \{\} 
87. @Override
88. **public****void** onAnimationRepeat(Animation animation) \{\} 
89. @Override
90. **public****void** onAnimationEnd(Animation animation) \{ 
91. **if**(started) 
92.  watchMovie(); 
93.  \} 
94.  \}); 
95.  \} 
96. 
97. /\*\*
98.  \* 一起看个电影呗
99.  \*/
100. **private****void** watchMovie()\{ 
101.  ivWatchMovie.setVisibility(View.VISIBLE); 
102.  watchAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private\_message\_launcher); 
103.  ivWatchMovie.startAnimation(watchAnimation); 
104.  watchAnimation.setAnimationListener(**new** AnimationListener()\{ 
105. @Override
106. **public****void** onAnimationStart(Animation animation) \{\} 
107. @Override
108. **public****void** onAnimationRepeat(Animation animation) \{\} 
109. @Override
110. **public****void** onAnimationEnd(Animation animation) \{ 
111. **if**(started) 
112.  thisWeek(); 
113.  \} 
114.  \}); 
115.  \} 
116. 
117. /\*\*
118.  \* 好啊 这周末有空
119.  \*/
120. **private****void** thisWeek()\{ 
121.  ivThisWeek.setVisibility(View.VISIBLE); 
122.  thisWeekAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private\_message\_launcher); 
123.  ivThisWeek.startAnimation(thisWeekAnimation); 
124.  \} 
125. \}

8.最后一个引导页 就两个动画 图片的放大跟缩小,其实用xml布局的话一个动画就能搞定,跟私信页面的动画差不多.小伙伴写的代码.这里换了一种方式.代码比较多.

**\[java\]** [view plain][view plain 1] [copy][view plain 1]

[![在CODE上查看代码片][CODE]][CODE_CODE 1] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 2]

1.  /\*\*
2.   \* 最后一个
3.   \* @author apple
4.   \*/
5.  **public****class** StereoscopicLauncherFragment **extends** LauncherBaseFragment **implements** OnClickListener\{ 
6.  **private****static****final****float** ZOOM\_MAX = 1.3f; 
7.  **private****static****final****float** ZOOM\_MIN = 1.0f; 
8.  
9.  **private** ImageView imgView\_immediate\_experience; 
10. 
11. @Override
12. **public** View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) \{ 
13.  View rooView=inflater.inflate(R.layout.fragment\_stereoscopic\_launcher, **null**); 
14.  imgView\_immediate\_experience=(ImageView) rooView.findViewById(R.id.imgView\_immediate\_experience); 
15.  imgView\_immediate\_experience.setOnClickListener(**this**); 
16. **return** rooView; 
17.  \} 
18. 
19. **public****void** playHeartbeatAnimation()\{ 
20. /\*\*
21.  \* 放大动画
22.  \*/
23.  AnimationSet animationSet = **new** AnimationSet(**true**); 
24.  animationSet.addAnimation(**new** ScaleAnimation(ZOOM\_MIN, ZOOM\_MAX, ZOOM\_MIN, ZOOM\_MAX, Animation.RELATIVE\_TO\_SELF, 0.5f, Animation.RELATIVE\_TO\_SELF,0.5f)); 
25.  animationSet.addAnimation(**new** AlphaAnimation(1.0f, 0.8f)); 
26. 
27.  animationSet.setDuration(500); 
28.  animationSet.setInterpolator(**new** AccelerateInterpolator()); 
29.  animationSet.setFillAfter(**true**); 
30. 
31.  animationSet.setAnimationListener(**new** AnimationListener() \{ 
32. @Override
33. **public****void** onAnimationStart(Animation animation) \{ 
34.  \} 
35. 
36. @Override
37. **public****void** onAnimationRepeat(Animation animation) \{ 
38.  \} 
39. 
40. @Override
41. **public****void** onAnimationEnd(Animation animation) \{ 
42. /\*\*
43.  \* 缩小动画
44.  \*/
45.  AnimationSet animationSet = **new** AnimationSet(**true**); 
46.  animationSet.addAnimation(**new** ScaleAnimation(ZOOM\_MAX, ZOOM\_MIN, ZOOM\_MAX,ZOOM\_MIN, Animation.RELATIVE\_TO\_SELF, 0.5f,Animation.RELATIVE\_TO\_SELF, 0.5f)); 
47.  animationSet.addAnimation(**new** AlphaAnimation(0.8f, 1.0f)); 
48.  animationSet.setDuration(600); 
49.  animationSet.setInterpolator(**new** DecelerateInterpolator()); 
50.  animationSet.setFillAfter(**false**); 
51. // 实现心跳的View
52.  imgView\_immediate\_experience.startAnimation(animationSet); 
53.  \} 
54.  \}); 
55. // 实现心跳的View
56.  imgView\_immediate\_experience.startAnimation(animationSet); 
57.  \} 
58. 
59. @Override
60. **public****void** onClick(View v) \{ 
61. // Intent intent = new Intent();
62. // intent.setClass(getActivity(),MainActivity.class);
63. // startActivity(intent);
64. // getActivity().finish();
65.  \} 
66. 
67. @Override
68. **public****void** startAnimation() \{ 
69.  playHeartbeatAnimation(); 
70.  \} 
71. 
72. @Override
73. **public****void** stopAnimation() \{ 
74. 
75.  \} 
76. \}

最后总结:以上就是三个引导页的核心代码了,还有一些布局文件,动画效果的布局文件我就不一一贴出来的,大家可以去下载我的源码,在这个过程中碰到的几个大的问题说明一下.

1.viewpager切换的时候要结束上个fragment的动画 我是通过boolean变量去控制的

2.背景图片移动的效果 之前自己走了很多弯路,后面在网上找了一个demo拿过来用了.因为大家都有开源精神所以这里省了很多功夫

3.图片放大缩小以前居然不知道一个xml动画布局就能搞定.之前一直想办法用两个动画实现

[demo下载][demo]

[20150827235112507]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b4e2d8e5399043179bffd8567df5eed0.png
[.NET]: http://lib.csdn.net/base/dotnet
[view plain]: http://blog.csdn.net/jdsjlzx/article/details/50689913#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1582023
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1582023/fork
[view plain 1]: http://blog.csdn.net/lowprofile_coding/article/details/48037095#
[CODE_CODE 1]: https://code.csdn.net/snippets/1567043
[ico_fork.svg 2]: https://code.csdn.net/snippets/1567043/fork
[demo]: http://download.csdn.net/detail/onceing/9732103