android 页面切换动画

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268