跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • MIUI 的天气城市切换过渡动画还挺好看的,有 MIUI 的同学吗?我想仿一个,能大致说一下原理吗?
未分類
16 9 月 2020

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

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

資深大佬 : krystal9527 7

如题,切换过程动画:[动画视频链接]( https://cdn.nextto.top/2020/09/11/Screenrecorder-2020-09-11-16-01-12-21.mp4)
大佬有話說 (17)

  • 資深大佬 : also24

    看起来有点像 Shared Element Transition 的效果。

    https://developer.android.com/training/transitions/start-activity

  • 主 資深大佬 : krystal9527

    @also24 感觉不太像,通过慢放视频,先是点击子项那里出现一个带灰度的框,然后框的高度和宽度逐渐扩张到全屏幕,灰度也逐渐消失,最后动画完成。期间看上去没有共享元素。

  • 資深大佬 : dying4death

    可以搜搜 activity 或 fragment 转场动画

  • 資深大佬 : wvitas

    motionLayout 了解下

  • 資深大佬 : ruby109

    这个感觉和 iOS 的 Appstore 的效果很像…

  • 資深大佬 : daquandiao2

    录屏用的什么软件

  • 資深大佬 : Yenben

    Circular Reveal

  • 主 資深大佬 : krystal9527

    @daquandiao2 MIUI 自带的录屏

  • 主 資深大佬 : krystal9527

    @Yenben 揭露动画不会对内容进行缩放

  • 主 資深大佬 : krystal9527

    @wvitas 我研究一下

  • 資深大佬 : Lin0936

    非要一模一样的话自定义 transition 就行

  • 資深大佬 : chenyu8674

    逐帧播放会发现其实是两段动画,原 View 的点击和全屏 View 的放大
    分界点在 01:429

  • 主 資深大佬 : krystal9527

    @wvitas 这个可行,多谢了

  • 資深大佬 : cyberpoint

    好像挺简单的,加个过度就解决了

  • 資深大佬 : IGJacklove

    这好像没啥难的吧。。。flutter 写这种路由动画很简单的,用 hero 可以做到那个框一直显示然后过度到下一个页面。
    https://github.com/blaugold/circular_clip_route

    可以看一下这种效果,想要圆还是方形改一下 clip 就可以了。

  • 資深大佬 : fansangg

    这个轮子满足你
    https://github.com/skydoves/TransformationLayout

  • 主 資深大佬 : krystal9527

    @fansangg 这个也不错,但是不完全符合图示 MIUI 的动画。我用 Motion Layout 实现了一个 demo,如果你感兴趣可以[看看]( https://github.com/ijkzen/MotionLayoutDemo.git)

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具