Card Flip Animations的实现

本文介绍一下Card Flip Animations的实现。

声明：本文完全参考Google官网Displaying Card Flip Animations

效果图

官方效果

该效果主要依靠objectAnimation,在Activity中切换两个Fragment实现.

下面直接上代码

Activity类

public class LoginActivity extends AppCompatActivity implements LoginFragment.OnForgetListener, ForgetPasswordFragment.OnBackListener {
    @BindView(R.id.fl_content)
    FrameLayout flContent;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        ButterKnife.bind(this);
//        if (savedInstanceState == null) {
        FragmentTransaction beginTransaction = getFragmentManager().beginTransaction();
        beginTransaction.add(R.id.fl_content, new LoginFragment()).commit();

    }

    @Override
    public void forgetPassword() {
        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.fl_content, new ForgetPasswordFragment())
                .addToBackStack(null).commit();
    }

    @Override
    public void goBack() {
        getFragmentManager().popBackStack();
    }

}

两个Fragment类

public class LoginFragment extends DialogFragment implements View.OnClickListener {
    @BindView(R.id.et_user_name)
    EditText etUserName;
    @BindView(R.id.et_password)
    EditText etPassword;
    @BindView(R.id.cb_auto_login)
    CheckBox cbAutoLogin;
    @BindView(R.id.tv_forget_pwd)
    TextView tvForgetPwd;
    Unbinder unbinder;

    @Override
    public void onAttach(Activity context) {
        super.onAttach(context);
        try {
            mCallback = (OnForgetListener) context;
        } catch (ClassCastException e) {
            throw new ClassCastException(context.toString() + "must implement OnForgetListener");
        }
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View mView = inflater.inflate(R.layout.fragment_login, container, false);
        unbinder = ButterKnife.bind(this, mView);
        tvForgetPwd.setOnClickListener(this);
        return mView;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }

    OnForgetListener mCallback;

    @Override
    public void onClick(View view) {
        mCallback.forgetPassword();
    }

    public interface OnForgetListener {
        void forgetPassword();
    }
}

public class ForgetPasswordFragment extends Fragment implements View.OnClickListener {

    Unbinder unbinder;
    @BindView(R.id.et_email)
    EditText etEmil;
    @BindView(R.id.btn_back)
    Button btnBack;

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        try {
            mCallback = (OnBackListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString() + "must implement OnBackListener");
        }
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View mView = inflater.inflate(R.layout.fragment_forget_password, container, false);
        unbinder = ButterKnife.bind(this, mView);
        btnBack.setOnClickListener(this);
        return mView;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }

    OnBackListener mCallback;

    @Override
    public void onClick(View view) {
        mCallback.goBack();
    }

    public interface OnBackListener {
        void goBack();
    }
}

关于3D翻转效果的更好实现可以参考文章Android实现dialog的3D翻转

源码中有3D翻转效果的实现

Demo下载