Android animation and overview mainly covers the following contents:
- Animation and transition (I). Overview and use of view animation
- Animation and transition (II). Advanced view Animation: extend the definition of animation
- Animation and transition (III), interpolator and estimator overview and use
- Animation and transition (IV). Use Layout, offset and layoutParam to realize displacement animation
- Animation and transition (V). Use scrollTo, scrollBy and Scroller to realize scrolling animation
- Animation and transition (VI). Use ViewDragHelper to realize smooth drag animation
- Animation and transition (VII). Adding entry animation for ViewGroup and overview of LayoutAnimation
- Animation and transition (VIII). Provide deletion and new smooth animation effects for Viewgroup, and overview of LayoutTransition
- Animation and transition (IX). Overview of Svg animation, Vector Drawable and tripartite SVGA framework
- Animation and transition (x). Overview of the use of Property Animation animation
- Animation and transition (XI). Using Fling animation to move the view, overview of using Fling animation animation
- Animation and transition (XII). Use physical spring animation to add animation to the view. Overview of the use of spring animation animation
- Animation and transition (XIII), view, Activity transition animation overview
- Animation and transition (XIV). Overview of Lottie animation
- Animation and transition actual combat (XV). Drag sorting effect of imitating today's headlines
- Animation and transition practice (XVI), imitation IOS sideslip deletion effect
- Animation and transition actual combat (17), imitation card flop effect
This article has some fun effects. Remember the previous view animation? Previously, the effects we controlled were all for a single view. If you want to use the same animation effect for a group of views, you need to use the LayoutAnimationController at this time.
LayoutAnimationController introduction:
Android Developer LayoutAnimationController docment
- LayoutAnimationController is used to animate the controls in a layout or a ViewGroup (that is, the whole layout)
- Each control has the same animation effect
- The animation effects of these controls can be displayed at different times
LayoutAnimationController is very simple to use
xml direct use
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="0.1" //Represents the delay of animation playback, which can be either a percentage or a float decimal. android:animationOrder="reverse" //Represents the playback order of the animation, //There are three values: normal, reverse and random. android:animation="@anim/animation" //Points to the animation to be played by the child control />
Then configure the defined animation into the layout of ViewGroup.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/llViewGroupContainer" android:layout_width="match_parent" android:layout_height="match_parent" android:layoutAnimation="@anim/list_anim_layout" android:background="@android:color/white" android:orientation="vertical"> <TextView ... </LinearLayout>
Configuration and use in code
val layoutAnimationController = LayoutAnimationController(LayoutAnimationHelper.getAnimationSetFromRight()) layoutAnimationController.delay= 0.1F layoutAnimationController.order = LayoutAnimationController.ORDER_NORMAL llViewGroupContainer.layoutAnimation = layoutAnimationController llViewGroupContainer.scheduleLayoutAnimation()
/** * Enter from the right with flexible animation * * @return */ public static AnimationSet getAnimationSetFromRight() { AnimationSet animationSet = new AnimationSet(true); TranslateAnimation translateX1 = new TranslateAnimation(RELATIVE_TO_SELF, 1.0f, RELATIVE_TO_SELF, -0.1f, RELATIVE_TO_SELF, 0, RELATIVE_TO_SELF, 0); translateX1.setDuration(300); translateX1.setInterpolator(new DecelerateInterpolator()); translateX1.setStartOffset(0); TranslateAnimation translateX2 = new TranslateAnimation(RELATIVE_TO_SELF, -0.1f, RELATIVE_TO_SELF, 0.1f, RELATIVE_TO_SELF, 0, RELATIVE_TO_SELF, 0); translateX2.setStartOffset(300); translateX2.setInterpolator(new DecelerateInterpolator()); translateX2.setDuration(50); TranslateAnimation translateX3 = new TranslateAnimation(RELATIVE_TO_SELF, 0.1f, RELATIVE_TO_SELF, 0f, RELATIVE_TO_SELF, 0, RELATIVE_TO_SELF, 0); translateX3.setStartOffset(350); translateX3.setInterpolator(new DecelerateInterpolator()); translateX3.setDuration(50); AlphaAnimation alphaAnimation = new AlphaAnimation(0.5f, 1.0f); alphaAnimation.setDuration(400); alphaAnimation.setInterpolator(new AccelerateDecelerateInterpolator()); animationSet.addAnimation(translateX1); animationSet.addAnimation(translateX2); animationSet.addAnimation(translateX3); animationSet.addAnimation(alphaAnimation); animationSet.setDuration(400); return animationSet; }
Here are the effects
In order to make the effect clearer when you watch, the video is played slowly. You can see whether there is rebound effect or cool. For recyclerView, you can also use LayoutAnimationController to achieve similar effects.
//Add animation to RecyclerView val layoutAnimationController = LayoutAnimationController(LayoutAnimationHelper.getAnimationSetFromRight()) layoutAnimationController.delay = 0.1F layoutAnimationController.order = LayoutAnimationController.ORDER_NORMAL rvContentList.layoutAnimation = layoutAnimationController
You can see that the animation is executed in sequence. In ViewGroup and RecyclerView, it is executed in sequence. However, if it is GridView or RecyclerView#gridlayoutmanager, we may want to realize the animation effect along the diagonal direction instead of one by one. You need to customize the execution direction of the animation. The LayoutAnimationController animation execution direction modification is also very simple. You only need to override the viewgroup#protected void attachlayoutanimationparameters (view child, layoutparameters, params, int index, int count) method.
The following is the code to realize diagonal animation effect for RecycleView#GridLayoutManager
public class GridRecyclerView extends RecyclerView { /** @see View#View(Context) */ public GridRecyclerView(Context context) { super(context); } /** @see View#View(Context, AttributeSet) */ public GridRecyclerView(Context context, AttributeSet attrs) { super(context, attrs); } /** @see View#View(Context, AttributeSet, int) */ public GridRecyclerView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override protected void attachLayoutAnimationParameters(View child, ViewGroup.LayoutParams params, int index, int count) { final LayoutManager layoutManager = getLayoutManager(); if (getAdapter() != null && layoutManager instanceof GridLayoutManager){ GridLayoutAnimationController.AnimationParameters animationParams = (GridLayoutAnimationController.AnimationParameters) params.layoutAnimationParameters; if (animationParams == null) { // If there are no animation parameters, create new once and attach them to // the LayoutParams. animationParams = new GridLayoutAnimationController.AnimationParameters(); params.layoutAnimationParameters = animationParams; } // Next we are updating the parameters // Set the number of items in the RecyclerView and the index of this item animationParams.count = count; animationParams.index = index; // Calculate the number of columns and rows in the grid final int columns = ((GridLayoutManager) layoutManager).getSpanCount(); animationParams.columnsCount = columns; animationParams.rowsCount = count / columns; // Calculate the column/row position in the grid final int invertedIndex = count - 1 - index; animationParams.column = columns - 1 - (invertedIndex % columns); animationParams.row = animationParams.rowsCount - 1 - invertedIndex / columns; } else { // Proceed as normal if using another type of LayoutManager super.attachLayoutAnimationParameters(child, params, index, count); } } }
There is no difference between the use and the previous use. Let's look at the effect. The order of animation execution is still very different.
