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

Material Motion 的最完整实现 - Material Studies 示例应用 Reply 的 Angular 实现现已公开

  •  2
     
  •   Char2s · 12 天前 · 932 次点击

    闲来无事,尝试实现了一下 Material Studies 里的这个叫 Reply 的跨平台邮件应用,目标是尽可能保证用户在任何设备屏幕上都能得到媲美原生应用的用户体验,花了很多精力在 Material Motion 的动画效果上,好在最终的效果还是很不错的。

    Reply Material Motion Reply Material Motion Mobile

    不得不说 Angular 的动画引擎是真的很强大,但即便如此有些动画效果比如 Shared Element Transition 和 Container Transform 还是没法直接用内置的动画引擎实现。这方面的动画效果的实现方式我是借鉴的 React 的 Framer Motion 里的 Layout Projection 技术。Layout Projection 的发明者 Matt Perry 在几年前有过一个关于这个技术的演讲,还发布了一篇技术细节博客,但无奈现在已经打不开了,此处多亏 taowen 在 GitHub Gists 上传的博客副本 我才得以在 Angular 实现 Layout Projection 。

    Links

    如果你对这个项目有兴趣,希望你可以 star 一下项目的 GitHub 仓库,如果可以分享给你的朋友就更好了!如果可以 follow 一下我那就更好上加好了!:D
    马上要出国读大学了,我希望能给教授留下一个深刻的第一印象,非常感谢!

    Design

    Reply 是一个邮件客户端,使用 Material Design 组件和 Material 主题定制来创建品牌交流体验。

    Reply Overview

    Reply Layout

    11 条回复    2022-11-24 20:53:55 +08:00
    nzbin
        1
    nzbin  
       12 天前
    beginor
        2
    beginor  
       12 天前
    👍
    nomagick
        3
    nomagick  
       12 天前
    厉害了,楼主高中刚毕业,起点就这么高
    wunonglin
        4
    wunonglin  
       12 天前
    搞动画是真的累。op👍
    learningman
        5
    learningman  
       12 天前
    导航栏展开没有动画是还没写还是 bug 了
    Char2s
        6
    Char2s  
    OP
       12 天前
    @learningman 没写哈哈,那块动画一直有点问题,后来就摆了,之后再慢慢补
    ExplodingFKL
        7
    ExplodingFKL  
       12 天前 via Android
    ExplodingFKL
        8
    ExplodingFKL  
       12 天前 via Android
    搞过渡动画实在是太累了
    dabbit
        9
    dabbit  
       12 天前
    肯搞动画的都是肝佬
    theEtran
        10
    theEtran  
       11 天前
    完成度看起来很高啊
    Char2s
        11
    Char2s  
    OP
       11 天前
    @nzbin 啊一下子没认出来,居然是您哈哈!谢谢捧场!很久以前就有关注您的很多项目!
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4002 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 01:16 · PVG 09:16 · LAX 17:16 · JFK 20:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.