Add page switching animation to avoid cold start

Add page switching animation to avoid cold start

When the Android app is started, the page is displayed directly, which is calledCold Start (Cold Start)To enhance the user experience, you can add control animations to make the startup page more interesting and easier for users to accept. This improves the user experience of the application.

The following describes two startup methods:Center Animation, One isReserved location.
Center Animation: displays controls gradually with animation effects, such as displacement, gradient, scaling, etc.
Reserved position: changes the position and size of the control until matching, such as collapse and slide.

GitHub of this Article

Animation Effect

1. Center Animation

Three animation modes can be used to display controls,Shift \ gradient \ ScalingCan be used independently or in combination. The core class is* ViewCompat *.

Displacement: Controls the y-axis distance and moves up 300 pixels.

// Move ViewCompat. animate (mIvLogo). translationY (-300). setStartDelay (STARTUP_DELAY). setDuration (ANIM_ITEM_DURATION). setInterpolator (new duration (1.2f). start ();

Gradient: The default Alpha value is 0, the gradient is 1, and 50 pixels are moved.

                viewAnimator = ViewCompat.animate(v)                        .translationY(50).alpha(1)                        .setStartDelay((ITEM_DELAY * i) + 500)                        .setDuration(1000);

Zoom: ScaleX and scaleY are changed from 0 to 1.

                viewAnimator = ViewCompat.animate(v)                        .scaleY(1).scaleX(1)                        .setStartDelay((ITEM_DELAY * i) + 500)                        .setDuration(500);

Note:SetStartDelayDelayed start animation,SetDurationAnimation duration.

2. Reserved location

During the display of the control, the position and size can be changed. The animation effect can be collapsed or slide. The collapse effect is the same as that of CollapsingToolbarLayout. Through the code in this article, we can understand the implementation principle.

Collapse: Use* ValueAnimator *Change the height of the Toolbar and start other animations at the end.

// Toolbar collapsed into ActionBar private void collapseToolbar (int height) {TypedValue TV = new TypedValue (); getTheme (). resolveAttribute (android. r. attr. actionBarSize, TV, true); int toolBarHeight = TypedValue. complexToDimensionPixelSize (TV. data, getResources (). getDisplayMetrics (); ValueAnimator valueAnimator = ValueAnimator. ofInt (height, toolBarHeight); // animated valueAnimator. addUpdateListener (animation-> {ViewGroup. layoutParams lp = mTToolbar. getLayoutParams (); lp. height = (Integer) animation. getAnimatedValue (); mTToolbar. setLayoutParams (lp) ;}); valueAnimator. start (); valueAnimator. addListener (new AnimatorListenerAdapter () {@ Override public void onAnimationEnd (Animator animation) {super. onAnimationEnd (animation); mPhRecyclerAdapter. setItems (ModelItem. getFakeItems (); ViewCompat. animate (mFabBar ). setStartDelay (500 ). setDuration (500 ). scaleX (1 ). scaleY (1 ). start ();}});}

Incremental: When loading the list, use the animation effect and slide the cards one by one.

// List Adapter public static class PhRecyclerAdapter extends RecyclerView. Adapter
  
   
{Private final ArrayList
   
    
MItems = new ArrayList <> (); // data public void setItems (List
    
     
Items) {// key bit for starting the animation. Add the animation effect int pos = getItemCount (); mItems. addAll (items); policyitemrangeinserted (pos, mItems. size () ;}@ Override public PhViewHolder onCreateViewHolder (ViewGroup parent, int viewType) {View v = LayoutInflater. from (parent. getContext ()). inflate (R. layout. item_card, parent, false); return new PhViewHolder (v) ;}@ Override public void onBindViewHolder (PhViewHolder holder, int position) {holder. bindTo (mItems. get (position) ;}@ Override public int getItemCount () {return mItems. size ();} // data storage public static class PhViewHolder extends RecyclerView. viewHolder {@ Bind (R. id. item_ TV _title) TextView mTvTitle; @ Bind (R. id. item_iv_image) ImageView mIvImage; private Context mContext; public PhViewHolder (View itemView) {super (itemView); ButterKnife. bind (this, itemView); mContext = itemView. getContext (). getApplicationContext ();} public void bindTo (ModelItem item) {Picasso. with (mContext ). load (item. getImgId ()). into (mIvImage); mTvTitle. setText (item. getName ());}}}
    
   
  

Note:Yyitemrangeinserted (pos, mItems. size ());Make sure the animation effect is single.
Set the Item animation of the RecyclerView:MRvRecycler. setItemAnimator (...);

Starting an animation can enhance the attractiveness of the application, but not all pages need to start the animation. You also need to analyze it based on the actual situation and hand it over to UE \ UX. Programmers only need to provide these optional skills.