android登录动画,Android – 登录、注册动画

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

老规矩，先上图

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

这里我使用了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

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/id_rl"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/id_fl_login_in"

android:layout_width="match_parent"

android:layout_height="match_parent"

/>

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"/>

rotate_fg_enter_left.xml

android:duration="@integer/anim_short"

android:toDegrees="0"

android:fromDegrees="180"

android:interpolator="@android:anim/bounce_interpolator"

/>

rotate_fg_exit_left.xml

android:interpolator="@android:anim/accelerate_interpolator"

android:duration="@integer/anim_short"

android:fromDegrees="0"

android:toDegrees="-180"/>

rotate_fg_enter_right.xml

android:interpolator="@android:anim/bounce_interpolator"

android:duration="@integer/anim_short"

android:toDegrees="0"

android:fromDegrees="-180"

/>

rotate_fg_exit_right.xml

android:interpolator="@android:anim/accelerate_interpolator"

android:duration="@integer/anim_short"

android:fromDegrees="0"

android:toDegrees="180"/>

2个fragment的布局就不贴了，比较简单，动画逻辑和动效都给出了，小伙伴可以根据自己的需求去添加不同的动画，实现更酷炫的效果。感觉还行，点个赞吧🙂