App boot page (background image switching and page animation effects ),

App boot page (background image switching and page animation effects ),

Unconsciously, I worked overtime until and spent more than a day on the entire startup page. There were three pages in total, each with an animated effect, debugging of animation effects is troublesome. It must be consistent with ios and match different mobile phones. Then, the product manager may change the demand in the middle of the process, and programmers may make a lot of effort, I learned a lot in this process, so I wrote a blog to share with you.

First look:

1. the Activity that displays the three pages is loaded with three fragment implementations using view pager, the control point is switched over, the view pager switchover is monitored, the start and end of the fragment animation is controlled, and the view pager is rewritten, this allows you to move background images.

/*** Main Activity ** @ author ansen * @ create time 2015-08-07 */public class KaKaLauncherActivity extends FragmentActivity {private GuideViewPager vPager; private List <LauncherBaseFragment> list = new ArrayList <LauncherBaseFragment> (); private BaseFragmentAdapter adapter; private ImageView [] tips; private int currentSelect; @ jsonvoid onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_luancher_main); // initialize the point control ViewGroup group = (ViewGroup) findViewById (R. id. viewGroup); tips = new ImageView [3]; for (int I = 0; I <tips. length; I ++) {ImageView imageView = new ImageView (this); imageView. setLayoutParams (new LayoutParams (10, 10); if (I = 0) {imageView. setBackgroundResource (R. drawable. page_indicator_focused);} else {imageView. setBackgroundResource (R. drawable. page_indicator_unfocused);} tips [I] = imageView; LinearLayout. layoutParams layoutParams = new LinearLayout. layoutParams (new ViewGroup. layoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT); layoutParams. leftMargin = 20; // set the left margin of the dot view to layoutParams. rightMargin = 20; // set the right margin of the dot view to the group. addView (imageView, layoutParams);} // get custom viewpager and set the background image vPager = (GuideViewPager) findViewById (R. id. viewpager_launcher); vPager. setBackGroud (BitmapFactory. decodeResource (getResources (), R. drawable. bg_kaka_launcher);/*** initialize three fragment and add it to the list */RewardLauncherFragment rewardFragment = new RewardLauncherFragment (); export privateFragment = new release (); stereoscopicLauncherFragment stereoscopicFragment = new StereoscopicLauncherFragment (); list. add (rewardFragment); list. add (privateFragment); list. add (stereoscopicFragment); adapter = new BaseFragmentAdapter (getSupportFragmentManager (), list); vPager. setAdapter (adapter); vPager. setOffscreenPageLimit (2); vPager. setCurrentItem (0); vPager. listener (changeListener);}/*** listens to the movement of viewpager */OnPageChangeListener changeListener = new OnPageChangeListener () {@ Overridepublic void onPageSelected (int index) {setImageBackground (index ); // change the point-by-point switching effect LauncherBaseFragment fragment = list. get (index); list. get (currentSelect ). stopAnimation (); // stop the fragment of the previous page. startAnimation (); // enable the animation currentSelect = index;} @ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0) {}};/*** change the point switching effect * @ param selectItems */private void setImageBackground (int selectItems) {for (int I = 0; I <tips. length; I ++) {if (I = selectItems) {tips [I]. setBackgroundResource (R. drawable. page_indicator_focused);} else {tips [I]. setBackgroundResource (R. drawable. page_indicator_unfocused );}}}}

2. Override viewpager to control the area of the displayed background image in the dispatchDraw method,

/*** Override ViewPager mainly implements the background switching function * @ author ansen * @ create time 2015-08-07 */public class GuideViewPager extends ViewPager {private Bitmap bg; private Paint B = new Paint (1); public GuideViewPager (Context context) {super (context);} public GuideViewPager (Context context, AttributeSet attrs) {super (context, attrs) ;}@ Overrideprotected void dispatchDraw (Canvas canvas) {if (this. bg! = Null) {int width = this. bg. getWidth (); int height = this. bg. getHeight (); int count = getAdapter (). getCount (); int x = getScrollX (); // The width of the background image to be displayed in the sub-View to enlarge the background image or reduce the background image. Int n = height * getWidth ()/getHeight ();/*** (width-n)/(count-1) this parameter is used to remove the background width used to display the first ViewPager page, and the width of the background image to be displayed for the remaining ViewPager. * GetWidth () is equal to the width of a page of ViewPager, that is, the screen width of the mobile phone. In this calculation, it can be understood as the pixel value to be slide when sliding a ViewPager page. * (Width-n)/(count-1)/getWidth () indicates the sliding width of the background image when the ViewPager slides a pixel. * X * (width-n)/(count-1)/getWidth () indicates the sliding width of the background image when ViewPager slides x pixels. * The width of the sliding width of a background image can be understood as the position at which the background image slides. */Int w = x * (width-n)/(count-1)/getWidth (); canvas. drawBitmap (this. bg, new Rect (w, 0, n + w, height), new Rect (x, 0, x + getWidth (), getHeight (), this. b);} super. dispatchDraw (canvas);} public void setBackGroud (Bitmap paramBitmap) {this. bg = paramBitmap; this. b. setFilterBitmap (true );}}

3. Put a custom viewpager on the top of the main layout file and put a RelativeLayout with a dot.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.example.view.GuideViewPager        android:id="@+id/viewpager_launcher"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <LinearLayout            android:id="@+id/viewGroup"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="30dp"            android:gravity="center_horizontal"            android:orientation="horizontal" />    </RelativeLayout></RelativeLayout>

4. ViewPager Adapter

/*** Viewpager adapter ** @ author apple **/public class BaseFragmentAdapter extends {private List <LauncherBaseFragment> list; public BaseFragmentAdapter (FragmentManager fm, List <LauncherBaseFragment> list) {super (fm); this. list = list;} public BaseFragmentAdapter (FragmentManager fm) {super (fm) ;}@ Overridepublic Fragment getItem (int arg0) {return list. get (arg0) ;}@ Overridepublic int getCount () {return list. size ();}}

5. The Fragment abstract class has two Abstract METHODS: Enable the animation and stop the animation. All Fragment inherits this class. When switching the Viewpager class, you can better control each Fragment. Enable the animation and end the animation.

/*** Fragment abstract class ** @ author ansen **/public abstract class LauncherBaseFragment extends Fragment {public abstract void startAnimation (); public abstract void stopAnimation ();}

6. Play the page Fragment three animation effects coins move down the animation + play the image zoom animation + change the transparency of the image and then hide the image

/*** Reward page ** @ author ansen * @ create time 2015-08-07 */public class RewardLauncherFragment extends LauncherBaseFragment {private ImageView ivReward; private ImageView ivGold; private Bitmap goldBitmap; boolean private started; // whether to enable the animation (assign a value to this variable when the ViewPage slides) @ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View rooView = inflater. inflate (R. layout. fragment_reward_launcher, null); ivGold = (ImageView) rooView. findViewById (R. id. iv_gold); ivReward = (ImageView) rooView. findViewById (R. id. iv_reward); // get the height of the coin goldBitmap = BitmapFactory. decodeResource (getActivity (). getResources (), R. drawable. icon_gold); startAnimation (); return rooView;} public void startAnimation () {started = true; // move down the height of the animated coin * 2 + 80 TranslateAnimation translateAnimation = new TranslateAnimation (, 0, goldBitmap. getHeight () * 2 + 80); translateAnimation. setDuration (500); translateAnimation. setFillAfter (true); ivGold. startAnimation (translateAnimation); translateAnimation. setAnimationListener (new AnimationListener () {@ Overridepublic void onAnimationStart (Animation animation) {}@ Overridepublic void onAnimationEnd (Animation animation) {if (started) {ivReward. setVisibility (View. VISIBLE); // enable the scaling Animation after the coin movement Animation ends. Animation anim = AnimationUtils. loadAnimation (getActivity (), R. anim. reward_launcher); ivReward. startAnimation (anim); anim. configure (new AnimationListener () {@ Override public void onAnimationStart (Animation animation) {}@ Override public void Merge (Animation animation) {// enable the change transparency animation after the zoom animation ends. AlphaAnimation alphaAnimation = new AlphaAnimation (); alphaAnimation. setDuration (1000); ivReward. startAnimation (alphaAnimation); alphaAnimation. configure (new AnimationListener () {@ Overridepublic void onAnimationStart (Animation animation) {}@ Overridepublic void Merge (Animation animation) {// hide the image ivReward after the opacity animation ends. setVisibility (View. GONE) ;}}) ;}@ Overridepublic void onAnimationRepeat (Animation animation) {}}) ;}@ Overridepublic void stopAnimation () {started = false; // set the identifier to falseivGold when the animation ends. clearAnimation (); // clear the animation on The view }}

7. The four animation effects of the private email page are the same as those of the four animations. In fact, as long as we implement one, it is easy for others to zoom in and restore the four images in sequence.

/*** Private message ** @ author ansen */public class extends attributes {private ImageView ivLikeVideo, ivThinkReward, ivThisWeek, ivWatchMovie; private Animation likeAnimation, region, watchAnimation, and region; private boolean started; // whether to enable the animation @ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View rooView = inflater. inflate (R. layout. fragment_private_message_launcher, null); ivLikeVideo = (ImageView) rooView. findViewById (R. id. iv_private_message_like_video); ivThinkReward = (ImageView) rooView. findViewById (R. id. iv_private_message_think_reward); ivWatchMovie = (ImageView) rooView. findViewById (R. id. iv_private_message_watch_movie); ivThisWeek = (ImageView) rooView. findViewById (R. id. private_message_this_week); return rooView;} public void stopAnimation () {// set the Enable identifier of the animation to false started = false;/*** clear the animation on all controls */ivLikeVideo. clearAnimation (); ivThinkReward. clearAnimation (); ivWatchMovie. clearAnimation (); ivThisWeek. clearAnimation ();} public void startAnimation () {started = true;/*** hide the control */ivLikeVideo before enabling the animation. setVisibility (View. GONE); ivThinkReward. setVisibility (View. GONE); ivWatchMovie. setVisibility (View. GONE); ivThisWeek. setVisibility (View. GONE); new Handler (). postDelayed (new Runnable () {// enable the favorite video animation after 0.5 seconds of delay @ Overridepublic void run () {if (started) likeVideoAnimation () ;}, 500 );} /*** your video */private void likeVideoAnimation () {ivLikeVideo. setVisibility (View. VISIBLE); likeAnimation = AnimationUtils. loadAnimation (getActivity (), R. anim. private_message_launcher); ivLikeVideo. startAnimation (likeAnimation); // enable the animation likeAnimation. configure (new AnimationListener () {@ Override public void onAnimationStart (Animation animation) {}@ Override public void Merge (Animation animation) {// listen to the animation end if (started) thinkReward () ;}});}/*** thank you for your reward */private void thinkReward () {ivThinkReward. setVisibility (View. VISIBLE); thinkAnimation = AnimationUtils. loadAnimation (getActivity (), R. anim. private_message_launcher); ivThinkReward. startAnimation (thinkAnimation); thinkAnimation. configure (new AnimationListener () {@ Override public void onAnimationStart (Animation animation) {}@ Override public void Merge (Animation animation) {if (started) watchMovie () ;}}) ;}/ *** watch a movie together */private void watchMovie () {ivWatchMovie. setVisibility (View. VISIBLE); watchAnimation = AnimationUtils. loadAnimation (getActivity (), R. anim. private_message_launcher); ivWatchMovie. startAnimation (watchAnimation); watchAnimation. configure (new AnimationListener () {@ Override public void onAnimationStart (Animation animation) {}@ Override public void Merge (Animation animation) {if (started) thisWeek () ;}}) ;}/ *** yes, this weekend is free */private void thisWeek () {ivThisWeek. setVisibility (View. VISIBLE); thisWeekAnimation = AnimationUtils. loadAnimation (getActivity (), R. anim. private_message_launcher); ivThisWeek. startAnimation (thisWeekAnimation );}}

8. the last boot page zooms in and out two animated images. In fact, an animation can be used for xml layout, which is similar to the animation on the private letter page. code written by a partner. here is another method. there are many codes.

/*** Last @ author apple */public class extends LauncherBaseFragment implements OnClickListener {private static final float ZOOM_MAX = 1.3f; private static final float ZOOM_MIN = 1.0f; private ImageView listener; @ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View rooView = inflater. inflate (R. layout. fragment_stereoscopic_launcher, null); imgView_immediate_experience = (ImageView) rooView. findViewById (R. id. imgView_immediate_experience); outputs (this); return rooView;} public void playHeartbeatAnimation () {/*** zoom in animation */AnimationSet animationSet = new AnimationSet (true); animationSet. addAnimation (new ScaleAnimation (ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f); animationSet. addAnimation (new AlphaAnimation (1.0f, 0.8f); animationSet. setDuration (500); animationSet. setInterpolator (new AccelerateInterpolator (); animationSet. setFillAfter (true); animationSet. configure (new AnimationListener () {@ Override public void onAnimationStart (Animation animation) {}@ Override public void Merge (Animation animation) {/*** zoom out animation */AnimationSet animationSet = new AnimationSet (true); animationSet. addAnimation (new ScaleAnimation (ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f); animationSet. addAnimation (new AlphaAnimation (0.8f, 1.0f); animationSet. setDuration (600); animationSet. setInterpolator (new DecelerateInterpolator (); animationSet. setFillAfter (false); // View progress (animationSet);} @ Overridepublic void onClick (View v) {// Intent intent = new Intent (); // intent. setClass (getActivity (), MainActivity. class); // startActivity (intent); // getActivity (). finish () ;}@ Overridepublic void startAnimation () {playHeartbeatAnimation () ;}@ Overridepublic void stopAnimation (){}}

Conclusion: The above is the core code of the three boot pages. There are some layout files. I will not post the layout files of the animation effect. You can download my source code, several major problems encountered in this process are described.

1. When viewpager is switched, the animation of the last fragment will be ended. I used the boolean variable to control the animation.

2. I had a lot of detours before the effects of background image movement. I found a demo on the Internet and used it later. Because everyone has the Open Source spirit, I have saved a lot of effort here.

3. You can zoom in or out an xml animation layout without knowing it. You have been trying to use two animations before.

I 've been writing a blog for an hour and a half, and it's 12 o'clock. The Office is hitting the keyboard and recording what I 've done in the past two days, this is also a pleasant thing to discover .... Pop-up... Go home.

Click to download source code

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.