In Material Design, users can interact with the app to feedback their actions and behaviors and provide visual coherence. The Material theme provides some default animations for the transition of controls and Activity, and on Android L, it allows customization of these animations:
Touch feedback
Circular Reveal
Curved motion
View state changes View state changes
Vector Drawables Vector Animation
Activity transitions
Touch Feedback
Touch feedback refers to a visual interaction when the user touches the control. Before Android L, it is usually highlighted by press color changes, but because it is an instant change effect, it is not as vivid as the animation.
In Android L, the RippleDrawable class is used, using a water ripple diffusion effect to transition between two different states.
Applications that use Material Design styles, buttons have this effect by default. In addition to the default effects, the system also provides two other effects. We only specify the background of the button as:
?android:attr/selectableItemBackground`
?android:attr/selectableItemBackgroundBorderless`
Any view is clickable, RippleDrawable can be used to achieve the water ripple effect.
We can also adjust the animation color by setting the color attribute of RippleDrawable. The default color of the system is the theme's attribute color:
android:colorControlHighlight, so we can modify the default water ripple color uniformly by modifying this color value. android:colorAccent can modify the selected color of checkbox. For more color settings, please refer to the topic.
The three touch feedbacks of the system are all built through XML, and the content is as follows:
default:
<ripplexmlns:andro android:color="?android:attr/colorControlHighlight"> <item> <inset android:insetLeft="4dp" android:insetTop="6dp" android:insetRight="4dp" android:insetBottom="6dp"> <shape android:shape="rectangle"> <corners android:radius="2dp"/> <solid android:color="?android:attr/colorButtonNormal"/> <padding android:left="8dp" android:top="4dp" android:right="8dp" android:bottom="4dp"/> </shape> </inset> </item> </ripple>
?android:attr/selectableItemBackground
<ripplexmlns:andro android:color="?android:attr/colorControlHighlight"> <item android:> <color android:color="@android:color/white"/> </item> </ripple>
?android:attr/selectableItemBackgroundBorderless
<ripple xmlns:andro android:color="?android:attr/colorControlHighlight"/>
Code Settings
RippleDrawableColorStateList stateList = getResources().getColorStateList(.tint_state_color); RippleDrawable rippleDrawable = new RippleDrawable(stateList,null,null); (rippleDrawable);
Circular display
We usually show or hide a view. Before Android L, it was a blunt and instant change action. Now, a new API provides a circular display or hidden animation effect for this effect.
There is no difference between RevealAnimator and previous animations. You can also set up listeners and accelerators to achieve various special effects. The animation is mainly used to hide or display a view, change the size of the view, and other transition effects.
By creating an animation, the API accepts 5 parameters
view: the operation view
centerX: The center point X at the beginning of the animation
centerY: The center point Y at the beginning of the animation
startRadius: start radius of animation
startRadius: animation end radius
Shrinking animation along the center
Animatoranimator = ( view, //Administration view() / 2,//The center point X at the beginning of the animation() / 2,//The center point Y at the beginning of the animation(),//The animation start radius0 //The end radius of the animation); (newLinearInterpolator()); (1000); ();
Circle animation extending from the upper left corner
Animatoranimator = ( view,0,0,0,(float) ((), ())); (1000); ();
Curve motion
Before Android L, we can implement the motion trajectory algorithm by inheriting the bit moving picture and overloading the applyTransformation function, but the operation is quite cumbersome:
By inheriting the bit movement painting, rewrite applyTransformation to modify the displacement trajectory
public classArcTranslateAnimationextendsAnimation {
private float mFromXValue,mToXValue,mFromYValue,mToYValue;
private float mFromXDelta,mToXDelta,mFromYDelta,mToYDelta;
private PointF mStart,mControl,mEnd;
public ArcTranslateAnimation(floatfromXValue, floattoXValue, floatfromYValue, floattoYValue) {
mFromXValue = fromXValue;
mToXValue = toXValue;
mFromYValue = fromYValue;
mToYValue = toYValue;
}
protected void applyTransformation(floatinterpolatedTime,Transformationt) {
float dx =calcBezier(interpolatedTime,,,);
float dy =calcBezier(interpolatedTime,,,);
().setTranslate(dx,dy);
}
public void initialize(intwidth, intheight, intparentWidth, intparentHeight) {
(width,height,parentWidth,parentHeight);
mFromXDelta = resolveSize(ABSOLUTE,mFromXValue,width,parentWidth);
mToXDelta = resolveSize(ABSOLUTE,mToXValue,width, parentWidth);
mFromYDelta = resolveSize(ABSOLUTE,mFromYValue,height,parentHeight);
mToYDelta = resolveSize(ABSOLUTE,mToYValue,height, parentHeight);
mStart =newPointF(mFromXDelta,mFromYDelta);
mEnd =newPointF(mToXDelta,mToYDelta);
mControl =newPointF(mFromXDelta,mToYDelta);
}
private long calcBezier(floatinterpolatedTime, floatp0, floatp1, float p2) {
return ((((1- interpolatedTime),2) * p0)
+ (2 * (1-interpolatedTime) * interpolatedTime * p1) +
((interpolatedTime,2) * p2);
}
}
Now we have a simpler way to implement it.
ObjectAnimator has added a path method to build animations, and can animate the x and y properties at the same time. We can only specify the path of one curve to make the curve animation. You can draw the Bezier curve with quadTo/cubicTo, or you can draw ordinary arcs with arcTo.
Added PathInterpolator animation inserter, a new Bezier curve or path object-based inserter. This inserter specifies a 1x1 square motion curve, which uses (0,0) as the anchor point and (1,1) as the control point as the parameter to the constructor.
View state changes
Android L has been enhanced on the original image selector and color selector. Not only can the control display different background images according to different states, but it can also specify an animation when switching between the two states to increase the transition effect and attract users' attention to highlight key content.
The StateListAnimator class is similar to the image selector, and the color selector can be similar to the view's state changes to present different animation effects. Through xml, we can build a collection of animations corresponding to different states. The usage method is also very simple. You can specify an attribute animation in the corresponding state:
<selectorxmlns:andro> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="200" android:valueTo="20dp" android:valueType="floatType"/> </set> </item> <item android:state_enabled="true"android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="200" android:valueTo="0" android:valueType="floatType"/> </set> </item> </selector>
In XML, the state animation can be specified by Android:stateListAnimator. In the code, the animation can be loaded by () and assigned to the View using ().
You can specify a collection of multiple attribute animations during the state switching process. After inheriting the Material theme, the button has the z attribute animation by default. If you want to cancel this default state, you can specify the status animation as null.
In addition to the StateListAnimator class specifying the attribute animation of state switching, you can also specify the frame animation of state switching through AnimatedStateListDrawable:
<animated-selectorxmlns:andro> <item android:android:drawable="@drawable/btn_check_15" android:state_pressed="true"/> <item android: android:drawable="@drawable/btn_check_0"/> <transition android:fromId="@+id/normal"android:toId="@+id/pressed"> <animation-list> <item android:duration="20"android:drawable="@drawable/btn_check_0"/> <item android:duration="20"android:drawable="@drawable/btn_check_1"/> <item android:duration="20"android:drawable="@drawable/btn_check_2"/> </animation-list> </transition> </animated-selector>
Vector animation
We have learned vector graphics earlier. The AnimatedVectorDrawable class allows you to move a vector graphics. Vector animations show the change process of the picture smoother than frame animation, and are better than frame animation in terms of memory and package volume. Usually, it takes three steps to define a vector animation:
Define a vector diagram in the drawable resource directory
<vectorxmlns:andro android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600"> <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0"> <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l0,-70 70,70 0,0 -70,70z"/> </group> </vector>
Top an objectAnimator under anim and modify the path of the vector in the animation
<setxmlns:andro> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l0,-70 70,0 0,140 -70,0z" android:valueType="pathType"/> </set>
Define an animated-vector under the drawable, point the drawable to the vector diagram, and specify the animation in the target as the objectAnimator defined previously
<animated-vectorxmlns:andro android:drawable="@drawable/vector_drawable"> <target android:name="v" android:animation="@anim/vector_anim"/> </animated-vector>
Transition animation
Before Android L, we can call overridePendingTransition after startActivity to specify the transition animation of the Activity. Now Android L brings us more gorgeous transition animations.
The new transition animation is divided into two categories, one is ordinary transition animation, and the other is transition animation with shared elements.
To use a new transition animation, you can inherit the Material Design theme and specify it in style:
<stylename="DefaultTheme"parent="android:"> <!-- Allowed to usetransitions --> <item name="android:windowContentTransitions">true</item> <!-- Specify entry、quit、return、On re-enteringtransitions --> <item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item> <item name="android:windowReturnTransition">@transition/explode</item> <item name="android:windowReenterTransition">@transition/explode</item> <!-- Specify entry、quit、return、On re-entering共享transitions --> <item name="android:windowSharedElementEnterTransition">@transition/change</item> <item name="android:windowSharedElementExitTransition">@transition/change</item> <item name="android:windowSharedElementReturnTransition">@transition/change</item> <item name="android:windowSharedElementReenterTransition">@transition/change</item> </style>
You can also set the code in the oncreate method of the activity:
// Allow transitionsgetWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); // Specify transitions when entering, exiting, returning, and re-entrygetWindow().setEnterTransition(newExplode()); getWindow().setExitTransition(newExplode()); getWindow().setEnterTransition(newExplode()); getWindow().setExitTransition(newExplode()); // Specify shared transitions when entering, exiting, returning, and re-entrygetWindow().setSharedElementEnterTransition(newChangeTransform()); getWindow().setSharedElementExitTransition(newChangeTransform()); getWindow().setSharedElementReturnTransition(newChangeTransform()); getWindow().setSharedElementReenterTransition(newChangeTransform());
Normal transition animation
All classes inherited from visibility can be used as excessive animations for entry and exit. If we want to customize the animation effect when entering and exiting, we only need to inherit Visibility and overload onAppear and onDisappear methods to define the animation for entering and exiting. The system provides three default methods:
exploit moves into or out of view from the center of the screen
slide moves in or out of view from the edge of the screen
fade changes the transparency of the view
To specify custom entry and exit over-animation in XML, you need to define the animation first:
<transitionclass=""/>
Note: where CustomTransition is your custom animation, it must be inherited from Visibility.
To start an Activity in the form of a normal transition animation, you must pass a Bundle object of ActivityOptions in the startActivity function:
ActivityOptionsoptions = (activity); startActivity(intent,());
If you want the return to have a transition effect, then do not call the finish function in the returned Activity, but use finishAfterTransition to end an Activity, which will wait for the animation to be executed before ending the Activity.
Share transition animation
Shared transition animations will be a very good choice when two activities have certain elements of encounter. Using transition animation requires the same element to be passed android:transitionName or set to the same name so that the system can distinguish the same element.
Shared transition animation supports the following shared elements:
changeBounds Animate the size of the target view
changeClipBounds Animate the clip size of the target view
changeTransform Scaling, rotating, and bit moving pictures of the target view
changeImageTransform zooms the target image
Start a shared element animation with the following function:
ActivityOptionsoptions = (activity,view, "name"); startActivity(intent,());
If there are multiple shared elements, you can wrap it through Pair:
ActivityOptionsoptions = (activity,(view1,"name1"),(view2,"name2")); startActivity(intent,.toBundle());
If you need to have a transition animation when returning, you also need to use the finish function instead of finishAfterTransition to end an activity.
Shared transition animation can usually determine the appropriate transition animation effect based on the specified elements. We do not need to do additional processing. We can also specify the transition animation effect of the shared element through the previously learned methods.
Combination transition animation
We can combine multiple transition animations to create a more personalized transition effect, and use the following methods in the resource file:
<transitionSetxmlns:andro> <explode/> <transition class=""/> <<changeImageTransform/> </transitionSet>
In the code, we can combine multiple transition animations through the TransitionSet class:
TransitionSettransitionSet =new TransitionSet(); (newFade()); (newChangeBounds());
Combinations can be used for both normal transition animations and shared element transition animations.
Transition animation can also set duration, delay execution time, rate inserter, and animation monitoring, etc. like normal animations.
Transition animation usually works for the entire layout. If we want to implement transition animation on a specific view, we can set the view as the target of the transition animation, so that the transition animation will only work for the specific view. The target of the shared element's animation needs to be specified as transitionName
The above is a new animation of the new Android 5.0 feature introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!