android facebook动画,2019-05-24 Android仿iOS FaceBook登录动画效果

先看效果图

n5o0m-z9420.gif

好像有点小卡，将就看看

基本跟FaceBook(iOS版本)登录效果一致

看代码 这里是布局，注意图片的android:scaleType="centerCrop"

android:id="@+id/root"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clipToPadding="true"

android:fitsSystemWindows="true"

android:orientation="vertical">

android:id="@+id/close"

android:layout_width="60dp"

android:layout_height="60dp"

android:padding="16dp"

android:src="@drawable/close"

android:visibility="gone" />

android:id="@+id/topPanel"

android:layout_width="match_parent"

android:layout_height="200dp">

android:id="@+id/back_line"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:alpha="0"

android:background="@color/design_default_color_primary" />

android:id="@+id/back_bg"

android:layout_width="match_parent"

android:layout_height="200dp"

android:layout_centerInParent="true"

android:scaleType="centerCrop"

android:src="@mipmap/login_top_back" />

android:id="@+id/logo_bg"

android:layout_width="120dp"

android:layout_height="120dp"

android:layout_centerInParent="true"

android:src="@mipmap/ic_launcher" />

android:id="@+id/body"

android:layout_width="match_parent"

android:layout_height="210dp"

android:layout_below="@+id/logo"

android:layout_marginTop="30dp"

android:orientation="vertical"

android:paddingLeft="10dp"

android:paddingRight="10dp">

android:layout_width="match_parent"

android:layout_height="55dp"

android:focusable="true"

android:focusableInTouchMode="true"

android:gravity="center_vertical"

android:orientation="horizontal"

android:paddingLeft="13dp">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginRight="15dp"

android:src="@drawable/ic_mobile_flag" />

android:id="@+id/et_mobile"

android:layout_width="0dp"

android:layout_height="55dp"

android:layout_weight="1"

android:background="@null"

android:hint="@string/hint_login_username"

android:inputType="textVisiblePassword"

android:maxLength="11"

android:singleLine="true"

android:text=""

android:textColor="@color/color_999999"

android:textColorHint="@color/color_999999"

android:textSize="14dp" />

android:id="@+id/iv_clean_phone"

android:layout_width="40dp"

android:layout_height="fill_parent"

android:scaleType="centerInside"

android:src="@drawable/ic_clear"

android:visibility="gone" />

android:layout_width="match_parent"

android:layout_height="1px"

android:background="@color/color_eeeeee" />

android:layout_width="match_parent"

android:layout_height="55dp"

android:focusable="true"

android:focusableInTouchMode="true"

android:gravity="center_vertical"

android:orientation="horizontal"

android:paddingLeft="13dp">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginRight="15dp"

android:src="@drawable/ic_password_flag" />

android:id="@+id/et_password"

android:layout_width="0dp"

android:layout_height="55dp"

android:layout_weight="1"

android:background="@null"

android:hint="@string/hint_login_password"

android:inputType="textPassword"

android:maxLength="30"

android:singleLine="true"

android:text=""

android:textColor="@color/color_999999"

android:textColorHint="@color/color_999999"

android:textSize="14dp" />

android:id="@+id/clean_password"

android:layout_width="40dp"

android:layout_height="fill_parent"

android:scaleType="centerInside"

android:src="@drawable/ic_clear"

android:visibility="gone" />

android:id="@+id/iv_show_pwd"

android:layout_width="40dp"

android:layout_height="fill_parent"

android:scaleType="centerInside"

android:src="@drawable/pass_gone" />

android:layout_width="match_parent"

android:layout_height="1px"

android:background="@color/color_eeeeee" />

android:id="@+id/btn_login"

android:layout_width="match_parent"

android:layout_height="45dp"

android:layout_marginTop="21dp"

android:background="@color/design_default_color_primary"

android:text="@string/login"

android:textColor="@color/color_ffffff"

android:textSize="18dp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:gravity="center_vertical"

android:orientation="horizontal">

android:id="@+id/regist"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:layout_weight="1"

android:text="注册新用户"

android:textColor="@color/color_b0b8b2"

android:textSize="14dp" />

android:id="@+id/forget_password"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:layout_marginLeft="21dp"

android:text="@string/login_forget_pwd"

android:textColor="@color/color_b0b8b2"

android:textSize="14dp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:orientation="horizontal">

android:id="@+id/service"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:gravity="center"

android:orientation="horizontal"

android:padding="10dp">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right"

android:text="联系客服"

android:textColor="@color/color_b0b8b2"

android:textSize="14dp" />

android:layout_width="1dp"

android:layout_height="match_parent"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:background="@color/color_eeeeee" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right"

android:text="关于我们"

android:textColor="@color/color_b0b8b2"

android:textSize="14dp" />

来看看代码的几个初始化的数据吧

//中级的logo图

logo = (ImageView) findViewById(R.id.logo_bg);

//背景图渐变消失后的颜色tuce

bgLine = findViewById(R.id.back_line);

//背景图

backBg = (ImageView) findViewById(R.id.back_bg);

//包裹上面三个view的父View

topView = findViewById(R.id.topPanel);

再来看看实际调用的方法

//缩小动画

public void suoxiao() {

final int height = topView.getHeight();

topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

//0.5代表要缩小多少倍高度

int i = (int) (height * 0.5 * (float) animation.getAnimatedValue());

topView.getLayoutParams().height = height - i;

topView.requestLayout();

}

}).setInterpolator(new AccelerateDecelerateInterpolator()).start();

logo.animate().scaleX(0.5f).scaleY(0.5f).setInterpolator(new AccelerateDecelerateInterpolator()).start();

backBg.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();

bgLine.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();

}

public void kuoda() {

final int height = topView.getHeight();

topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

int i = (int) (height * (float) animation.getAnimatedValue());

topView.getLayoutParams().height = height + i;

topView.requestLayout();

}

}).setInterpolator(new AccelerateDecelerateInterpolator()).start();

logo.animate().scaleX(1f).scaleY(1.0f).setInterpolator(new AccelerateDecelerateInterpolator()).start();

backBg.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();

bgLine.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();

}

以上使用的都是View自带的动画ViewPropertyAnimator

网上很多都是各种动画组合，我觉得太麻烦了，而且代码量也很多，用View的动画，其实更直接。代码比较简单明了，可以直接CV使用