android fragment_Android实现登录、注册动画切换功能

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

29eee04cfb359f43cc9b6ccc918054a3.gif

这里我使用了背景渐变,平移,旋转动画。把它们组合起来就能实现上图的效果了。 这里我使用了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的布局就不贴了,比较简单,动画逻辑和动效都给出了,小伙伴可以根据自己的需求去添加不同的动画,实现更酷炫的效果。 到这里就结束啦 往期精彩回顾:
  • Android实现短信验证码自动填充功能

  • Android仿echo精美弹幕功能

  • Android实现头像重叠排列功能

  • Android仿QQ个性标签功能

  • Android仿QQ侧滑删除的功能

8074885d030f331c463b9a29367e37a1.png

f9cddcb87dc5f7212d0096bca216b38e.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值