最近收到了一个"几十亿“的项目，公司APP想通过闪屏和首页广告位的联动卖钱（收费很贵），据说已经提前卖给商家了，618期间要进行投放。于是就开始调研了一下android页面切换动画的实现方式。通过网上的搜索发现，网上android的动画有很多的教程和文档了，但是对于页面间切换动画有哪些实现方式和效果，文章很少而且都比较零散。对于想要应用在真正项目上的，基本没什么太多的参考价值。所以，就把自己这次项目开发过程如何实现页面切换动画，以及探索到的几种实现方式记录下来，供大家参考。有问题随时交流学习。
图1页面过渡动画
图2共享元素动画
图3自定义View动画
页面切换动画三种方法：
1、页面切换动画。实现简单，只支持XML实现的View动画。
2、共享元素动画，能够实现前后两个页面的元素互动。
3、自定义动画。该动画用于当前Activity结束并退出，并不能用在跳转到新的Activity，APP中的闪屏可以使用该方法。
页面切换动画
在页面切换跳转的时候，进行页面的退出和进入动画，该动画只支持View动画，位移（TranslateAnimation）、缩放(ScaleAnimation)、透明度(RotateAnimation)、旋转(AlphaAnimation)动画。实现方式：
1、在资源中增加一个anim文件夹，创建一个动画XML，代码如下，一个X坐标的位移动画。
<set android:shareInterpolator="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%"
android:toXDelta="0"
android:duration="300"/>
</set>
2、在Activity的startActivity方法或者finish方法之后立即调用overridePendingTransition(enterAnim,exitAnim);传入值为动画资源文件ID。
在finish中调用
public void finish() {
super.finish();
overridePendingTransition(R.anim.zoom_enter,R.anim.zoom_out);
}
在startActivity调用
startActivity(intent);
overridePendingTransition(R.anim.zoom_enter,R.anim.zoom_out);
总结，这种Activity方法，只支持View的四种动画，动画的实现必须通过XML定义，所以整个切换动画时长、动画参数在代码中是无法动态调整的。四种动画方式都是作用于整个Activity的页面，比如缩放动画，会将整个Activity的页面进行缩放，无法做到Activity中某个View单独的缩放效果。
共享元素动画
共享元素动画，主要实现页面切换的时候，两个页面中元素的切换动画效果。系统提供的方法四种类型的共享元素动画，四种方式如下：
//1.与overridePendingTransition相同，传入anim动画的XML即可
ActivityOptions customAnimation = ActivityOptions.makeCustomAnimation(Context context,
int enterResId, int exitResId);
//2.缩放动画，传入缩放的View，startX startY 为新Activity元素的开始位置坐标，width和height为动画结束宽高
ActivityOptions scaleUpAnimation = ActivityOptions.makeScaleUpAnimation(View source,
int startX, int startY, int width, int height);
//3.剪切放大动画，新页面的从上个View的大小逐渐扩大，直到完全显示。
ActivityOptions clipRevealAnimation = ActivityOptions.makeClipRevealAnimation(View source,
int startX, int startY, int width, int height);
//4.共享元素动画，sharedElement当前Activity中位移的View,sharedElementName在XML中定义元素的名字
ActivityOptions transitionAnimation = ActivityOptions.makeSceneTransitionAnimation(Activity activity,
View sharedElement, String sharedElementName);
//===使用方式
startActivity(intent,transitionAnimation.toBundle());
我们以第四中方式为例（实现比其他多一步），看看共享元素动画是如何使用的。
1、首先在我们想要使用的两个Activity的布局文件中增加sharedElementName。在布局文件中，设置想要进行联动的View，并设置android:transitionName，值自己定义即可，但是两个Layout中的互动视图必须保持一致。
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/scrath_bg"
android:scaleType="fitXY"
android:transitionName="shareNames" />
2、在Activity切换的时候，设置上改共享动画即可。
//共享元素动画，sharedElement当前Activity中位移的View,sharedElementName在XML中定义元素的名字
ActivityOptions transitionAnimation = ActivityOptions.makeSceneTransitionAnimation(this,
IVsettings, "shareNames");
//使用方式
startActivity(intent,transitionAnimation.toBundle());
自定义动画
在真正的项目实现过程中，你会发现设计同学的动画远远没有这么简单。那最近开发的闪屏和首页广告联动的需求，我们需要实现的最终效果包括动画时间、位移动画、缩放动画、透明度动画，每种动画的开始时间和时长都不一样，同时动画需要加速器。面对这种诉求的时候，自定义动画才能满足你的诉求。如何实现呢？实现思路为，将前一个Activity设置为透明主题，页面切换的时候，将动画使用View之外的所有元素隐藏，然后播放View动画，动画结束时候，将Activity结束即可。
1、将Activity设置为透明主题
自定义透明主题
<style name="ThemeImage" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">true</item>
</style>
Activity中设置透明主题，在Activity的onCreate方法中
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
setTheme(R.style.ThemeImage);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pageanim_view);
}
2、自定义动画
AnimatorSet animatorSet = new AnimatorSet();
ValueAnimator transY = ObjectAnimator.ofFloat(mIvHeader, "translationY", 0, 250);
ValueAnimator alphaAnimator = ObjectAnimator.ofFloat(mIvHeader, "alpha", 1, 0);
ValueAnimator animator = ValueAnimator.ofFloat(1, 0);
//设置动画时长
animator.setDuration(400);
transY.setDuration(400);
alphaAnimator.setDuration(100);
alphaAnimator.setStartDelay(300);
animatorSet.playTogether(transY, alphaAnimator, animator);
animatorSet.start();
3、动画过程监听，动画结束时，结束Activity
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
// Intent intent = new Intent(PageAnimViewActivity.this,PageAnimStepActivity.class);
// startActivity(intent);
finish();
}
@Override
public void onAnimationCancel(Animator animation) {
finish();
overridePendingTransition(0,0);
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
后续把Demo补上
网友评论