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

<?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的布局就不贴了,比较简单,动画逻辑和动效都给出了,小伙伴可以根据自己的需求去添加不同的动画,实现更酷炫的效果。感觉还行,点个赞吧?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三好码农的三亩自留地

实现Activity滑动退出

很多应用在二级详情页面加入了滑动退出activity的效果,很方便,心血来潮,想着自己也来实现这个效果,就当做练手吧。

872
来自专栏指尖下的Android

Android 仿UC浏览器详情页评论弹框效果

额,突然发现UC被我卸载了,这个是QQ浏览器的效果,不过都一样,如果当前页面不是全屏的话,把根布局设为相对布局,然后设置评论布局为处于底部,这样在点击评论时弹开...

683
来自专栏Android干货园

Android源码解析--SwipeMenuListView仿QQ聊天左滑

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/50...

991
来自专栏Android干货园

Android自定义组合控件---教你如何自定义下拉刷新和左滑删除

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/80...

881
来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 5 SWT控件以及布局使用

前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知   经过前几篇的介绍,多少对S...

1799
来自专栏向治洪

RecyclerView详解

RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把vi...

18710
来自专栏Android知识点总结

4-AI--Activity跳转动画

862
来自专栏Android开发指南

5.侧边栏逻辑

34612
来自专栏GIS讲堂

用百度地图API打造方便自己使用的手机地图

有钱人咱就不说了,因为偶是个穷银……因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等...

1784
来自专栏向治洪

gradeview可拖动效果实现

下面先上这次实现功能的效果图:(注:这个效果图没有拖拽的时候移动动画,DEMO里面有,可以下载看看) ? 一、开发心里历程 刚开始接触这个的时候,不知道要如何实...

2858

扫码关注云+社区