【Android开发小记--6】动画--属性动画以及Fragment切换动画（3D）

Android的动画可以分为视图动画和属性动画

1. View Animation（Tween Animation）----- 视图动画

        不改变原有动画属性

2. Drawable Animation（Frame Animation）----- 属性动画

button旋转效果

        效果图1

      

代码编辑

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.button).setOnClickListener(this);    }    @Override    public void onClick(View v) {        //属性动画（旋转360度）        v.animate().rotation(360).setDuration(1000).start();    }}

XML配置

res中Animator文件夹（没有就新建），配置动画文件 animate.xml：

<?xml version="1.0" encoding="utf-8"?><!--对象动画--><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"    android:propertyName="rotation"    android:valueFrom="0"    android:valueTo="360"></objectAnimator>

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.button).setOnClickListener(this);    }    @Override    public void onClick(View v) {//        //属性动画（旋转360度）        //-----1------代码编辑//        v.animate().rotation(360).setDuration(1000).start();        //-----2------XML编辑        //对象动画        ObjectAnimator animatior = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.animate);        animatior.setTarget(v);        animatior.start();    }}

透明度 + 平移

        效果图2

        

animator_set.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <objectAnimator        android:duration="1000"        android:propertyName="alpha"        android:valueFrom="0"        android:valueTo="1" />    <!--动画命名和属性相关-->    <objectAnimator        android:duration="1000"        android:propertyName="Y"        android:valueFrom="0"        android:valueTo="200" /></set>

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.button).setOnClickListener(this);    }    @Override    public void onClick(View v) {//        //属性动画（旋转360度）        //-----1------代码编辑//        v.animate().rotation(360).setDuration(1000).start();        //-----2------XML编辑        //对象动画//        ObjectAnimator animatior = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.animate);//        animatior.setTarget(v);//        animatior.start();        //-----3------使用动画集合        AnimatorSet animator = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.animator_set);        animator.setTarget(v);        animator.start();    }}

修改 animator_set.xml，添加动画执行顺序选项：

    效果图3

      

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:ordering="sequentially">    <!--ordering 默认是动画一起执行together，按序列号 sequentially -->    <objectAnimator        android:duration="1000"        android:propertyName="alpha"        android:valueFrom="0"        android:valueTo="1" />    <!--动画命名和属性相关-->    <objectAnimator        android:duration="1000"        android:propertyName="translationY"        android:valueFrom="0"        android:valueTo="200" />    </set>

使用代码编辑对象动画，修改 MainActivity.java

    效果图4

      

rotation可定制化程度较高，先旋转90度，后从90到360度：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.button).setOnClickListener(this);    }    @Override    public void onClick(View v) {//        //属性动画（旋转360度）        //-----1------代码编辑//        v.animate().rotation(360).setDuration(1000).start();        //-----2------XML编辑        //对象动画//        ObjectAnimator animatior = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.animate);//        animatior.setTarget(v);//        animatior.start();        //-----3------使用动画集合----XML//        AnimatorSet animator = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.animator_set);//        animator.setTarget(v);//        animator.start();        //-----4-------旋转，相较于1，可订花程度较高-----代码编辑        ObjectAnimator.ofFloat(v,"rotation",0,90,90,360).setDuration(1000).start();    }}

使用代码编辑动画集合，修改 MainActivity.java

    效果图5

      

这里每段动画时间设为2000ms

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.button).setOnClickListener(this);    }    @Override    public void onClick(View v) {//        //属性动画（旋转360度）        //-----1------代码编辑（1、2、4）//        v.animate().rotation(360).setDuration(1000).start();        //-----2------XML编辑（1、2、4）        //对象动画//        ObjectAnimator animatior = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.animate);//        animatior.setTarget(v);//        animatior.start();        //-----3------使用动画集合----XML//        AnimatorSet animator = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.animator_set);//        animator.setTarget(v);//        animator.start();        //-----4-------旋转，相较于1，可订花程度较高-----代码编辑（1、2、4）//        ObjectAnimator.ofFloat(v,"rotation",0,90,90,360).setDuration(1000).start();        //-----5-------动画集合，设置动画顺序等--------代码编辑（3、5）        AnimatorSet set = new AnimatorSet();        set.setDuration(2000);        set.playSequentially(ObjectAnimator.ofFloat(v, "alpha", 0, 1),                ObjectAnimator.ofFloat(v, "translationY", 0, 200));        set.start();    }}

具体代码点击

Fragment 进出入动画

 效果图

一、设置主界面

设置 activity_main.xml ，层叠布局

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/fragment"    android:layout_width="match_parent"    android:layout_height="match_parent"></FrameLayout>

再来 MainActivity.java，打开新的Fragment

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        getFragmentManager().beginTransaction().add(R.id.fragment, new FragmentOne()).commit();    }}

二、新建 FragmentOne.java

public class FragmentOne extends Fragment implements View.OnClickListener {    private View rootView;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        rootView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_layout,null);        rootView.findViewById(R.id.btnAnotherFragment).setOnClickListener(this);        return rootView;    }    @Override    public void onClick(View v) {        getFragmentManager().beginTransaction()                .setCustomAnimations(R.animator.animator_enter,R.animator.animator_exit,R.animator.animator_enter,R.animator.animator_exit)                .addToBackStack("OtherFragment")                .replace(R.id.fragment, new OtherFragment())                .commit();    }}

以及 OtherFragment.java

public class OtherFragment extends Fragment {    private View rootView;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        rootView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_other,null);        return rootView;    }}

三、设置Fragment切换动画


MainActivity.java中添加 Fragment 后退栈

//设置Fragment后退栈    @Override    public void onBackPressed() {        if (getFragmentManager().getBackStackEntryCount() > 0) {            getFragmentManager().popBackStack();        } else {            super.onBackPressed();        }    }

res/animator 中新建 进入和退出 动画

animator_enter.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <objectAnimator        android:duration="1000"        android:propertyName="alpha"        android:valueFrom="0"        android:valueTo="1" /></set>

以及 animator_exit.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <objectAnimator        android:duration="1000"        android:propertyName="alpha"        android:valueFrom="1"        android:valueTo="0" /></set>

具体代码点击

Fragment切换动画——3D

由于模拟器的限制，效果图在真机上运行才有效果，这里就不放了。

一、界面布局，MainActivity.java

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //载入FragmentOne        getFragmentManager().beginTransaction().add(R.id.fragment, new FragmentOne()).commit();    }}

此时界面显示 FragmentOne，下面，设置 FragmentOne

FragmentOne.java
设置按钮监听器，切换动画。

public class FragmentOne extends Fragment implements View.OnClickListener {    private View rootView;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        rootView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_one, null);        //按钮监听        rootView.findViewById(R.id.button1).setOnClickListener(this);        return rootView;    }    /*两个Fragment顺时针转入转出*/    @Override    public void onClick(View v) {        getFragmentManager().beginTransaction()                .setCustomAnimations(R.animator.animator_two_enter, R.animator.animator_one_exit)                .replace(R.id.fragment, new FragmentTwo())                .commit();    }}

这里 3D切换的效果其实是使用的旋转效果：FragmentTwo转入，FragmentOne转出，皆为顺时针。
 FragmentTwo 的 enter动画效果，res/animator 下 animator_two_enter.xml，

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <!--先瞬时转到垂直位置-->    <objectAnimator        android:duration="0"        android:propertyName="rotationY"        android:valueFrom="0f"        android:valueTo="-90f" />    <objectAnimator        android:duration="1000"        android:propertyName="rotationY"        android:startOffset="1000"        android:valueFrom="-90f"        android:valueTo="0f" /></set>

FragmentOne 的exit 动画效果，animator_one_exit.xml，

<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"    android:propertyName="rotationY"    android:valueFrom="0f"    android:valueTo="90f">    </objectAnimator>

设置 FragmentTwo.java，这时候是反向逆时针旋转：

public class FragmentTwo extends Fragment implements View.OnClickListener {    private View rootView;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        rootView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_two, null);        rootView.findViewById(R.id.button2).setOnClickListener(this);        return rootView;    }    /*两个Fragment逆时针转入转出*/    @Override    public void onClick(View v) {        getFragmentManager().beginTransaction()                .setCustomAnimations(R.animator.animator_one_enter, R.animator.animator_two_exit)                .replace(R.id.fragment, new FragmentOne())                .commit();    }}

FragmentOne 的 enter 动画效果，animator_one_enter.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <!--先瞬时转到垂直位置-->    <objectAnimator        android:duration="0"        android:propertyName="rotationY"        android:valueFrom="0f"        android:valueTo="90f" />    <objectAnimator        android:duration="1000"        android:propertyName="rotationY"        android:startOffset="1000"        android:valueFrom="90f"        android:valueTo="0f" /></set>

FragmentTwo 的exit 动画效果，animator_two_exit.xml

<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"    android:propertyName="rotationY"    android:valueFrom="0f"    android:valueTo="-90f"></objectAnimator>

具体代码点击