不知道大家有没有发现,好多App在登录页都有图片的切换效果,增加视觉上的效果,让用户觉得这款App不会很单调。我记得QQ有一个版本就有。还是先上图,
其实这个直接放Gif就行。而我直接用属性动画也是可以的,这样能够减少App的体积。不多说直接上代码:
<RelativeLayout
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" tools:context="com.youyu.loginanimation.MainActivity">
<ImageView
android:id="@+id/login4"
android:scaleType="centerCrop"
android:src="@drawable/img3"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/login3"
android:scaleType="centerCrop"
android:src="@drawable/img2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/login2"
android:scaleType="centerCrop"
android:src="@drawable/img1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/login1"
android:scaleType="centerCrop"
android:src="@drawable/img4"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:gravity="center"
android:background="@drawable/button_circle"
android:layout_marginBottom="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:text="登录"
android:layout_width="100dp"
android:layout_height="wrap_content" />
</RelativeLayout>
然后用属性动画来实现:缩放、淡出的效果:
public class MainActivity extends AppCompatActivity {
private ImageView mLogin4;
private ImageView mLogin3;
private ImageView mLogin2;
private ImageView mLogin1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
setContentView(R.layout.activity_main);
mLogin4 = (ImageView) findViewById(R.id.login4);
mLogin3 = (ImageView) findViewById(R.id.login3);
mLogin2 = (ImageView) findViewById(R.id.login2);
mLogin1 = (ImageView) findViewById(R.id.login1);
//设置动画
initAniamtion();
}
private void initAniamtion() {
/***
* 第一张切换到第二张
*/
//透明动画
ObjectAnimator animatorAlpha1 = ObjectAnimator.ofFloat(mLogin1, "alpha", 1.0f, 0f);
ObjectAnimator animatorAlpha2 = ObjectAnimator.ofFloat(mLogin2, "alpha", 0f, 1.0f);
//缩放动画
ObjectAnimator animatorScale1 = ObjectAnimator.ofFloat(mLogin1, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale2 = ObjectAnimator.ofFloat(mLogin1, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(3000);
animatorSet.play(animatorAlpha1).with(animatorAlpha2).with(animatorScale1).with(animatorScale2);
/***
* 第二张切换到第三张
*/
//透明动画
ObjectAnimator animatorAlpha3 = ObjectAnimator.ofFloat(mLogin2, "alpha", 1.0f, 0f);
ObjectAnimator animatorAlpha4 = ObjectAnimator.ofFloat(mLogin3, "alpha", 0f, 1.0f);
//缩放动画
ObjectAnimator animatorScale3 = ObjectAnimator.ofFloat(mLogin2, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale4 = ObjectAnimator.ofFloat(mLogin2, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet2 = new AnimatorSet();
animatorSet2.setDuration(3000);
animatorSet2.play(animatorAlpha3).with(animatorAlpha4).with(animatorScale3).with(animatorScale4);
/***
* 第三张切换到第四张
*/
//透明动画
ObjectAnimator animatorAlpha5 = ObjectAnimator.ofFloat(mLogin3, "alpha", 1.0f, 0f);
ObjectAnimator animatorAlpha6 = ObjectAnimator.ofFloat(mLogin4, "alpha", 0f, 1.0f);
//缩放动画
ObjectAnimator animatorScale5 = ObjectAnimator.ofFloat(mLogin3, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale6 = ObjectAnimator.ofFloat(mLogin3, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet3 = new AnimatorSet();
animatorSet3.setDuration(3000);
animatorSet3.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
//把图片一复位
mLogin1.setScaleX(1.0f);
mLogin1.setScaleY(1.0f);
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
animatorSet3.play(animatorAlpha5).with(animatorAlpha6).with(animatorScale5).with(animatorScale6);
/***
* 第四张切换到第一张
*/
//透明动画
ObjectAnimator animatorAlpha7 = ObjectAnimator.ofFloat(mLogin4, "alpha", 1.0f, 0f);
ObjectAnimator animatorAlpha8 = ObjectAnimator.ofFloat(mLogin1, "alpha", 0f, 1.0f);
//缩放动画
ObjectAnimator animatorScale7 = ObjectAnimator.ofFloat(mLogin4, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale8 = ObjectAnimator.ofFloat(mLogin4, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet4 = new AnimatorSet();
animatorSet4.setDuration(3000);
animatorSet4.play(animatorAlpha7).with(animatorAlpha8).with(animatorScale7).with(animatorScale8);
AnimatorSet animatorSetT = new AnimatorSet();
animatorSetT.playSequentially(animatorSet, animatorSet2, animatorSet3, animatorSet4);
animatorSetT.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
//把其他的图片复位
mLogin2.setScaleX(1.0f);
mLogin2.setScaleY(1.0f);
mLogin3.setScaleX(1.0f);
mLogin3.setScaleY(1.0f);
mLogin4.setScaleX(1.0f);
mLogin4.setScaleY(1.0f);
animator.start();
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
animatorSetT.start();
}
}
OK,这样就搞定了。