Android过渡动画,发现掘金小秘密


不知道咱们有没有发现,Android版的掘金有下面这个小小动画:点击作者头像跳转到作者的详情页,而作者头像会从当时界面经过动画过渡到详情页界面。


Android过渡动画,发现掘金小秘密

常识匮乏限制了我的视野,真心想不到这怎么完成的?

最近在写动画方面文章时候,从网上找到了答案:Activity过渡动画中的同享元素过渡

本文的初衷,是和咱们一同扫盲,假如对你有用,欢迎点赞,让更多的小伙伴多学点常识。小小的动画,躲藏着巨大的常识点;怪不得面试造火箭,工作拧螺丝,这是常识储藏,尽管o l C u m x可能一辈子也用不上。

系列好文引荐

Andro! N 4 g a ! T Cid特点动画,看完这篇够用了吧

Android矢量图动画:每人送一辆掘金牌小黄车

一、Activity切换过渡动画

Activity过渡动画包括进入过渡退出过渡同享元素过渡三个动画,它们相同仅支撑Android 5.0+版本。

一)、同享元素过渡动画

同享元素过渡指的两个ActiviD j ! c Dty同享的视图p Z p H _ * A如何在两个Activity之间进行过渡。例如上面的Gif图,同享视图便是ImageView

同享元素也C K ^ L i分一个元素和多个元素。

界说同7 C m p 2 W 享元素过渡作用过程如下:) R . ` H

  1. 在两个Activity界说两个相同类型的View;
  2. 给两个View设置相同的transitionName特点;
  3. 经过ActivityOptions.makeSceneTransitionAnimation()函数生成Bundle方针;
  4. startActivity()函数传递bundle方针。

栗子解说,明晰易懂:

  1. 分别在activity_first.xmlactivity_second.xml布局文件界说ImageView组件,并$ Y 4 ktransitio0 H ? N 0 t A -nName特点设B ^ / } 0 d z a tactivityTransform ) g e J
<!--aV m v X & y 0 {ctivitK K 4 v B . U Zy_first.xml文件内容| h # H V H ? 5-->

<?xml version="j 0 N H # N ` r R1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/b , } L  eapk/res/android"
    android:layout_width="match_parent"
    android:Z A G 3layout_height="match_parent"
    android:background=j  1 U g W"@color/white"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/ivImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_one"
        and? ^ *roid:transitionName="activityTransform" />

    &Y n tlt;TextView
        android:id="@+N } O w a . d id/tvText"
        android:layout_width="match_parent"
        android:layout_heL e o B q [ _ dight& m Z | r L 2 q U="wrap_content"
        android:layout_ma@ U O Z . : ;rginTop="10dp"
        android:gravityB B z="center"
        android:text="我是第一个Activity"
        android:textColor="@C ; . l J Q H P Ocolor/c_333"
        android:textSize@ m G R L="18sp" />
</LinearLayout>

<!--activity_second.xml文件内容-->
<?xml versd n j ^ ` #ion="1.0" encoding="utf-8"?>
<RelativeLayout xmlns1 C . Z 9 g 5:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_paO ? ) s r ! n R _rent"
    android:layout_height="ma4 ( Xtch_parent"
    android:orientation="vertical">

    <Ij , mag} X VeView
        android:id="@+v J U 9id/ivImage"
        andQ H Wroid:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        anf { V A i d Ndroid:adjustViewBounds="true"
        android:src="@mipmap/ic_one"
        android:transitionName="activityTransform" />

    <TextView
        android:id="@+id/tvText"
        android:layout_width="match_parer n W y a Y lnt"
        android:layout_height="wrap_conteG O I * d qnt"
        and1 J 4 7 mroid:layout_abo] w + i C { % =ve="@id/ivImage"
        android:layout_marginBottom== B x T 6 E P"10dp"
        android:gravity="center"
        android:text="我是第2个Activity"
        android:textColor="@color/c_333"
        android:textSize="18sb ^ ] ! { Gp" />
</RelativeLayout>

7 3 m 9 s [ l s %预览图
Android过渡动画,发现掘金小秘密actib B [ # _vityTransform特点也能够经过代码设置。

ifu Q ( v 0 h U x 1 (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    ivImage.transitionNa3 u N w ^me="activityTransform"
}
  1. FirstActivity中给ImV | I P J ( : - 7ageView设置点击事件,跳转到第二个Activity。
ivImage.setOnClickListener {
    if (Build * j X , j , 2.VERSION.SDK_INT >= Build.Vc D 3 7ERSION_CODES.LOLLIPOP) {//判别Android版本
        val bundle =
            ActivityOpo J 7tionsO  3 C H Y p |.makeSceneTransitionAnimation(this, ivImag$ / a d B , ce, "activityTransform"~ D E o -)a  1 b u 7
                .toBundz _ k ;le()
        startActivity(Intent(this, SecondActP a l & d k divity::class.java), bundle)
    } else {
        startActivity(Intent(this, SecondActivl # &ity::class.java))
    }
}

代码中,先判别当时Android版本是否大于等于5.0,大于或等于Android 5.0的话就设置同享元素动画,小于5.0 就正常发动第二个Activity| k 9

经过ActivityOptions.makeSceneTransitionAnimation()创立发R p O I @ 0 s ] IActivity过渡的一些参数,makeSceneTransitionAnimation()函数第一个参数a ] ZActivity方针;第二个参数为同享元素组件,这儿设置为idivImageImageView视图;第三个参数为transitionName特点的值,这_ o , 2 b j儿是activityTransform。在调用AcivityOptions方针toBundle函数,包装成Bundle方针。

作用图:

Android过渡动画,发现掘金小秘密多个同享元素过渡

多个同享元素过渡也很简单,只需求调用makeSceneTransitionAnimation()函数的另外一个重载函数即可。

  1. 在前面XML布局的基础上,给TextView增加transitionName特点:textTransform
<!--activity_first.xml文件内容-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layoB c ? g Fut_width="maY ~ W W w 7 Ttch_parent"
    android:layout_hi P 0eight="match_parent"
    android:backU G +  @ground="@color/whs * $ (ite"
    android:orientation="vertical">

    <ImageVR x 6iew
        android:id="@* d  . u f+id/ivImage"
        android:layout_width="wrap_content": % v z 2 a O ( @
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_one"
        android:transitionNameR K - J s {="activU F nityTransform" />

    <TextView
        andr_ = n 0 7oid:id="@+id8 T i # ./tvText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:graU g 6 , j x ivity="center"
        android:transitionName="textTransform"
        android:text="我是第一个Activity"
        android:textColor="@color7 L c U [ - Y ^ e/c_333"
        android:textSize="18sp" n o + x : N n 7 /&} 4 I s _ k d Ugt;
</LinearLayout>

<!--activity_second.xml文件内容-->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="h0 F K z D B Sttp://schemas.android.com/apk/res/an. n 8 0 jdroid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/ivSecondImage"
        android:layout_widthR 8 Z a  N F ? d="match_parent"
        android:layout_height="wrap_content"
        android:layout_} K F [alignParentBot[ B 5 H + ; r 0tom="true"
        android:adjustViewBounds="true"
        android:src="@mipmap/ic_one"
        android:transitionName="activityTr1 A h y _ # ansform" />

    <TextView
        android:layout_width="match_parent"
        a~ R O y | ] u X Vndroid:layout_height="wrap_content"
        android:transi7 & 2  & ktionName="textTransform"
        android:layo6 p j i But_above="@id/ivSecondImage"
        android:layout_marginBottom="10dp"
        android:gravity$ x 6 1 N L $="center"
        android:text="我是第2个Activity"
        android:textColor="@color/c_333"
        android:textSim w V T $ , i 4ze="18sp" />
</RelativeLayout>
  1. 构建多个Pair方针,并传递给makeSceneTransitionAnimation()函数,发动Activity
ivImage.setOnClickListener {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

    val imagePair=Pa? x ?ir<View,String>(ivImage,"activityTrann r C 9 Hsform")
    val textPair=Pair<View,Stri8 ` b x f C F bng>(ivImage,"textTransform")

    val bundle =
        ActivityOptions.makeSceneTransitionD C * o jAnimation(this,
                imagePair,textPair).toBundle()

        startActivity(Intent(this, SecondActivity::class.java), bundle)
    } else {
        startActivity(Intent(this, SecondActivity::class.java))
    }
}

这儿主要是经过将同享视图和transitionName特点的值包装到Pair方针,其他操作和一个同享元素的操作过程并无区别。

作用图:

Android过渡动画,发现掘金小秘密

深坑提示

有时从RX R mecyclerView界面进入到详情页,由于详情页加载延迟,可能呈现没有作用。例如ImageVieO ! sw从网络加载图片,} } { ^ v A 可能A界面到B界面没作用,d ~ M v . ! ) K ,B回到A界面有作用。

Android过渡动画,发现掘金小秘密
处理过程:

  1. setContentView后增加下面代码,延迟加载过渡动画。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    postponeEnterTra6 G ? jnsition()
}
  1. 在同享元素视图加载完毕,或许图片加载完毕后调用下面代码,开端加载过渡动画。
if (Build.VERSION.SDK_INT >= Bu q J Y vild.VERSION_CODES.LOLLIPOP) {
    startPostponedEnterTranw O `sition()
}

Android过渡动画,发现掘金小秘密
例如我是在Glide加载完再调用:

 Glide.with(mContext)
                    .asBitmap()
                    .load(value?.ava} z G H y #tarK ] s i M m ?: "")
                    .listener(object : Requestg i ? b * dLif e . k 6stener<Bitmap> {
                        override fun onResourceReady(resource: Bitmap?J N r B : *, model: Any?, target: Target<Bitmap>?, dataSource: DataSo[ g & D O d eurce?, isFirstResource: Boolean): Boolean {
                            animatok ? K z m # n ArCallback?.invoke()//回调开端加载过渡动画
                            return false
                        }

                        override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Bitmap>?, isFirstResource: Boolean): Boolean {
                            ani9 6 x : j @ . r Pmatorb a B P , ! d k KCallback?.invoke()//回调开端加载过渡动画
                            retur` e A 0 i f % y Zn false
                        }
                    })
                    .apply(RequestOptions.circleCropTransform())
                    .placeholder(R.mipmap.ic_default)
                    .error(R.mipmap.ic_default)
                    .into(authorBinding!!.ivAvatar)

咱们也能够考虑下面代码:

shareElement.viewTreeObserver.addON g %nPreDrawListener(object : ViewTreeObserver.OnPreDrawListener {
                override fun onPreDraw(): Boolean {! r 6 D a @ @ y
                    shareElement!!.O u 3viewTreeObserver.removeO6 E + m $ ! ( enPreDrawListener(this)% U ^ j u J Z
                    if (Build.VERSION.SDK_INT >= BuiJ v ]ld.VERSION_CODES.LOLLIPOP) {
                        aK O m A 8 ; F & wnimato; } NrCallb1 j d n Jack?.invoke()
                    }
                    return true
                }
            })

二)、进入过渡与退出过渡动画

与同享元M # e t 2 _ P素相反的,便是Activity进入与退出过渡动画,两个Activity之间在没有同享的视图状况下进行动画切换。下面先看三种动画作用图:爆破式作用} g W & Y E , –淡入淡出式作用滑动式作用8 O o t

  • 爆破式h } L F y i G E `将视图= # L r移入S s – r = .场景中心或从中移出;
  • 滑动式:将视图从场景的其间一个边际移入或移出;
  • 爆破式:经过更改视图的不透明度,在场景中增加j P g 3 ,视图或从中移除视m % y X T图;

第一个界面选用9 9 y 1 0 / 7Fade淡入淡出作用,第二个界面选用了Explode爆破作用。

Android过渡动画,发现掘金小秘密
前后两个界面都选W H 0 i & T用了Slide滑入滑出作用。

Android过渡动画,发现掘金小秘密
使用Android现有的过渡框架,完成起来是很简单的,过程如下:

  1. ActivityonCreate()办法中调用 setContentView()前设置启用窗口过渡特点;
window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
  1. 创立过渡作用方针SlideExplodeFade;
val slide=S: g , O R 2 z Tlide()
slide.slideEdgv l f 6 c e=Gravity.STAR[ ^ w ? 3 AT
slide.duration=300//作用时长O ! # ~,一般Activity切换时刻很短0 ] q D,不主张设置过长

假如是Slide作用,能够设置slideEdge特点来指定滑动方向,默许是Gravity.BOTTOM

  1. 将过渡作用设置给window相关特点,设置;
//退出当时界面的过渡动画: v _ 2 g & {
window.exitTransition = slide
//进入当时界面的过渡动画
window.enterTransition = slide
//重新进入界面的过渡动画
window.reenterTransition = slide
  1. 调用第二个Activity界面,使用过渡作用。
 startActivity(
        Intent(this, SecondActivity::clas W S . r k ~ = Kss.java),
        ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

那么ActivityOnCreate()办法看起来是这样子的。

    oV P { , z ?verride fun onCreate(savedInstanceState: Bundle?) {
        suB b ? 6  Aper.onCreate(savedInstanceS^ { w D T ytate)
        if (Build.VERSION.SDK_INTh K E W % w >= Build.VERSION_CODES.LL m ) {OLLIPOP) {
            window.requestFeature(Window.FEATURE_COB ^ X g 7 H F UNTENT_TRANSIA D ( E E { ^ MTIONn T l 1 j P i ^ VS)
            window.alloG P - E S @ hwEnterTransitionOverla4 o 4 1 % = P :p=false
            Slide().apply {
                duraO y ;tion = M N 300
                excludeTarget(android.R.id.statusBarBackground, true)
                excludeTarget(android.R.id.navigationBarBackground, true)
            }q z | ) Y.also {
                window.exitTransition = it
                window.enterTrans~ v = Iition = it
                window.reenterTransition = it
            }
        }

        setConteM s 1 ~ *ntView(R.layout.activity_first)

        ivContent.setOnClickListener {
            if (Build.VERSION.SDK_INT >= Build.VERSION_O 8 K J ~CODES.LOLLIPOP) {
                startActivity(
                    Intent(this, SecondActivity::class.java),
                    A% , 0 v I T +ctivityOptions.makeSceneTransitionAnimation(this).toBundle()
                )
            }
        }
    }

上面代码中调用 了excludeTarget()K r B Q d Y法将状态栏和导航栏排除在过渡动c + ( . Z $ 4 +画作用之外。否则会跟着一同起动画作用,不是很美观。

正常状况,退出与进入过渡动画会有一小段穿插的过程,而window.allowEnterTransitionOverlap=falsv 6 : 6 g B b {e便是禁| h Q止穿插,只要退出过渡动画完O : l毕后才会再显示进入过渡动画。

假如第二个ActivityfiB u ~ { $ 4nish掉后D X o o { i,回到第一个Activity界面也想有` c $ T }过渡作用,就不要手动调用/ } e k H G pfinish(),能够调用finishAfteU p ) ? E ! HrTransition ()办法。

三)、兼容Android 5.0前

假如Android 5.0前也想要有切换动画怎么办?

  1. res/anim文件夹下创立想k ? f 6 r ~要的作用:
<alpha
    xmlns:android="http://schemas.android.com/apk/rem B ; 5 is/aH _ 3 Hndroid"
        ao a q H @ R g undroid:interpolator="@interp* v t J ) $olator/decelerate_quad"
        android:fr5 7 ~ ) L $ h fomAlpha="0.0"
        android:toAlpha="1.0$ x ) D r z  g x"
        android:duration="@android:integer/config_lon? 1 ~ Z 4gAnimTime" />
  1. 在发动Activity后调用overridePendingTt y 3 & hransition()办法。
val intentJ f b ^ D h = Intent(this, TestActivity2::class.java)
startActiviR 6 | 3 x zty(intent)
overridePendingTransition(R.anim.fade_in, R.anim& X d O V +  A C.z c A ~ v ~  i +fade_out)

overridePendingTransition()办法第# M 8一个参数为下一个界面进入动画V ) e ^ p ,,第二个参数为当时界面退出动画。

到这儿,Activity的切换使用过渡动画基本就完毕了。有朋友可能会问,只要Activity切换才干使用过渡作用么?

二、布局改变过渡动画

在上一节要了解一个概念:场景。布局的显示与躲藏能够了解分别为一个场景,过渡动画便是处C # M * w . g理场景切换带来的僵硬视觉感受。M Q y TActivity切换过渡动画指在两个Activity之间,而布局改变过渡动画,是指同个Activity之间Vie8 v 4 Aw的改变过渡动画。

一)、手动创立Scene

手动创立场景的话,需求咱们自己创立开始和完毕场景,使用现有的过渡作用来到达两个U 5 4 { g { n C a场景的切换。默许状况下,当时界面便 9 F 1 6 ,是开始场景。

  1. 创立开始场景和完毕场景的xml布局。开x * Q } $ V K始场景和完毕场景需求有相同根元素,例如下Y . U o U 5 (面代码idflConatentFrameLayout布局。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns, 7 :android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvText"
        android:text="内容过渡动画"
        andry * % . x soid:gravity="ceY L 6 + 0 r PnterY O K l"
        android:text) y T @ U x $Sized e )="18sp"
        android:layout_width=0 , 0 b 4 0 W M"match_parent"S L ? u w j O S o
        android:layout_height="50dp"/>

    <FrameLayouV ] I M }t
        android:id="@+id/flCo! % @ntent/ ? p l"
        android:layout_weU o 7ight="1"
        android:layout_width/ n D R="matcl / + . ,h_parent"
        android:layout_height="0dp">
      <incluc u ` , 7de layout="@la$ t * 9 #yout 8 N _ S % H , g/layout_first_scene"/>
    </FrameLayout>

</LinearLayout>

初始视图,第一个场景,布局layoutZ K ? / r I_first_scene.xml^ E A Y (

<?xml version="1.a S 4 z V ?0" enm t : = =coding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vert8 q , h ical">
    <TextView
        android:id="@+id/tvFirst"
        ande Z 9 N z @roid:textSize="18sp"
        android:layout_maj d 3 lrginTop="100dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal|top"
        android:text="~ 2 i a D X j 9 W感谢咱们阅读0 : $ 3 B }文章"` i a />
</: z p [ {LinearLayout>

第二个场景,布局layout_second_scene.xml

<?xml version="1.0" enc? y % W Qoding="utf-8"?>
<LinearLayout xmlns:anq $ B =droid=Q 4 ? / S D 5 n G"http://schemas.android.com/. P w - _ S - Capk0 [ K 1 s G  w/res/android"
    android:layout_width="match_parj , -ent"
    androiY Y - 9 Ld| y b f | + 5:layout_height="match_parent"
    android:orientation="vertical">

    <J B B 8  TTextView
        android:textSize=p  b c f ]"18sp"
        android:layout_marginTop="100dp"
        android:w i + y Z C nlayou_ J Yt_width="match_parent"
        android:layx C Q T V k q -out_height="match_parent"
        android:gravity="center_horizo( 6 = : X Cntal|top"
        android:text="我是新小C ? -梦\n/ # -欢迎咱们点赞支撑一下" />
</LinearLayout>
  1. 创立开始场景和完毕场景。
val fd ] o W ! P x +irstScene = Scene.getSceneForLayout(flContent, R.layoutw q c w 7 } h.layout_first_scene, this)
val second= m E HScene = Scene.getSceneF a S * horLayout(flContentR H ` Z ., R.layout.layout_sencod_scene, this)

默许状况下,过渡动画使用整个场景,假如场景某个View不参加,能够经过过渡作用方针removeTarget()办法进行移除。

Slide(Gn ; H i } i = nravity.TOP).removeTarget(tvNoJoin)
  1. 点击时,进行场景过渡。
tvText.setOnClickListener {
    if (Build.VERSION.SDK_INT >= Build.VE0 , S f +RSION_CODES.LOLLIPOP) {
        ifC G 8 6 (isFirs/ x w K F Ut) {
            TransitionManager.go(secondScene, Slide(Gravity.TOP))
        }_ X F )else{
            TransitionManager.go(firstScene, Slide(Gravity.TOP))
        }
        isFirst=!isFirst
    }
}

TransitionManager.go()第一个参数表明完毕场景,第二个参数表明当时场景退出时过渡作用,当时场景便是初始场景。

K ] [ g作用图:

Android过渡动画,发现掘金小秘密

二)、体系主动创立Scene

这种状况,咱们调用TransitionManager.beginDelayedTransition(sceneRoot)函数时,体系会主动记录当T a 8 : ? ? M asceneRoot节点下一切要进行动画的视图作为开始节点,下一帧中再次记录sceneRoot子节点下一切 开始场景进行动画状态的视图作为完毕场景。这种一般用来改变视图的特点,然后进行动画过渡,如View的宽高。

栗子

界说只要一个正方形的V^ F & ^ r Jiew,经过改变正方形的宽高为原来的2倍,来看看动画作用。

  1. activity_text.xml布局文件,界说idsceneRoot的根节点,也是场景的根节点。
<?xml version="1.0" encoding="utf-8"?>
&lf ! n h ht;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_widj o 1th="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scene; 3 J nRoot"
    a) W R - + G ] + Zndroid:background="@color/colorPrimary">

    <Vie` m V 2 P | t * ~w
        android:id="@+id/vSquare"
        android:layout_width="100dp"
        a0 ] n ^ | =ndroid:layout_height="100dp6 K E"
        android:layout_centerHorizontal="true"
        android:la+ S o U  | s Gyout_marginTop="50dp"
        android:background="@color/whiV v N ] qte" />
</RelativeLayout>
  1. TestActivityOnC+ _ P i breate办法中调用下面代码,将正方形的v P 9 2 O = Z #宽高设置200dp。
vw ~ i 2 B Y bSquare.setOnClickListener {
   TransitionManager.beginDelayedTransition(sceneRoot)
   vSquare.layouts a M G s ; p lParams.apply {
       width = dp2px(200f, this@TestActivity)
       heighM ` At = dp2px(200f, this@TestActivity)
   }.also {
       vSquare.layoutParH + z  n y Z :ams = it
   }
}

作用图:

Android过渡动画,发现掘金小秘密

三、过渡动画作用

上面的动画作用,都是选用体系内置的,那详细有哪些动画作用,或支撑自界说么?

过渡作用类都承继b 0 P [ P ?Transition类,Transition类持有场景切动画的相关信息,子类的主要作用是捕获特点值(例如开始值和完毕值)和如何演奏动画。从这儿也能够看出,过渡动画也k : J T N b 2 l是特点动画的一个扩展与使用。

p ) h w n 8 X g j)、内置过渡动画

体系支撑将任何扩展VisiJ , C O K L : Ibility类的过渡作为进入或退出过渡,内置承继自Visibilit; S Fy的类有ExplodeSlideFd I t _ade;支撑同享元素过渡+ p ! @的有:

  • changeScroll 为方针视图滑动增加动画作用
  • changeBounds 为方针视图布局边界的改变增加动画作用
  • changeClipBounds 为方针视图裁剪边界的改变增加动画作用
  • changeTranZ H 6 P N I j G sform 为方针视图缩放和旋转方面的改变增K + C F G R N加动画作用
  • changeImageTransform 为方针图片尺寸和缩放方面的改变增加动画作用

代码示例:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    TransitionSet().apply {
        addTransition(ChangeImageTransform())
        addTrL ~ C M E o ansition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }.also {
       window.sharedElementEnterTransition=it
    }
}

Transitd l ( S / @ionSet方针是动画的合集,能够将多个过渡作用组织起来。

也能够经过XML布局来完成,在res/transition文件夹创立“:

<?xml versi5 d kon="1.0" encoding="Y c u = 2 z 0utf-8"?&6 6 Ggt;
<transiti3 S L B R zonSet xmln; # [ Q ~ o ] 2 ys:android="http://schemas.android.com/apk/res/android"
    android:dura, * tion="300"
    android:transitionOrdering="togen e . Xther">
    <c6 / ~ ^ h O BhangeImageTransform />
    <changeBounds />
    <fade />
</transitionSet>

t) 2 M 1 d ; m eransitionSX f 4 F netfade...等等的一些特点和 Android矢量$ r S ? $ l / |图动画:每人送一辆掘金牌小黄车文j D q V 8 U y章 讲到的一些特点大同小异,这儿不再复, h S 7述。

代码调用:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Transg Q J T L l ] fitionInflater.from(this).inflateTransition(R.trX R e , sansition.transition_set).also {
        window.sharedElementEnterTransition=it
    }
}

作用图:~ c r X

Android过渡动画,发现掘金小秘密
当现有的过渡作用不满足日常需求时,能够经过D N b承继Transition,定制自己的动画特效。

二)、自界说过渡动画

子类承继Transition类,并重写其三个办法。

class MyTransition : Transition() {
   override fun c- Z . T A /aptureStartValues(transitionValues: TransitionValues?) {}

   override fun captureEndValues(transitionValues: Tra7 | ? .nsitionValues?) {}

   override fun cl j L k k - h DreateAnimator(
       sceneRoot: ViewGroup?,
       startValues: TrF M $ O g I : i $ansitionValues?,
       endVal7 x N ques: TransitionValues?
   ): Animator {
       return super.createAnimati % kor(sceneRoot, startValues, endValues)
   }

}

captureStartVQ j ] h : v a *av D rlues()captureEndValues()D A ` v n * / a p法是必须完成的,捕获动画的开始值和– ] | P v i 0 m完毕值,I Q u . B p – m ucreateAnimator()办法,是用来创立自界说的动画[ p ;

| M , d N 1 NTransitionVR O K l d O Z U Halues能够了解是用来存储View的一些特点值,参数sceneRoot为根视图。

自界说过渡作用感兴– n h k h W ^趣能够参阅:Android自界说Transition动画

好啦,过渡动画就讲到这儿~

参阅文章:

官网文档

酷炫的Activity切换动画,打造更好的用户体验

我的GitHub

【码字不易,点个赞,日j + O m后好查看】

本文使用 mdnice 排版

发表评论

提供最优质的资源集合

立即查看 了解详情