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

2022-06-17 02:42:04

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

 

先看效果图:

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

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，赢取白富美。。。。。 
app引导页(背景图片切换加各个页面动画效果)

上一篇：Kiwi Syslog安装笔记


下一篇：关于js浅拷贝与深拷贝的理解