MIUI 的天气城市切换过渡动画还挺好看的，有 MIUI 的同学吗？我想仿一个，能大致说一下原理吗？
krystal9527 · 2020-09-11 16:09:54 +08:00 · 10359 次点击这是一个创建于 1530 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，切换过程动画：[动画视频链接]( https://cdn.nextto.top/2020/09/11/Screenrecorder-2020-09-11-16-01-12-21.mp4)
 |
1
also24 2020-09-11 16:16:43 +08:00
看起来有点像 Shared Element Transition 的效果。
https://developer.android.com/training/transitions/start-activity |
 |
2
krystal9527 OP @also24 感觉不太像，通过慢放视频，先是点击子项那里出现一个带灰度的框，然后框的高度和宽度逐渐扩张到全屏幕，灰度也逐渐消失，最后动画完成。期间看上去没有共享元素。
|
 |
3
dying4death 2020-09-11 16:24:15 +08:00
可以搜搜 activity 或 fragment 转场动画
|
 |
4
wvitas 2020-09-11 16:25:08 +08:00
motionLayout 了解下
|
 |
5
ruby109 2020-09-11 16:25:19 +08:00  1
这个感觉和 iOS 的 Appstore 的效果很像...
|
 |
6
daquandiao2 2020-09-11 16:43:52 +08:00
录屏用的什么软件
|
 |
7
Yenben 2020-09-11 16:48:59 +08:00
Circular Reveal
|
|
8
krystal9527 OP @daquandiao2 MIUI 自带的录屏
|
|
9
krystal9527 OP @Yenben 揭露动画不会对内容进行缩放
|
|
10
krystal9527 OP @wvitas 我研究一下
|
 |
11
Lin0936 2020-09-11 17:09:00 +08:00
非要一模一样的话自定义 transition 就行
|
 |
12
chenyu8674 2020-09-11 17:27:40 +08:00
逐帧播放会发现其实是两段动画，原 View 的点击和全屏 View 的放大
分界点在 01:429 |
|
13
krystal9527 OP @wvitas 这个可行，多谢了👍
|
 |
14
cyberpoint 2020-09-11 23:08:10 +08:00
好像挺简单的，加个过度就解决了
|
 |
15
IGJacklove 2020-09-12 09:36:00 +08:00 via Android
这好像没啥难的吧。。。flutter 写这种路由动画很简单的，用 hero 可以做到那个框一直显示然后过度到下一个页面。
https://github.com/blaugold/circular_clip_route 可以看一下这种效果，想要圆还是方形改一下 clip 就可以了。 |
 |
16
fansangg 2020-09-12 22:55:26 +08:00
|
|
17
krystal9527 OP @fansangg 这个也不错，但是不完全符合图示 MIUI 的动画。我用 Motion Layout 实现了一个 demo，如果你感兴趣可以[看看]( https://github.com/ijkzen/MotionLayoutDemo.git)
|
Select Language