android 页面切换动画

2020-05-16  本文已影响0人  简友菜鸡

最近收到了一个"几十亿“的项目,公司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补上

上一篇下一篇

猜你喜欢

热点阅读