MIUI 的天气城市切换过渡动画还挺好看的，有 MIUI 的同学吗？我想仿一个，能大致说一下原理吗？

2020-09-11 16:09:54 +08:00
 krystal9527
如题，切换过程动画：[动画视频链接]( https://cdn.nextto.top/2020/09/11/Screenrecorder-2020-09-11-16-01-12-21.mp4)
11008 次点击
所在节点    Android
17 条回复
also24
2020-09-11 16:16:43 +08:00
看起来有点像 Shared Element Transition 的效果。

https://developer.android.com/training/transitions/start-activity
krystal9527
2020-09-11 16:23:46 +08:00
@also24 感觉不太像，通过慢放视频，先是点击子项那里出现一个带灰度的框，然后框的高度和宽度逐渐扩张到全屏幕，灰度也逐渐消失，最后动画完成。期间看上去没有共享元素。
dying4death
2020-09-11 16:24:15 +08:00
可以搜搜 activity 或 fragment 转场动画
wvitas
2020-09-11 16:25:08 +08:00
motionLayout 了解下
ruby109
2020-09-11 16:25:19 +08:00
这个感觉和 iOS 的 Appstore 的效果很像...
daquandiao2
2020-09-11 16:43:52 +08:00
录屏用的什么软件
Yenben
2020-09-11 16:48:59 +08:00
Circular Reveal
krystal9527
2020-09-11 16:59:16 +08:00
@daquandiao2 MIUI 自带的录屏
krystal9527
2020-09-11 17:06:19 +08:00
@Yenben 揭露动画不会对内容进行缩放
krystal9527
2020-09-11 17:08:03 +08:00
@wvitas 我研究一下
Lin0936
2020-09-11 17:09:00 +08:00
非要一模一样的话自定义 transition 就行
chenyu8674
2020-09-11 17:27:40 +08:00
逐帧播放会发现其实是两段动画，原 View 的点击和全屏 View 的放大
分界点在 01:429
krystal9527
2020-09-11 17:59:40 +08:00
@wvitas 这个可行，多谢了👍
cyberpoint
2020-09-11 23:08:10 +08:00
好像挺简单的，加个过度就解决了
IGJacklove
2020-09-12 09:36:00 +08:00
这好像没啥难的吧。。。flutter 写这种路由动画很简单的，用 hero 可以做到那个框一直显示然后过度到下一个页面。
https://github.com/blaugold/circular_clip_route

可以看一下这种效果，想要圆还是方形改一下 clip 就可以了。
fansangg
2020-09-12 22:55:26 +08:00
这个轮子满足你
https://github.com/skydoves/TransformationLayout
krystal9527
2020-09-13 15:46:22 +08:00
@fansangg 这个也不错，但是不完全符合图示 MIUI 的动画。我用 Motion Layout 实现了一个 demo，如果你感兴趣可以[看看]( https://github.com/ijkzen/MotionLayoutDemo.git)

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/706197

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX