V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
krystal9527
V2EX  ›  Android

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

  •  
  •   krystal9527 · 2020-09-11 16:09:54 +08:00 · 5741 次点击
    这是一个创建于 1294 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如题,切换过程动画:[动画视频链接]( https://cdn.nextto.top/2020/09/11/Screenrecorder-2020-09-11-16-01-12-21.mp4)
    17 条回复    2020-09-13 15:46:22 +08:00
    also24
        1
    also24  
       2020-09-11 16:16:43 +08:00
    看起来有点像 Shared Element Transition 的效果。

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

    可以看一下这种效果,想要圆还是方形改一下 clip 就可以了。
    fansangg
        16
    fansangg  
       2020-09-12 22:55:26 +08:00
    krystal9527
        17
    krystal9527  
    OP
       2020-09-13 15:46:22 +08:00
    @fansangg 这个也不错,但是不完全符合图示 MIUI 的动画。我用 Motion Layout 实现了一个 demo,如果你感兴趣可以[看看]( https://github.com/ijkzen/MotionLayoutDemo.git)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5373 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:34 · PVG 15:34 · LAX 00:34 · JFK 03:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.