登录、注册功能相信大家都很常见了,今天我们来给它添加点动画。
老规矩,先上图
public class LoginMainActivity extends AppCompatActivity { //判断是登录还是注册 private boolean isLogin = true; private Fragment[] mFragments; private Fragment mLastFragment; private RelativeLayout mRl; private Button mBtn; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login_main_layout); findView(); } //查询控件 private void findView() { mRl = findViewById(R.id.id_rl); mBtn = findViewById(R.id.id_btn); mFragments = new Fragment[]{new LoginInFragment(), new SignUpFragment()}; //默认登录动画 switchLogin(); //点击切换登录或注册 mBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { isLogin(); } }); } //"去注册"按钮从左边平移出来 private void btnTranslateLeft(){ ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mBtn, "translationX",-Px2DpUtil.dp2px(this,100) , Px2DpUtil.dp2px(this,20)); objectAnimator.setDuration(getResources().getInteger(R.integer.anim_short)); objectAnimator.setInterpolator(new AccelerateInterpolator()); objectAnimator.start(); } //“去登录”按钮从右边平移出来 private void btnTranslateRight(){ ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mBtn, "translationX", ScreenUtil.getScreenWidth(), ScreenUtil.getScreenWidth()-Px2DpUtil.dp2px(this,120)); objectAnimator.setDuration(getResources().getInteger(R.integer.anim_short)); objectAnimator.setInterpolator(new AccelerateInterpolator()); objectAnimator.start(); } //背景色渐变 private void animColor(int colorTo) { ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), R.color.white, colorTo); colorAnimation.setDuration(getResources().getInteger(R.integer.anim_short)); colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animator) { int color = (int) animator.getAnimatedValue(); mRl.setBackgroundColor(color); } }); colorAnimation.start(); } //执行登录页面动画 private void switchLogin() { isLogin = true; switchFragment(mFragments[0], R.anim.rotate_fg_enter_left, R.anim.rotate_fg_exit_left); animColor(ContextCompat.getColor(this, R.color.c_499AF7)); btnTranslateLeft(); mBtn.setText("去注册"); } //执行注册页面动画 private void switchSignUp(){ isLogin = false; switchFragment(mFragments[1], R.anim.rotate_fg_enter_right, R.anim.rotate_fg_exit_right); animColor(ContextCompat.getColor(this, R.color.c_3ec88e)); btnTranslateRight(); mBtn.setText("去登录"); } private void isLogin() { if (isLogin) { switchSignUp(); } else { switchLogin(); } } /** * Fragment切换 * * @param fragment */ public void switchFragment(Fragment fragment, int enter, int exit) { try { if (fragment == null) { fragment = mFragments[0]; } if (fragment.equals(mLastFragment)) { return; } FragmentManager mFragmentManager = getSupportFragmentManager(); FragmentTransaction mTransaction = mFragmentManager.beginTransaction(); //执行fragment切换动画 mTransaction.setCustomAnimations(enter, exit); if (mLastFragment != null) { mTransaction.hide(mLastFragment); } if (!fragment.isAdded()) { mTransaction.add(R.id.id_fl_login_in, fragment); } else { mTransaction.show(fragment); } mTransaction.commitAllowingStateLoss(); } catch (Exception e) { e.printStackTrace(); } finally { mLastFragment = fragment; } }}
activity.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/id_rl" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/id_fl_login_in" android:layout_width="match_parent" android:layout_height="match_parent" /> <Button android:id="@+id/id_btn" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="50dp" android:background="@drawable/shape_btn_login_in" android:text="去注册" android:textColor="#95ffffff" android:textSize="20sp"/>RelativeLayout>
rotate_fg_enter_left.xml
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:duration="@integer/anim_short" android:toDegrees="0" android:fromDegrees="180" android:interpolator="@android:anim/bounce_interpolator" />set>
rotate_fg_exit_left.xml
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:interpolator="@android:anim/accelerate_interpolator" android:duration="@integer/anim_short" android:fromDegrees="0" android:toDegrees="-180"/>set>
rotate_fg_enter_right.xml
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:interpolator="@android:anim/bounce_interpolator" android:duration="@integer/anim_short" android:toDegrees="0" android:fromDegrees="-180" />set>
rotate_fg_exit_right.xml
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:interpolator="@android:anim/accelerate_interpolator" android:duration="@integer/anim_short" android:fromDegrees="0" android:toDegrees="180"/>set>
2个fragment的布局就不贴了,比较简单,动画逻辑和动效都给出了,小伙伴可以根据自己的需求去添加不同的动画,实现更酷炫的效果。
到这里就结束啦
往期精彩回顾:
Android实现短信验证码自动填充功能
Android仿echo精美弹幕功能
Android实现头像重叠排列功能
Android仿QQ个性标签功能
Android仿QQ侧滑删除的功能