In android learning, we need to master the knowledge of animation, so that we can add enough gorgeous and flexible operation experience for our application. Next, I will explain the realization of animation effects through examples of ObjectAnimator, ObjectAnimator is a subclass of ValueAnimator. It is much more powerful and can animate properties of an object. Use the following Java code in the Activity:
ObjectAnimator animator = ObjectAnimator.ofFloat(textView,"alpha".1f.0f.1f);
animator.setDuration(4000);
animator.start();
Copy the codeAs you can see, we called the ofFloat() method to create an instance of ObjectAnimator. So the first argument here is passing in an Object, and we’re passing in whatever object we want to animate, so we’re passing in a TextView. The second argument is which property of the object we want to animate (alpha, scale, Translate, Rotate, and so on). Since we want to change the transparency of the TextView, we pass “alpha” here. The following parameters are not fixed length, so you can pass in whatever value you want to animate. The value passed in here means that the TextView is transformed from normal to fully transparent, and then from fully transparent to normal. The setDuration() method is then called to set the duration of the animation, and the start() method is then called to start the animation.
To see how Android changes properties, we can set up a listener for the Animator to monitor the changes.
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
Log.d("Test"."cuurent value is "+ value); }});Copy the codeLike Animation, property animations can be animated simultaneously using an AnimatorSet
float x1 = textView.getTranslationX();
ObjectAnimator animator = ObjectAnimator.ofFloat(textView,"alpha".1f.0f.1f);
ObjectAnimator animator11 = ObjectAnimator.ofFloat(textView,"rotation".0f.360f);
ObjectAnimator animator22 = ObjectAnimator.ofFloat(textView,"translationX",x1,x1+200f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(animator11).with(animator).with(animator22);
animatorSet.setDuration(4000);
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation); }}); animatorSet.start();Copy the codeThis is done in Java code, but it is usually set up in an XML resource file. Next, I will show you how to use ObjectAnimator in an XML resource file through examples and comments.
Create a new project to implement the animation effect of switching with Fragment
First we need to write the animation file.
<! --animator/card_flip_left_out.xml--> <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full"/>
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="1"
android:duration="1000"/> </set> <! Interpolator: Specifies an animation interpolator used to control the speed change of the animation alpha: is the name of the property, interpolator at the beginning of the animation transparency0.0Full transparency1.0Indicates complete opacity0.0-1.0Between thefloatNumber of data type startOffset: offset rotationY: rotation around Y axis duration: duration -->Copy the code<! --animator/card_flip_left_in.xml--> <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0"/ > <! <objectAnimator android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full"/>
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1"/>
</set>
Copy the code<! --animator/card_flip_right_in.xml--> <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="1, 0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0"/>
<objectAnimator
android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full"/>
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1"/>
</set>
Copy the code<! --animator/card_flip_right_out.xml--> <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full"/>
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1"/>
</set>
Copy the code<! --layout/fragment_card_back.xml--> <? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#a6c"
android:padding="16dp"
android:layout_gravity="bottom">
<TextView
android:id="@+id/text1"
style="? android:textAppearanceLarge"
android:textStyle="bold"
android:textColor="#fff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_title"/>
<TextView
style="? android:textAppearanceSmall"
android:textAllCaps="true"
android:textColor="#80ffffff"
android:textStyle="bold"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_description"/>
</LinearLayout>
Copy the code<! --layout/fragment_card_front.xml--> <? xml version="1.0" encoding="utf-8"? > <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher_background"
android:scaleType="centerCrop"
android:contentDescription="@string/description_image_1">
</ImageView>
Copy the codeCardflipactivity.java, do a couple of things in there,
- Set the Fragment conversion to the custom animation we just did
- Replace the currently displayed Fragment with a new Fragment and apply the previously created animation to the event.
- Add the previously displayed Fragment to the Fragment’s back stack, so when the user pressesBackWhen I press, Card will flip back.
package com.example.power.mytest;
import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
/** * Created by Power on 2018/10/23. */
public class CardFlipActivity extends Activity {
private boolean mShowingBack = false;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cardflip_activity);
Button button = (Button)findViewById(R.id.button_change);
if(savedInstanceState == null){
getFragmentManager()
.beginTransaction()
.add(R.id.content_card, newCardFrontFragment()) .commit(); }}public static class CardFrontFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card_front, container, false); }}public static class CardBackFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card_back, container, false); }}private void flipCard(a){
if(mShowingBack){
getFragmentManager().popBackStack();
return;
}
mShowingBack = true;
getFragmentManager()
.beginTransaction()
.setCustomAnimations(R.animator.card_flip_left_in, R.animator.card_flip_left_out,
R.animator.card_flip_right_in, R.animator.card_flip_right_out)
.replace(R.id.content_card, new CardBackFragment())
.addToBackStack(null)
.commit();
}
public void chage(View view){ flipCard(); }}Copy the code