Card Flip Animations的实现

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

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

效果图

官方效果

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

下面直接上代码

Activity类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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();
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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下载