Android (Lollipop/5.0) Material Design (6) Custom Animation

Android (Lollipop/5.0) Material Design (6) Custom Animation

 

In the design of Material, animations provide visual consistency for interactions between users and apps to feedback their action behaviors. The Material topic provides some default animations for the transition between Buttons and Activity. In android5.0 (api21) and later versions, you can customize these animations:

· Touch feedback

· Circular Reveal loop display

· Activity transitions Activity transition

· Curved motion Curve motion

· View state changes

 

Customize Touch Feedback custom Touch Feedback animation in the Material design, Touch Feedback provides a confirmation Touch point that is instantly visualized when the user interacts with the UI. For the default touch feedback animation of buttons, The RippleDrawable class is used to transition between two different States with a ripple effect.

 

In most cases, you need to define the background of the view in the xml definition:

? Android: attr/selectableItemBackground bounded ripple

? Android: attr/selectableItemBackgroundBorderless ripple note extending beyond view: This attribute is added for api21

Alternatively, you can use xml to define a RippleDrawable resource and use the ripple attribute.

You can specify a color for the RippleDrawable object to change its default touch feedback color and use the android: colorControlHighlight attribute of the topic.

 

Use the Reveal Effect ViewAnimationUtils. createCircularReveal () method to enable or hide a view in a loop.

 

Display:

 

// previously invisible viewView myView = findViewById(R.id.my_view);// get the center for the clipping circleint cx = (myView.getLeft() + myView.getRight()) / 2;int cy = (myView.getTop() + myView.getBottom()) / 2;// get the final radius for the clipping circleint finalRadius = myView.getWidth();// create and start the animator for this view// (the start radius is zero)Animator anim =    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);anim.start();

 

Hide

 

// previously visible viewfinal View myView = findViewById(R.id.my_view);// get the center for the clipping circleint cx = (myView.getLeft() + myView.getRight()) / 2;int cy = (myView.getTop() + myView.getBottom()) / 2;// get the initial radius for the clipping circleint initialRadius = myView.getWidth();// create the animation (the final radius is zero)Animator anim =    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);// make the view invisible when the animation is doneanim.addListener(new AnimatorListenerAdapter() {    @Override    public void onAnimationEnd(Animator animation) {        super.onAnimationEnd(animation);        myView.setVisibility(View.INVISIBLE);    }});// start the animationanim.start();

Customize Activity Transitions defines the Activity transition Animation

 

Supports the transition of these effects:

Suddenly -- move the view or from the scene center. Class Explode

Slide-move the view or from the edge of a scenario. Class Slide

Fade in and fade out-adding or removing a view from a scenario changes its transparency. Class Fade

It also supports conversion of these shared elements (all with corresponding classes:
ChangeBounds-border change of the View layout.
Changeconbounds -- View's cropping boundary change.
ChangeTransform -- View rotation and scaling boundary change
ChangeImageTransform: The size and scaling of the target image.
When you enable activity conversion in your application, the transition between activating and exiting activity is performed by default.

 

Specify M transitions custom transition animation first needs to use the android: windowContentTransitions attribute in the style of the defined topic and declare the use of transitions. You can also define the Transitions used:

 

 

True

@ Android: transition/explode

@ Android: transition/explode

@ Android: transition/move

@ Android: transition/slide_top

 

 

Note: Each transition xml defines a group of change elements.

Enable transitions in code:

 

// inside your activity (if you did not enable transitions in your theme)getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);// set an exit transitiongetWindow().setExitTransition(new Explode());

The method for setting transitions in the Code is also

 

 

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()To perform transitions transition as soon as possible, you can call Window. setAllowEnterTransitionOverlap () in the Activity ().

   

   

  Start an activity using transitions Start Activity1. Start window content in the topic

   

  2. Define the shared transition transitions in the style

  3. Define the xml resource res/transition of transitions

  4. Call android: transitionName = in layout to set the name defined in step 1.

  5. CallActivityOptions. makeSceneTransitionAnimation () generates the corresponding ActivityOptions object.

   

  // get the element that receives the click eventfinal View imgContainerView = findViewById(R.id.img_container);// get the common element for the transition in this activityfinal View androidRobotView = findViewById(R.id.image_small);// define a click listenerimgContainerView.setOnClickListener(new View.OnClickListener() {    @Override    public void onClick(View view) {        Intent intent = new Intent(this, Activity2.class);        // create the transition animation - the images in the layouts        // of both activities are defined with android:transitionName=robot        ActivityOptions options = ActivityOptions            .makeSceneTransitionAnimation(this, androidRobotView, robot);        // start the new activity        startActivity(intent, options.toBundle());    }});

  You can use View. setTransitionName () in the code to set the transition animation.

   

  When you want to disable the second Activity and reverse the transition animation, you can call Activity. finishAfterTransition () instead of Activity. finish ().

   

  Start an activity with multiple shared elements
  

   

   

  Use Curved Motion
  

   

   

   

   

  Animate View State Changes