项目急着上线,在改bug的过程中遇到这样一个问题:需要在切换fragment的时候添加左右滑动的进出动画,之前都是在Activty添加转场动画,在网上查阅了很多资料,遇到了很多坑之后,终于完成了这个bug的修复.
以下是解决的步骤:
- 修改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:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:propertyName="fractionX"
android:duration="300" />
</set>
fragment_slide_left_exit
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="0"
android:valueTo="-1"
android:valueType="floatType"
android:propertyName="fractionX"
android:duration="300" />
</set>
fragment_slide_left_enter
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="-1"
android:valueTo="0"
android:valueType="floatType"
android:propertyName="fractionX"
android:duration="300" />
</set>
fragment_slide_right_exit
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:propertyName="fractionX"
android:duration="300" />
</set>
完成了以上两步之后,照理来说fragment的动画就可以显示出效果了,但是动画仍然没有效果,接下来就是关键一步了(坑所在)
- 自定义控件,包裹在要执行动画的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最外层,如下:
<com.account.widget.FractionTranslateLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/phicomm_account_gray_line"
android:orientation="vertical"
>
....
</com.account.widget.FractionTranslateLinearLayout>
发现动画就可以完美地运行了,
下面为原理:
- 经过测试，Fragment执行切换的时动画针对的View是我们Fragment最外层的View，可是ObjectAnimator自身是不包含百分比移动的。不过ObjectAnimator有一个很强的能力，它可以对任何拥有setXXX的方法的对象进行修改值的操作
2.自定义控件中的setFractionX 为关键方法,通过屏幕宽度不断的变化来动态设置透明度,形成动画效果,
if (xFraction == 1 || xFraction == -1) {
setAlpha(0);
}
xFraction = -1 说明在屏幕的最左边,不可见
xFraction = 0 说明在屏幕的正中间,完全可见
-1<xFraction <1 屏幕宽度不断改变,部分可见
xFraction =1 说明在屏幕的最右边,不可见
