在一个Activity中切换fragment的动画效果

  项目急着上线,在改bug的过程中遇到这样一个问题:需要在切换fragment的时候添加左右滑动的进出动画,之前都是在Activty添加转场动画,在网上查阅了很多资料,遇到了很多坑之后,终于完成了这个bug的修复.
  以下是解决的步骤:

  1. 修改fragment的transaction,主要是在transaction添加setCustomAnimations
android.app.FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.setCustomAnimations(
                R.animator.fragment_slide_right_enter, R.animator.fragment_slide_left_exit,
                R.animator.fragment_slide_left_enter, R.animator.fragment_slide_right_exit);
transaction.hide(currentF);
transaction.add(rootId, nextF, nextF.getClass().getName());
transaction.addToBackStack(nextF.getClass().getName());
transaction.commitAllowingStateLoss();

这里要解读一下setCustomAnimations的参数列表含义:

setCustomAnimations(int enter, int exit, int popEnter, int popExit)
第1个参数对应进栈动画,第4个参数对应出栈动画,所以4个参数分别是.setCustomAnimations(进栈动画, exit, popEnter, 出栈动画)

setCustomAnimations(enter, exit)
只能设置进栈动画,第二个参数并不是设置出栈动画;

2.在res -animator中添加 动画xml
假设:需求为进场动画是 从右往左的,出场动画是 从左往右的

动画文件位置.png

fragment_slide_right_enter:



    

fragment_slide_left_exit



    

fragment_slide_left_enter



    

fragment_slide_right_exit



    

完成了以上两步之后,照理来说fragment的动画就可以显示出效果了,但是动画仍然没有效果,接下来就是关键一步了(坑所在)

  1. 自定义控件,包裹在要执行动画的fragment xml的最外层
package com.phicomm.account.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;

/**
 * Created by shupian on 2017-12-13.
 */

public class FractionTranslateLinearLayout extends LinearLayout {

    private int                       screenWidth;
    private float                     fractionX;
    private OnLayoutTranslateListener onLayoutTranslateListener;

    public FractionTranslateLinearLayout(Context context) {
        super(context);
    }

    public FractionTranslateLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FractionTranslateLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    protected void onSizeChanged(int w, int h, int oldW, int oldH) {

        // Assign the actual screen width to our class variable.
        screenWidth = w;

        super.onSizeChanged(w, h, oldW, oldH);
    }

    public float getFractionX() {
        return fractionX;
    }

    public void setFractionX(float xFraction) {
        this.fractionX = xFraction;

/**
xFraction = -1 说明在屏幕的最左边,不可见
xFraction = 0 说明在屏幕的正中间,可见
xFraction =1 说明在屏幕的最右边,不可见

**/
        setX((screenWidth > 0) ? (xFraction * screenWidth) : 0);

        if (xFraction == 1 || xFraction == -1) {
            setAlpha(0);
        } else if (xFraction < 1 /* enter */ || xFraction > -1 /* exit */) {
            if (getAlpha() != 1) {
                setAlpha(1);
            }
        }

        if (onLayoutTranslateListener != null) {
            onLayoutTranslateListener.onLayoutTranslate(this, xFraction);
        }
    }

    public void setOnLayoutTranslateListener(OnLayoutTranslateListener onLayoutTranslateListener) {
        this.onLayoutTranslateListener = onLayoutTranslateListener;
    }

    public static interface OnLayoutTranslateListener {
        void onLayoutTranslate(FractionTranslateLinearLayout view, float xFraction);
    }
}

将这个自定义控件用于fragment的xml最外层,如下:



  ....


发现动画就可以完美地运行了,

下面为原理:

  1. 经过测试,Fragment执行切换的时动画针对的View是我们Fragment最外层的View,可是ObjectAnimator自身是不包含百分比移动的。不过ObjectAnimator有一个很强的能力,它可以对任何拥有setXXX的方法的对象进行修改值的操作

2.自定义控件中的setFractionX 为关键方法,通过屏幕宽度不断的变化来动态设置透明度,形成动画效果,

if (xFraction == 1 || xFraction == -1) {
   setAlpha(0);
}

xFraction = -1 说明在屏幕的最左边,不可见
xFraction = 0 说明在屏幕的正中间,完全可见
-1 xFraction =1 说明在屏幕的最右边,不可见

参考文章
Fragment全解析系列(一):那些年踩过的坑
Fragment左右平滑切换的动画

你可能感兴趣的:(在一个Activity中切换fragment的动画效果)