Android l-Material Design (animation), androiddesign

Android l-Material Design (animation), androiddesign

Reprinted please indicate this article from the blog of the big glutinous rice (http://blog.csdn.net/a396901990). Thank you for your support!

Android L:

Google has confirmed that Android L is Android Lollipop (5.0 ).

A few days ago, we found that the official version of Android sdk can be downloaded, and the first Nexus 6 and Nexus 9 equipped with the Android L system will be available soon.

So it's time to start learning Android L!

For more information about how to configure simulators and create projects for Android L, see my previous article:

Android L-Simulator configuration and Project Creation

Material Design:

Material Design is a brand new Design language launched by Google. It features flat objects.

Material Design contains a lot of content, which is roughly divided into four parts:

Themes and Layout--Android l-Material Design (subject and layout)

View and shadow-android l-Material Design (view and shadow)

UI control--Android l -- Material Design (UI control)

Animation-android l-Material Design (animation)

Let's talk about the animation added by Material:

The following animations are added to Android L:

• Touch feedback (Touch feedback)
• Reveal effect (impression effect)
• Activity transitions (Activity conversion effect)
• Curved motion (curve motion)
• View state changes)
• Animate Vector Drawables (printable Vector animation)

This article first introduces the first three methods that are commonly used in the above six types. Since there are not many materials available in the last three methods, and they do not seem to be very commonly used, I will try again when I understand them.

Touch feedback:

Added the touch feedback animation to Android L5.0.

The most obvious one is the ripple animation. For example, when a button is clicked, a ripple-like diffusion effect is generated from the clicked position.

Ripple ):

After you use a Material topic, the ripple animation is automatically applied to all controls. Of course, we can set its attributes to adjust the desired effect.

You can use the following code to set the ripple Background:

Android: background = "? Android: attr/selectableItemBackground"Ripple Boundary

Android: background = "? Android: attr/selectableItemBackgroundBorderless"Ripple exceeded Boundary

The effect is as follows:

B1 is a button without any background

B2 is set? Android: attr/selectableItemBackground

B3 is set? Android: attr/selectableItemBackgroundBorderless

Set color

We can also adjust the animation color by setting the xml Attribute to adapt to different themes:

Android: colorControlHighlight: Set ripple color

Android: col1_cent: Set the selected color of controls such as checkbox

For example, you need to modify the animation color to match the following pink subject (for how to set the subject color, see the first article in this series ):

Circular Reveal:

Circular Reveal is an animation added to Android L, but I never know how to translate this name, Circular display?

Usage:

ApplicationViewAnimationUtils. createCircularReveal ()You can create a RevealAnimator animation.

ViewAnimationUtils. createCircularReveal source code is as follows:

    public static Animator createCircularReveal(View view,            int centerX,  int centerY, float startRadius, float endRadius) {        return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);    }

The source code is very simple, that is, the createCircularReveal method is used to create a RevealAnimator animation object based on five parameters.
These five parameters are: ViewOperation View CenterXAnimation start center X CenterYCenter of animation start Y StartRadiusAnimation start radius StartRadiusAnimation end radius
Based on the following and the code, you can easily understand the functions of these parameters:

        final View oval = this.findViewById(R.id.oval);        oval.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Animator animator = ViewAnimationUtils.createCircularReveal(                        oval,                        oval.getWidth()/2,                        oval.getHeight()/2,                        oval.getWidth(),                        0);                animator.setInterpolator(new AccelerateDecelerateInterpolator());                animator.setDuration(2000);                animator.start();            }        });        final View rect = this.findViewById(R.id.rect);        rect.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Animator animator = ViewAnimationUtils.createCircularReveal(                        rect,                        0,                        0,                        0,                        (float) Math.hypot(rect.getWidth(), rect.getHeight()));                animator.setInterpolator(new AccelerateInterpolator());                animator.setDuration(2000);                animator.start();            }        });

Summary:

RevealAnimator is no different from the previous animation. You can also set listeners and accelerators to implement various special effects.

These effects are often used when the view is added, deleted, status, and size changed. In the future, I will write a more intuitive and detailed example.

Activity Transition:

Activity Transition is an animated effect provided in Material Design. It produces various animation effects by moving and switching elements between different States.

Introduction:

Activity Transition provides two types of Transition:

Enter): Enter the effect of an Activity
Exit): Effect of exiting an Activity

These types are classified into normal Transition and shared element Transition:

Normal Transition:

Explode: move from the center of the scene to or from slide: move from the edge of the scene to or from fade: Adjust transparency to produce gradient effect

Shared Elements Transition Shared element conversion:

It is used to share the common elements of two acitifiers. The following effects are supported in Android 5.0:

ChangeBounds-change the layout boundary of the target view

Changeconbounds-crop the target view Boundary

ChangeTransform-change the scaling ratio and Rotation Angle of the target view

ChangeImageTransform-change the size and scaling ratio of the Target Image

The following is a Demo I wrote. I believe you will know how these animations work:

Activity Transition usage:

It is very easy to use Activity Transition. You only need to perform the following two steps:

Step 1:Allow transition and set transition

Xml:

First, if you want to use transition, you must first modify the style File and add the following attributes to the style. xml that inherits the material topic:

<Style name = "myTheme" parent = "android: Theme. Material"> <! -- Allow transitions --> <item name = "android: windowContentTransitions"> true </item> <! -- Specify to enter and exit transitions --> <item name = "android: windowEnterTransition"> @ transition/explode </item> <item name = "android: using wexittransition "> @ transition/explode </item> <! -- Specify shared element transitions --> <item name = "android: windowSharedElementEnterTransition"> @ transition/change_image_transform </item> <item name = "android: windowSharedElementExitTransition "> @ transition/change_image_transform </item> </style>

Next let's take a look at how to define a transition Animation:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">    <explode/>    <changeBounds/>    <changeTransform/>    <changeClipBounds/>    <changeImageTransform/></transitionSet>

The elements in transition are described earlier. They are used in the same way as the previous AnimationSet. For details about how to use them, refer to the official documentation.

Code:

You can also set the transition in the Code:

// TransitionsgetWindow (). requestFeature (Window. FEATURE_CONTENT_TRANSITIONS) is allowed; // you can set an exit transitiongetWindow (). setExitTransition (new Explode ());

You can set the transition effect in the Code as follows:

Window. setEnterTransition ():Normal transition Entry Effect

Window. setExitTransition ():Exit effect of normal transition

Window. setSharedElementEnterTransition ():Entry Effect of the shared element transition

Window. setSharedElementExitTransition ():Exit effect of the shared element transition

Step 2:Start Activity:

When you have set the allow to use Transition and set the Transition animation, you canActivityOptions. makeSceneTransitionAnimation ()Method To start a new Activity to activate the Transition:

Enable Normal Transition:

startActivity(intent,              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Enable the sharing element Transition:

Enabling shared element transition is slightly different from normal transition.

UseAndroid: transitionNameAttribute assigns a common name to the element to be shared.

Intent intent = new Intent (this, Activity2.class); // preview view: view to be shared // "shareName": Set android: transitionName = "shareName" ActivityOptions options = ActivityOptions. makeSceneTransitionAnimation (this, preview View, "shareName"); startActivity (intent, options. toBundle (); </span>

If multiple views need to be shared Pair. create ()Method to create multiple matching pairs and then input ActivityOptions. makeSceneTransitionAnimation. The Code is as follows:

        ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,                Pair.create(view1, "agreedName1"),                Pair.create(view2, "agreedName2"));

If you do not want to use transition, you can set options bundle to null.

It is called when the current Activity needs to be ended and the animation needs to be rolled back.Activity. finishAfterTransition ()Method

Compatibility:

The APIs of several new animations described above can only be used in Android L:

• Activity transitions
• Touch feedback
• Reveal animations

To be compatible with earlier versions, you must check the system version before calling these Apis.

Conclusion:

Material Design is divided into the following four parts:

Themes and Layout--Android l-Material Design (subject and layout)

View and shadow-android l-Material Design (view and shadow)

UI control-android l-Material Design (UI control)

Animation-android l-Material Design (animation)

After the 11th holiday, I started to learn about Android L. After six more articles, I finally finished introducing most of the features in Material Design. (there are only a few small pieces of content in the animation article. I will try again after several days of research)

Next we will write a few small examples to fully combine view shadows, animations, and new UI controls.

Android 5.0 has really changed a lot and has a feeling of being reborn. But to tell the truth, the simulator is really uncomfortable. When Genymotion can support 5.0...

What is Material Design?

Google released the brand new Design language Material Design. Google said the design language aims to provide a more consistent and broader "Look and Feel" for mobile phones, tablets, desktops, and other platforms ".
Matias Durate, head of user experience at Google's Android operating system, said in a keynote speech at today's I/O Developer Conference: "We imagine that if pixels are colored, what kind of scenarios is there depth? What if there is a material that can change its texture? This imagination eventually led us to develop a Design language called Material Design ."
Some important functions of the Material Design language include the upgraded version of the system font Roboto. The color is brighter and the animation effect is more prominent. Dulat also briefly talked about some changes to the new framework, which was also published in google.com/design today. Google's idea is to let developers on the Google platform master this new framework, so that all applications have a uniform appearance, just like the design principles Apple has proposed to developers.
Google has also re-designed its flagship application based on the new design language, including Gmail and Calendar for Android and web pages. You may still remember that you have recently seen articles about these changes. Some blogs have mastered the leaked screenshots, And the UI is more clean and simpler as the Gmail is redesigned.
On the Android platform, this new style is called Material. It supports various new animation effects, built-in real-time UI shadows, and hero elements that can be switched between different screens.

I am an Android beginner. What does Android l mean for beginners?

It doesn't mean anything. Beginners need to learn the latest. The major changes of Android L are mainly reflected in the UI and functions. Google proposed the Design concept of Material Design. I think the code structure of this version is basically no different from that of the previous Android version, so most documents can still be used. We recommend that you download an Android L development document from Google to see if there are any changes in the Code. Because you are a beginner, it is recommended that you give priority to card layout and Fragment during design, and do not use methods and classes discarded after Android 2.3. I am also an Android developer and have made some small applications. If you have any questions, please feel free to ask. I hope this will help you.