Android实现登录注册动画切换功能

龙旋

共 6526字,需浏览 14分钟

 ·

2021-08-13 19:38

登录、注册功能相信大家都很常见了,今天我们来给它添加点动画。

老规矩,先上图:


这里我使用了背景渐变,平移,旋转动画。把它们组合起来就能实现上图的效果了。

这里我使用了3个页面,一个Activity和2个Fragment。

动画逻辑主要在Activity中,下面咱们看看到底该怎么写:
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的布局就不贴了,比较简单,动画逻辑和动效都给出了,小伙伴可以根据自己的需求去添加不同的动画,实现更酷炫的效果。


到这里就结束啦。
浏览 39
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报