先看看效果图
下面介绍具体实现步骤
public class MainActivity extends AppCompatActivity {
ImageView logoView;
View loginFragment;
View registerFragment;
Button registerButton;
Button backButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findView();
startAnimator();
}
private void findView() {
logoView = findViewById(R.id.logo_imageView);
loginFragment = findViewById(R.id.loginFragment);
registerFragment = findViewById(R.id.registerFragment);
registerButton = findViewById(R.id.registerButton);
registerButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
loginToRegisterAnimator();
}
});
backButton = findViewById(R.id.back_button);
backButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
registerToLoginAnimator();
}
});
}
private void startAnimator() {
ObjectAnimator animator1 = ObjectAnimator.ofFloat(logoView, "alpha", 1f, 0f);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(loginFragment, "alpha", 0f, 1f);
AnimatorSet animSet =new AnimatorSet();
animSet.play(animator2).after(animator1);
animSet.setDuration(1500);
animSet.start();
}
private void loginToRegisterAnimator() {
registerFragment.setVisibility(View.VISIBLE);
loginFragment.setVisibility(View.GONE);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(loginFragment, "alpha", 1f, 0f);
ObjectAnimator animator4 = ObjectAnimator.ofFloat(registerFragment, "alpha", 0f, 1f);
AnimatorSet animSet =new AnimatorSet();
animSet.play(animator4).after(animator3);
animSet.setDuration(10);
animSet.start();
}
private void registerToLoginAnimator() {
registerFragment.setVisibility(View.GONE);
loginFragment.setVisibility(View.VISIBLE);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(loginFragment, "alpha", 0f, 1f);
ObjectAnimator animator4 = ObjectAnimator.ofFloat(registerFragment, "alpha", 1f, 0f);
AnimatorSet animSet =new AnimatorSet();
animSet.play(animator3).after(animator4);
animSet.setDuration(10);
animSet.start();
}
}
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
tools:context=".MainActivity"
android:layout_height="match_parent">
<View android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/black"
android:alpha="1" android:id="@+id/ScrollListModal" tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp" app:srcCompat="@drawable/ianime_nobg"
android:id="@+id/logo_imageView"
app:layout_constraintTop_toTopOf="@+id/ScrollListModal"
app:layout_constraintRight_toRightOf="@id/ScrollListModal"
app:layout_constraintLeft_toLeftOf="@id/ScrollListModal"
app:layout_constraintBottom_toBottomOf="@id/ScrollListModal"/>
<fragment
android:id="@+id/loginFragment"
android:name="com.example.startanimation.LoginFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="@layout/fragment_login" />
<fragment android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/registerFragment"
android:name="com.example.startanimation.RegisterFragment"
tools:layout="@layout/fragment_register"/>
android.support.constraint.ConstraintLayout>
public class LoginFragment extends Fragment {
private View view;
public LoginFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
view= inflater.inflate(R.layout.fragment_login, container, false);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
tools:context="LoginFragment" android:id="@+id/login_fragment">
<TextView
android:text="登陆"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="48dp"
android:textColor="@color/WhiteText"
android:id="@+id/textView" app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="48dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="45dp"/>
<TextView
android:text="世界と色と共に"
android:textSize="16dp"
android:textColor="@color/WhiteText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView10" android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@+id/textView" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="47dp"/>
<EditText
android:hint="输入用户名"
android:background="@drawable/edit_background"
android:layout_width="0dp"
android:layout_height="40dp"
android:textColorHint="@color/WhiteText"
android:textSize="16dp"
android:paddingLeft="12dp"
android:singleLine="true"
android:id="@+id/account" android:layout_marginTop="80dp"
app:layout_constraintTop_toBottomOf="@+id/textView10" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="44dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="44dp"/>
<EditText
android:background="@drawable/edit_background"
android:hint="输入密码"
android:textColorHint="@color/WhiteText"
android:layout_width="0dp"
android:paddingLeft="12dp"
android:layout_height="40dp"
android:textSize="16dp"
android:singleLine="true"
android:id="@+id/password" android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="@+id/account" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="44dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="44dp"/>
<ImageView
android:src="@drawable/arrow_right_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/loginArrowRight" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/password" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:background="@drawable/button_shape"
android:text="新用户注册"
android:textColor="@drawable/login_button_font_color"
android:textSize="24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/registerButton" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/loginArrowRight" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:text="访客使用"
android:background="@drawable/button_shape"
android:textSize="24dp"
android:textColor="@drawable/login_button_font_color"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button2" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/registerButton" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
/>
android.support.constraint.ConstraintLayout>
public class RegisterFragment extends Fragment {
public RegisterFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_register, container, false);
}
}
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:visibility="gone"
tools:context=".RegisterFragment" android:id="@+id/register_fragment">
<TextView
android:text="注册"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="48dp"
android:textColor="@color/WhiteText"
android:id="@+id/textView2" app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="48dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="45dp"/>
<TextView
android:text="君と僕は一緒に"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:textColor="@color/WhiteText"
android:id="@+id/textView3" android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="47dp"/>
<EditText
android:background="@drawable/edit_background"
android:hint="手机号/邮箱"
android:textColorHint="@color/WhiteText"
android:singleLine="true"
android:textSize="16dp"
android:paddingLeft="12dp"
android:layout_width="0dp"
android:layout_height="40dp"
android:id="@+id/reg_account"
android:layout_marginTop="100dp" app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="44dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="44dp"/>
<EditText
android:background="@drawable/edit_background"
android:hint="输入密码"
android:textColorHint="@color/WhiteText"
android:singleLine="true"
android:textSize="16dp"
android:paddingLeft="12dp"
android:layout_width="0dp"
android:layout_height="40dp"
android:id="@+id/reg_password" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="@+id/reg_account" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="44dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="44dp"/>
<EditText
android:background="@drawable/edit_background"
android:hint="重复输入密码"
android:textColorHint="@color/WhiteText"
android:singleLine="true"
android:textSize="16dp"
android:paddingLeft="12dp"
android:layout_width="0dp"
android:layout_height="40dp"
android:id="@+id/reg_passwordAgain" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="@+id/reg_password" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="44dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="44dp"/>
<Button
android:background="@drawable/button_shape"
android:textSize="24dp"
android:text="返回"
android:textColor="@color/WhiteText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/back_button" android:layout_marginTop="48dp"
app:layout_constraintTop_toBottomOf="@+id/reg_passwordAgain" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.5" app:layout_constraintEnd_toStartOf="@+id/start_register"/>
<Button
android:background="@drawable/button_shape"
android:textSize="24dp"
android:text="注册"
android:textColor="@color/WhiteText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/start_register"
app:layout_constraintTop_toTopOf="@+id/back_button" app:layout_constraintStart_toEndOf="@+id/back_button"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5"/>
android.support.constraint.ConstraintLayout>
这是三个主要的界面类,下面7、8、9是在drawable文件夹下定义的布局定义文件
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp"/>
<padding
android:left="10dp"
android:right="10dp"/>
<stroke
android:width="0dp"
android:color="#ffffff"/>
shape>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="3dp"/>
<stroke
android:width="2dp"
android:color="#ffffff"/>
shape>
item>
layer-list>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/GrayText"/>
<item android:state_focused="true" android:color="@color/GrayText"/>
<item android:color="@color/WhiteText"/>
selector>
<resources>
<color name="colorPrimary">#008577color>
<color name="colorPrimaryDark">#00574Bcolor>
<color name="colorAccent">#D81B60color>
<color name="WhiteText">#ffffffcolor>
<color name="GrayText">#A2A2A2color>
<color name="black">#000000color>
resources>