Android属性动画property animation

属性动画property animation

基于底部导航模板BottomNavigation的实现
https://blog.csdn.net/BLU_111/article/details/103257206

Step1

1.通过res—New—Vector Asset创建图片资源：ic_mood_black_24dp.xml

2.为First、Second、Third三个Fragment设置ImageView并选择所创建的图片资源。
设置属性：

<ImageView
	android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:src="@drawable/ic_mood_black_24dp"
     />

Step2

FirstFragment

package com.example.bottomnavigationdemo;
import androidx.lifecycle.ViewModelProviders;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class FirstFragment extends Fragment {
private FirstViewModel mViewModel;
private ImageView imageView;
public static FirstFragment newInstance() {
    return new FirstFragment();
}

@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                         @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.first_fragment, container, false);
    imageView = view.findViewById(R.id.imageView);
    return view;
}

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    mViewModel = ViewModelProviders.of(this).get(FirstViewModel.class);
    //这里of()里的参数表示ViewModel的生效范围。this表示在本fragment内生效，requireActivity()表示在Activity内生效。
    //参数为this，切换fragment时ViewModel里的数据会丢失。而requireActivity()不会。
    imageView.setRotation(mViewModel.rotationPosition);
    final ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "rotation", 0, 0);
    objectAnimator.setDuration(500);
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (!objectAnimator.isRunning()) {
                objectAnimator.setFloatValues(imageView.getRotation(), imageView.getRotation() + 100);
                mViewModel.rotationPosition += 100;
                objectAnimator.start();
            }
        }
    });
 }
}

FirstViewModel

package com.example.bottomnavigationdemo;
import androidx.lifecycle.ViewModel;

public class FirstViewModel extends ViewModel {
// TODO: Implement the ViewModel
float rotationPosition = 0;
}

SecondFragment

package com.example.bottomnavigationdemo;
import androidx.lifecycle.ViewModelProviders;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class SecondFragment extends Fragment {
private SecondViewModel mViewModel;
private ImageView imageView;

public static SecondFragment newInstance() {
    return new SecondFragment();
}

@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                         @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.second_fragment, container, false);
    imageView = view.findViewById(R.id.imageView);
    return view;
}

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    mViewModel = ViewModelProviders.of(this).get(SecondViewModel.class);
    imageView.setScaleX(mViewModel.scaleFactor);
    imageView.setScaleY(mViewModel.scaleFactor);
    final ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(imageView,"scaleX",0,0);
    final ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(imageView,"scaleY",0,0);
    objectAnimatorX.setDuration(500);
    objectAnimatorY.setDuration(500);
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (!objectAnimatorX.isRunning()){
                objectAnimatorX.setFloatValues(imageView.getScaleX() + 0.1f);
                objectAnimatorY.setFloatValues(imageView.getScaleY() + 0.1f);
                mViewModel.scaleFactor += 0.1;
                objectAnimatorX.start();
                objectAnimatorY.start();
            }
        }
    });
 }
}

SecondViewModel

package com.example.bottomnavigationdemo;
import androidx.lifecycle.ViewModel;

public class SecondViewModel extends ViewModel {
	float scaleFactor = 1;
}

ThirdFragment

package com.example.bottomnavigationdemo;
import androidx.lifecycle.ViewModelProviders;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.Random;

public class ThirdFragment extends Fragment {

private ThirdViewModel mViewModel;
private ImageView imageView;

public static ThirdFragment newInstance() {
    return new ThirdFragment();
}

@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                         @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.third_fragment, container, false);
    imageView = view.findViewById(R.id.imageView);
    return view;
}

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    mViewModel = ViewModelProviders.of(this).get(ThirdViewModel.class);
    imageView.setX(imageView.getX() + mViewModel.dX);
    final ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView,"x",0,0);
    objectAnimator.setDuration(500);
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (!objectAnimator.isRunning()){
                float dx = new Random().nextBoolean() ?100:-100;
                objectAnimator.setFloatValues(imageView.getX(),imageView.getX() + dx);
                mViewModel.dX += dx;
                objectAnimator.start();
            }
        }
    });
  }
}

ThirdViewModel

package com.example.bottomnavigationdemo;
import androidx.lifecycle.ViewModel;

public class ThirdViewModel extends ViewModel {
    float dX;
}

运行截图：

点击图片可旋转：

点击图片可缩放：

点击图片可随机左右移动：

源码链接：https://pan.baidu.com/s/1HDujvAcAXIPse78fPl50xw
提取码：aovu