Be simple

”当たり前”が誰かのためになる

Transitionについて調べていて気になった記事の感想

はじめに

こんばんは!

お久しぶりです。もはや隔週になってきたzukkeyです!

 

今回は、AndroidのSharedElementを使ったTransitionについていろいろと調べていたのでメモとして残しておこうと思います。

 

SharedElementTransitionとは?

共有要素を使った途切れない画面遷移のことです。

画面AからBに遷移する際に、同じViewを共有しているものに対して遷移の過程で途切れないやつです。

Twitterで画像をタップすると詳細に行って戻ってくるときに画像に対してアニメーションしながら遷移を実現するためのやつです。

 

僕も以前簡単なものを実装したので、その際に導入などまとめたので下記を参照してください。

rozkey.hatenablog.com

 

今回は、調べている間に勉強になった記事を2つ紹介していきます。

 

 

Circular Reveal & Shared Elements - ArcMotion

記事は下記参照。

blog.usejournal.com

 

これはリストの丸い要素から遷移後に拡大するアニメーションを実現するための方法について紹介してくれています。

 

ここで、学びになったのはArcMotionについてです。

 

Material DesignガイドラインにおけるArcMotionの実装方法についても書かれています。

https://material.io/design/assets/1JLs4KnMsty5jzCOR05u3FtQ9unLSTAAZ/01-handles-arc.mp4

 

遷移前から遷移後のArcMotionは良いですが、戻りはMaterial Designガイドラインとちょっと違う動きに見えるものの、Transitionの属性を変えればいけそうなので基本的にこのブログに書いてあるように実装すればできます。

 

僕も実際にやってみたらいけました!

 

記事中にもありますが、res > transitionの中でtransitionのxmlを下記のように定義します。

 

gist.github.com

 

そのあとに遷移先のActivityの中でTransitionをinflateして、 

window.sharedElementEnterTransition

にinflateしたTransitionを入れることで、ArcMotionを実現できます。

gist.github.com

 

コードとgif付きで記事の中で解説されているので、読むと勉強になります。

 

Custom Transition in Android

記事は下記参照。

medium.com

 

テキストのカラーや色やサイズを変える際にカスタムTransitionを作成して、実現する方法について解説がされています。

 

遷移元と遷移先で色やサイズを変更したい場合は、下記のようにTransitionクラスを継承したカスタムTransitionを作成する必要があります。

gist.github.com

 

captureStartValuesとcaptureEndValuesはそれぞれ遷移前と遷移後の値をキャプチャ―してそれをもとに、createAnimatorで自作する必要があります。

今回はテキストのカラーを例に挙げて解説されているので、勉強になりました。

 

おわりに

今回は小ネタ感になってしまったのですが、僕は勉強になったので読んでみる価値はあると思います!おすすめです。

 

僕もサンプルを作りながら日々勉強中です。

 

マテリアルデザインの動きを実現するためにも、TransitionとAnimationは奥が深いのでGoogleDeveloperのドキュメントを読んだり、Mediumの記事を漁ったりしながら試行錯誤してます。

 

もう少し調べてまとまってきたら、TransitionとAnimationについて解説記事をまた書こうと思います!

 

それでは、またー