Android转场动画一说

Android转场动画一说

所谓转场动画,通俗的讲就是一个Activity跳转到另一个Activity是的动画。

Activity的转场动画很早就有了,5.0之前用的是overridePendingTransition()这个方法。在5.0之后,Google使用Material Design设计风格,进而有了的新的转场转场动画的诞生,效果还是挺炫酷的,下面我们先看下效果。

5.0之前的效果



transition_before

使用方法:

在startActivity后加入以下代码

startActivity(Intent(this@BeforeActivity,BeforeTwoActivity::class.java)
//Fade(淡入淡出)
overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out)
//Slide(左右交错)
//overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right)

然后在finish后加入以下代码

finish()
//Fade(淡入淡出)
overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out)
//Slide(左右交错)
//overridePendingTransition(android.R.anim.slide_in_left,android.R.anim.slide_out_right)

其实这里主要是靠overridePendingTransition(int enterAnim, int exitAnim)来加载动画,顾名思义第一个参数是进场动画,第二个是出场动画。
这几个效果是可以交互使用,比如进场用Fade效果,出场用SLide效果。也可以使用自定义的效果,这里不细说。当然5.0后了类似共享元素这类的效果那就另当别论了

5.0之后的效果(过度效果和共享元素)



transition_after

share_element

说到这里不得不说Google在5.0MD设计中给我提供全新的过度动画ActivityOptions,以及兼容包ActivityOptionsCompat.下面来说一说它提供几种过度效果的方法

第一种

ActivityOptionsCompat makeCustomAnimation(Context context,int enterResId, int exitResId)。

这个方法其实和上面的overridePendingTransition()方法使用其实差不多,第二个参数是进场动画,第三个是出场动画。(效果参考overridePendingTransition()) 使用如下:

startActivity的时候:

ActivityCompat.startActivity(Intent(this@BeforeActivity,BeforeTwoActivity::class.java),
                ActivityOptionsCompat.makeCustomAnimation(this@BeforeActivity,
                android.R.anim.fade_in, android.R.anim.fade_out).toBundle())

finish的时候:

ActivityCompat.finishAfterTransition(this)

但是这个方法调用后,会发现并没有什么软用,没有退出的动画。打断点调试后发现:

public boolean startExitBackTransition(final Activity activity) {
    if (mEnteringNames == null || mCalledExitCoordinator != null) {
        return false;
    } else {
        ...
    }
}

这个mEnteringNames一直是null,然后这个变量跟共享元素有关:

/**
 * The shared elements that the calling Activity has said that they transferred to this
 * Activity.
 * 调用Activity的共享元素表示已转移到此Activity(请不要介意这个机翻,凑和看)
 */
private ArrayList<String> mEnteringNames;

因为这个两个页面之间涉及到共享元素,这里没有使用到,所以要想这个有出场动画,还是调用overridePendingTransition()来显示(有更好的方法请告知,万分感谢)

第二种

ActivityOptionsCompat makeScaleUpAnimation(View source,int startX, int startY, int startWidth, int startHeight)

这个效果展示的某个小的区域放大至全屏显示,效果如下:

这个方法第一个参数是目标view(也就是想要放大的view),第二、三个参数是起始坐标,第四,五个参数是过度效果开始的宽高度 使用如下:

startActivity的时候:

val options = ActivityOptionsCompat.makeScaleUpAnimation(view,view.width/2,view.height/2,
0, 0)
ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle())

finish的时候(这个没什么回退效果,暂时没找到解决方法,有更好的方法请告知,万分感谢):

ActivityCompat.finishAfterTransition(this)

第二种

ActivityOptionsCompat makeScaleUpAnimation(View source,int startX, int startY, int startWidth, int startHeight)

这个效果展示的某个小的区域放大至全屏显示,效果如下:



makeScaleUp

这个方法第一个参数是目标view(也就是想要放大的view),第二、三个参数是起始坐标,第四,五个参数是过度效果开始的宽高度 使用如下:

startActivity的时候:

val options = ActivityOptionsCompat.makeScaleUpAnimation(view,view.width/2,view.height/2,
0, 0)
ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle())

finish的时候(这个没什么回退效果,暂时没找到解决方法,有更好的方法请告知,万分感谢):

ActivityCompat.finishAfterTransition(this)

第三种

ActivityOptionsCompat makeThumbnailScaleUpAnimation(View source,Bitmap thumbnail, int startX, int startY)

这个效果展示的一块的Bitmpat进行拉伸的动画,效果如下:



makeThumbnailScaleUp

这个方法第一个参数是目标view(也就是想要放大的view),第二参数是需要放大的图片,第四,五个参数是起始坐标 使用如下:

startActivity的时候:

var bitmap = BitmapFactory.decodeResource(resources,effect.uri)
val options = ActivityOptionsCompat.makeThumbnailScaleUpAnimation(view, bitmap,
                            view.width/2, view.height/2)
ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle())

finish的时候(这个没什么回退效果,暂时没找到解决方法,有更好的方法请告知,万分感谢):

ActivityCompat.finishAfterTransition(this)

第四种

ActivityOptionsCompat makeClipRevealAnimation(View source,int startX, int startY, int width, int height)

这个效果展示的从一个点以圆形渐变到满屏,效果如下:



makeClipReveal

这个方法第一个参数是目标view(也就是想要放大的view),第二、三个参数是起始坐标,第四,五个参数是过度效果开始的宽高度 使用如下:

startActivity的时候:

val options = ActivityOptionsCompat.makeClipRevealAnimation(view,view.width/2,
                            view.height/2,0, 0)
ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle())

finish的时候(这个没什么回退效果,暂时没找到解决方法,有更好的方法请告知,万分感谢):

ActivityCompat.finishAfterTransition(this)

第五种

ActivityOptions CompatmakeSceneTransitionAnimation(Activity activity,Pair<View, String>... sharedElements)

这个展示的多种效果,效果如下:



transition_after

这个方法第一个参数是目标view(也就是想要放大的view),第二个参数是共享元素需要的(这里的效果不涉及) 使用如下:

startActivity的时候:

startActivity(Intent(this@AfterActivity, AfterTwoActivity::class.java),
    ActivityOptionsCompat.makeSceneTransitionAnimation(this@AfterActivity).toBundle())

然后在跳转后的页面设置效果(这里是AfterTwoActivity):

//Explode
window.enterTransition = Explode()
window.exitTransition = Explode()
//Slide
window.enterTransition = Slide()
window.exitTransition = Slide()
//Fade
window.enterTransition = Fade()
window.exitTransition = Fade()

共享元素

所谓的共享元素指的是Activity A中一个View和Activity B中的一个View做一个平滑过渡的效果。

效果展示(类似微信朋友圈的图片放大效果) :



transition_after

来看一下如何来让两个页面之间的View做一个过渡:

  • 1.在A和B的布局中为需要进行过渡效果的View设置两个相同的 android:transitionName = “标识名称”

  • 2.1 在startActivity的时候(适用单个view过渡):

      //第二参数传入过渡的view,第三个参数传入 android:transitionName 标识名称
      startActivity(Intent(this@ShareElementActivity, ShareElementTwoActivity::class.java),
      ActivityOptions.makeSceneTransitionAnimation(this@ShareElementActivity,view,"shareImg").toBundle())
    
  • 2.2 在startActivity的时候(适用多个个view过渡):

      //其实就是把过个需要过渡的View集合起来
      var one = android.support.v4.util.Pair<View, String>(img5, "shareImg5")
    
      var two = android.support.v4.util.Pair<View, String>(img6, "shareImg6")
    
      var pairs = arrayOf(one,two)
    
      val transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, *pairs)
          startActivity(Intent(this@ShareElementActivity, ShareElementThreeActivity::class.java),
                  transitionActivityOptions.toBundle())
    

以上就是要说的转场动画,如若有不恰当的地方,欢迎指正

这是文中涉及的代码Demo地址

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,004评论 5 13
  • 学习收集,非原创 一、 简介 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍...
    yyg阅读 15,988评论 4 39
  • 配置LOGIN项目下的静态资源本地环境 login项目的主要功能是登录/注册,这个项目调用的静态资源文件的路径,看...
    叶胖子阅读 164评论 0 1
  • 如果一定要把这一年的我们加个具象变化的话 除了你脸上的痘痘变少而我变多之外好像也找不出其他的 (这也证明不了什么 ...
    Monica__阅读 132评论 0 0