I usually project development essential framework

1. The most powerful network request Net on Android
2. The strongest list on Android (including StateLayout) BRV
3. Android’s most powerful default page StateLayout
4. JSON and long text log printing tool LogCat
5. Support for asynchronous and global custom toast tool Tooltip
6. Develop debug window tool DebugKit
7. One line of code creates the transparent StatusBar StatusBar

I usually project development essential framework

1. The most powerful network request Net on Android
2. The strongest list on Android (including StateLayout) BRV
3. Android’s most powerful default page StateLayout
4. JSON and long text log printing tool LogCat
5. Support for asynchronous and global custom toast tool Tooltip
6. Develop debug window tool DebugKit
7. One line of code creates the transparent StatusBar StatusBar

Animated transitions

Transition animation is an animation effect introduced by Android L, which can be said to be an extension of Scene animation introduced by api19. Make it easier for developers to implement transition animations when layout (interface) changes.

Android L is the system version number that Google upgraded in 2014. In 2015, domestic manufacturers began to push Android L on their new phones. Now it is 2017, I think there is no time to wait.

Transition

Transition provides a transition framework for transitionAnimation in the Android. transition package. The transition framework is introduced in API19, but the transition animation is introduced in API21.

Tip: some animation effects may require api23

Class relationships:

• Transition
  • ChangeBounds changes the layout boundaries of the target view
  • ChangeClipBounds Clips the target view boundary
  • ChangeTransform changes the scale and rotation Angle of the target view
  • ChangeImageTransform changes the size and scaling of the target image
  • ChangeScroll
  • TransitionSet
    • AutoTransition transitions animations by default
  • Visibility subclasses are interface toggle animations
    • Explodes explosion
    • Fade out
    • Slide up and down

Transition is a Transition that doesn’t need to worry about keyframes, just tell the system what you want to animate

Subclasses of Transition with the change prefix are only effective for specific properties

A subclass of Visibility creates animation effects for the coordinates of shared elements

Simple effect implementation demo:

Interface A

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.button) Button mButton;

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @OnClick(R.id.button) public void onClick(a) {
        startActivity(new Intent(this, SecondActivity.class), ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle()); }}Copy the code

Interface B

public class SecondActivity extends AppCompatActivity {

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); / / must
        setContentView(R.layout.activity_second);

        getWindow().setExitTransition(new Slide());
        getWindow().setEnterTransition(newSlide()); }}Copy the code

The following code must be written to the current Activity before the setContentView. This is not required above api21.

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
Copy the code

If you want to exit the screen and still have the transition animation and can’t finish, you need to execute finishAfterTransition().

Animation target

The default transition animation will iterate over all subviews to load the animation, but adding a target will not iterate over all subviews, or you can exclude specific views.

There are three operations for the target

• add

  By default, all view loading animations will be iterated, but if you use add, you will not iterate over all, only the specified view will be animated

  ​

• To rule out

  If you use the exclusion method, the view object will still be traversed, but the view that you specified will be excluded

• delete

  Deleting a target is when you want to make changes to the target set after the animation has traversed the view, you can delete the specified view

  ​

Add/Exclude and delete targets support the following parameter types

1. View object
2. The name of transition (TransitionNames)
3. The bytecode (Class)
4. ID

Transition addTarget (View target)

Transition addTarget (String targetName)

Transition addTarget (Class targetType)

Transition addTarget (int targetId)
Copy the code

Delete is removeTarget(), exclude is excludeTarget()

All transitions support setting listeners

Transition addListener (Transition.TransitionListener listener)
Copy the code

The TransitionListener and AnimatorListener override methods.

Window (the Window)

As you can see from the example, the transition is set in the code by getting the Window object. Take a look at what Window has to say about transitions.

There are four kinds of scenes:

// The current screen is animated
void setEnterTransition (Transition transition)
// The current screen exits animation
void setExitTransition (Transition transition)
  
// The following is the return animation. If not set, the default is the same as entering and exiting the animation
  
// When the next screen returns to the current screen, the current screen enters animation
void setReenterTransition (Transition transition)
  
// The current screen exits the animation when returning to the previous screen
void setReturnTransition (Transition transition)
Copy the code

By default, the exit animation for screen A is executed before the exit animation for screen B is finished. The following two methods default to true. To enter the animation and wait until the exit animation is finished before playing, the following two methods need to be set to false.

You are advised to enable it by default. Otherwise, a blank period may occur. If you want to clearly see the order of several different states of animation can be turned on

void setAllowEnterTransitionOverlap (boolean allow)
void setAllowReturnTransitionOverlap (boolean allow)
Copy the code

I’m just going to set one

void setTransitionManager (TransitionManager tm)
Copy the code

Whether overlap is allowed when sharing element transitions

void setSharedElementsUseOverlay (boolean sharedElementsUseOverlay)
Copy the code

Tip: Transitions can also be set directly in the theme file

Interface Options (ActivityOptions)

You can use ActivityOptionsCompat if you want to be compatible with system versions prior to api16

This class is passed with the use of the jump interface as an optional parameter;

In order for the transition to work, you must use the following two methods to open the interface

// Single shared element, NULL if no shared element is passed
ActivityOptions makeSceneTransitionAnimation (Activity activity, View sharedElement, String sharedElementName)

// Support multiple shared elements
ActivityOptions makeSceneTransitionAnimation (Activity activity, Pair... 
       
         sharedElements)
       ,>
Copy the code

The custom entry and exit animation, like overridePendingTransition method

ActivityOptions makeCustomAnimation (Context context, 
                int enterResId, 
                int exitResId)
Copy the code

The following three default animation effects are provided by the system, but they are not very obvious when I actually use them.

Crop animation, this is API 23(Android M) new API.

ActivityOptions makeClipRevealAnimation (View source, 
                int startX, 
                int startY, 
                int width, 
                int height)
Copy the code

Zoom animation

ActivityOptions makeScaleUpAnimation (View source, 
                int startX, 
                int startY, 
                int width, 
                int height)
Copy the code

The thumbnail

ActivityOptions makeThumbnailScaleUpAnimation (View source, 
                Bitmap thumbnail, 
                int startX, 
                int startY)
Copy the code

Scene (Scene)

Scenarios, which can be understood as switching or changing layout content within an Activity, are introduced in API19

There are two ways to create it. One is to create it directly through the following static methods

Scene getSceneForLayout (ViewGroup sceneRoot, 
                int layoutId, 
                Context context)
Copy the code

Or by construction methods

Scene (ViewGroup sceneRoot,  // The current scenario
                View layout) // New scene to enter
Copy the code

SceneRoot can be called the root view. In the official example, this is the view object for the current interface layout, which can be thought of as the Activity container to which its Scene is attached

If you need to dynamically set the scene’s view content, you can specify only the root view

Scene (ViewGroup sceneRoot)
Copy the code

Enter and exit scenes without any animation. Normally, entry to the scene is handled by the TransitionManager

void enter ()

void exit(a)Copy the code

Exit does not change the scene in any way

Two callback methods can be set when a scene enters and exits

void setEnterAction (Runnable action)

void setExitAction (Runnable action)
Copy the code

If two scenes have the same ID, they will automatically animate the shared element (provided they do not use the default AutoTransiton, since this class does not use Change).

TransitionManager

The Scene defaults to no change for the Scene, and the TransitionManager provides two options

1. The default transition animation is AutoTransition

   static void go (Scene scene)
   Copy the code

   ​

2. Custom transition animation

   static void go (Scene scene, Transition transition)
   Copy the code

Starts a delayed transition, which saves the property state of the current view and then automatically animates the transition when it changes later

void beginDelayedTransition (ViewGroup sceneRoot)

void beginDelayedTransition (ViewGroup sceneRoot, Transition transition)
Copy the code

You can also end the autosave property state later

void endTransitions (ViewGroup sceneRoot)
Copy the code

Scene: the switch

// Create a TransitionManager for custom Transition animations
mTransitionManagerForScene3 = TransitionInflater.from(getActivity())
.inflateTransitionManager(R.transition.scene3_transition_manager, mSceneRoot);

// Then switch to any layout
mTransitionManagerForScene3.transitionTo(mScene3);
Copy the code

This method is equivalent to the go() mentioned

void transitionTo (Scene scene)
Copy the code

XML definition

Unlike ordinary animations, transitions have their own resource directory, Transition

Create an XML file in the res/ Transition directory

Label in

Reference to the XML

  Transition explode = TransitionInflater.from(this).inflateTransition(R.transition.explode);
Copy the code

Or you can set it directly in the theme

<item name="android:windowExitTransition">@transition/explode</item>
<item name="android:windowEnterAnimation">@transition/explode</item>
<item name="android:windowReenterTransition">@transition/explode</item>
Copy the code

In addition to the methods mentioned above, TransitionInflat can also populate a trantionManager object

TransitionManager inflateTransitionManager (int resource, 
                ViewGroup sceneRoot)
Copy the code

ShareElement

Shared elements

Control elements that are identical (or similar, but not mandatory) to the associated interface are usually used, such as the button in the following image:

A interface jump to specify shared elements

        startActivity(new Intent(this, SecondActivity.class),
                ActivityOptionsCompat.makeSceneTransitionAnimation(this, mButton, "button")
                        .toBundle());
Copy the code

Android :transitionName=”button” android:transitionName=”button”

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The second interface"
        android:transitionName="button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="99dp"
        />
Copy the code

You can see the effect of a so-called shared element, which is a transition between two controls (or controls) in two interfaces

As you can see, the transitions are all on the Window object, with the following methods (and getters for each)

Shared elements

void setSharedElementEnterTransition (Transition transition)
void setSharedElementExitTransition (Transition transition)
void setSharedElementReenterTransition (Transition transition)
void setSharedElementReturnTransition (Transition transition)
Copy the code

Custom Transiton

There are three main methods to override

1. Begin to value
2. The end value
3. Create the animation

The official sample

Transition can be overwritten with different animation effects for different views

Diffusion (Propagation)

Propagation controls the order in which views enter the current scene by specifying the view Transition delay in the Transition. For example, the specific View in the Explode animation is required to be faster than other views.

Diffusion center

First we need the Transition to identify the diffusion center

void setEpicenterCallback (Transition.EpicenterCallback epicenterCallback)
Copy the code

In Transiton. EpicenterCallback callback method needs to be rewritten in the following

Rect onGetEpicenter (Transition transition)
Copy the code

Returns a rectangle in the callback method whose center is the diffusion center.

Relationship:

• TransitionPropagation
  • VisibilityPropagation
    • SidePropagation
    • CircularPropagation

Specified by the transition method

void setPropagation (TransitionPropagation transitionPropagation) // Set diffusion

void setPropagationSpeed (float propagationSpeed) // Set the speed
Copy the code

If you look at the source code, you can see that Explode defaults to Diffuse Propagation

Slide uses SlidePropagation naturally

The TransitionPropagation belongs to an abstract class that provides three override methods

void captureValues (TransitionValues transitionValues)

String[] getPropagationProperties (a)

long getStartDelay (ViewGroup sceneRoot, Transition transition, TransitionValues startValues, TransitionValues endValues)
Copy the code

Separate control:

1. capture

The sample

slide.setPropagation(new VisibilityPropagation() {
  @Override public long getStartDelay(ViewGroup sceneRoot, Transition transition, TransitionValues startValues, TransitionValues endValues) {
    return 0; }});Copy the code

paths

PathMotion is a new implementation of transition animation introduced in api21. You can specify a path to limit the animation path

Set the path animation through Transition

void setPathMotion (PathMotion pathMotion)
Copy the code

PathMotion

• ArcMotion
• PatternPathMotion

Curved trajectory

Shared elements move in a straight line from one interface to another, and the action becomes an arc by specifying the following path

Refer to the implementation effect of GooglePlay

<changeBounds>
   <arcMotion android:minimumHorizontalAngle="15"
              android:minimumVerticalAngle="0"
              android:maximumAngle="90"/>
 </changeBounds>
Copy the code

Parameters:

• android:maximumAngle

  The maximum arc Angle at the beginning and end

• android:minimumHorizontalAngle

  It’s the smallest Angle when they’re nearly horizontal

• android:minimumVerticalAngle

  Vertical ditto

paths

You can fully customize the path to control the movement of shared elements

<changeBounds>
     <patternPathMotion android:patternPathData="M0 0 L0 100 L100 100"/>
 </changeBounds>
Copy the code

The parameter values for Tip: patternPathData are similar to vector animations

Custom path actions

 <changeBounds>
     <pathMotion class="my.app.transition.MyPathMotion"/>
 </changeBounds>
Copy the code