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

前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦逼有木有,在这个过程中也学到了蛮多东西的,所以写一篇博客跟大家分享一下.

 

先看效果图:

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

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

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

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. public GuideViewPager(Context context) {
10. super(context);
11. }
12. public GuideViewPager(Context context, AttributeSet attrs) {
13. super(context, attrs);
14. }
15. @Override
16. protected void dispatchDraw(Canvas canvas) {
17. if (this.bg != null) {
18. int width = this.bg.getWidth();
19. int height = this.bg.getHeight();
20. int count = getAdapter().getCount();
21. int x = getScrollX();
22. // 子View中背景图片需要显示的宽度，放大背景图或缩小背景图。
23. int n = height * getWidth() / getHeight();
24. /**
25. * (width - n) / (count - 1)表示除去显示第一个ViewPager页面用去的背景宽度，剩余的ViewPager需要显示的背景图片的宽度。
26. * getWidth()等于ViewPager一个页面的宽度，即手机屏幕宽度。在该计算中可以理解为滑动一个ViewPager页面需要滑动的像素值。
27. * ((width - n) / (count - 1)) /getWidth()也就表示ViewPager滑动一个像素时，背景图片滑动的宽度。
28. * x * ((width - n) / (count - 1)) /  getWidth()也就表示ViewPager滑动x个像素时，背景图片滑动的宽度。
29. * 背景图片滑动的宽度的宽度可以理解为背景图片滑动到达的位置。
30. */
31. int w = x * ((width - n) / (count - 1)) / getWidth();
32. canvas.drawBitmap(this.bg, new Rect(w, 0, n + w, height), new Rect( x, 0, x + getWidth(), getHeight()), this.b);
33. }
34. super.dispatchDraw(canvas);
35. }
36. public void setBackGroud(Bitmap paramBitmap) {
37. this.bg = paramBitmap;
38. this.b.setFilterBitmap(true);
39. }
40. }

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

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. <com.example.view.GuideViewPager
6. android:id="@+id/viewpager_launcher"
7. android:layout_width="match_parent"
8. android:layout_height="match_parent" />
9. <RelativeLayout
10. android:layout_width="fill_parent"
11. android:layout_height="wrap_content"
12. android:orientation="vertical" >
13. <LinearLayout
14. android:id="@+id/viewGroup"
15. android:layout_width="fill_parent"
16. android:layout_height="wrap_content"
17. android:layout_alignParentBottom="true"
18. android:layout_marginBottom="30dp"
19. android:gravity="center_horizontal"
20. android:orientation="horizontal" />
21. </RelativeLayout>
22. </RelativeLayout>

4.ViewPager适配器

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. public BaseFragmentAdapter(FragmentManager fm) {
13. super(fm);
14. }
15. @Override
16. public Fragment getItem(int arg0) {
17. return list.get(arg0);
18. }
19. @Override
20. public int getCount() {
21. return list.size();
22. }
23. }

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

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  三个动画效果  硬币向下移动动画+打赏图片缩放动画+改变打赏图片透明度然后隐藏图片

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

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

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

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

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. private ImageView imgView_immediate_experience;
9. @Override
10. public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
11. View rooView=inflater.inflate(R.layout.fragment_stereoscopic_launcher, null);
12. imgView_immediate_experience=(ImageView) rooView.findViewById(R.id.imgView_immediate_experience);
13. imgView_immediate_experience.setOnClickListener(this);
14. return rooView;
15. }
16. public void playHeartbeatAnimation(){
17. /**
18. * 放大动画
19. */
20. AnimationSet animationSet = new AnimationSet(true);
21. animationSet.addAnimation(new ScaleAnimation(ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f));
22. animationSet.addAnimation(new AlphaAnimation(1.0f, 0.8f));
23. animationSet.setDuration(500);
24. animationSet.setInterpolator(new AccelerateInterpolator());
25. animationSet.setFillAfter(true);
26. animationSet.setAnimationListener(new AnimationListener() {
27. @Override
28. public void onAnimationStart(Animation animation) {
29. }
30. @Override
31. public void onAnimationRepeat(Animation animation) {
32. }
33. @Override
34. public void onAnimationEnd(Animation animation) {
35. /**
36. * 缩小动画
37. */
38. AnimationSet animationSet = new AnimationSet(true);
39. animationSet.addAnimation(new ScaleAnimation(ZOOM_MAX, ZOOM_MIN, ZOOM_MAX,ZOOM_MIN, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f));
40. animationSet.addAnimation(new AlphaAnimation(0.8f, 1.0f));
41. animationSet.setDuration(600);
42. animationSet.setInterpolator(new DecelerateInterpolator());
43. animationSet.setFillAfter(false);
44. // 实现心跳的View
45. imgView_immediate_experience.startAnimation(animationSet);
46. }
47. });
48. // 实现心跳的View
49. imgView_immediate_experience.startAnimation(animationSet);
50. }
51. @Override
52. public void onClick(View v) {
53. //      Intent intent = new Intent();
54. //      intent.setClass(getActivity(),MainActivity.class);
55. //      startActivity(intent);
56. //      getActivity().finish();
57. }
58. @Override
59. public void startAnimation() {
60. playHeartbeatAnimation();
61. }
62. @Override
63. public void stopAnimation() {
64. }
65. }

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

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

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

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

看看时间一篇博客写了一个半小时,都12点了,办公室一个人敲打着键盘,记录着这两天做过的东西,才发现这也是一件很惬意的事情。。。。闪人。。。回家.
推荐下自己创建的android QQ群:202928390 欢迎大家的加入.

点击下载源码

如果你想第一时间看我们的后期文章，扫码关注公众号，每个周末都会推送Android开发实战教程一篇，其余时间我们会推出一些互联网行业新闻，你还等什么，赶快关注吧，既能学到技术，还能长逼格，出任ceo，赢取白富美。。。。。