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

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

  •  4
     
  •   Char2s · 2022-11-23 14:02:58 +08:00 · 4959 次点击
    这是一个创建于 731 天前的主题,其中的信息可能已经有所发展或是发生改变。

    闲来无事,尝试实现了一下 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

    15 条回复    2023-02-04 12:48:45 +08:00
    nzbin
        1
    nzbin  
       2022-11-23 17:18:02 +08:00
    beginor
        2
    beginor  
       2022-11-23 17:33:27 +08:00
    👍
    nomagick
        3
    nomagick  
       2022-11-23 18:20:21 +08:00
    厉害了,楼主高中刚毕业,起点就这么高
    wunonglin
        4
    wunonglin  
       2022-11-23 18:35:56 +08:00
    搞动画是真的累。op👍
    learningman
        5
    learningman  
       2022-11-23 18:49:16 +08:00
    导航栏展开没有动画是还没写还是 bug 了
    Char2s
        6
    Char2s  
    OP
       2022-11-23 19:37:12 +08:00
    @learningman 没写哈哈,那块动画一直有点问题,后来就摆了,之后再慢慢补
    ExplodingFKL
        7
    ExplodingFKL  
       2022-11-24 00:50:06 +08:00 via Android
    ExplodingFKL
        8
    ExplodingFKL  
       2022-11-24 00:50:32 +08:00 via Android
    搞过渡动画实在是太累了
    dabbit
        9
    dabbit  
       2022-11-24 09:09:00 +08:00
    肯搞动画的都是肝佬
    theEtran
        10
    theEtran  
       2022-11-24 11:02:19 +08:00
    完成度看起来很高啊
    Char2s
        11
    Char2s  
    OP
       2022-11-24 20:53:55 +08:00
    @nzbin 啊一下子没认出来,居然是您哈哈!谢谢捧场!很久以前就有关注您的很多项目!
    wbzd
        12
    wbzd  
       2022-12-19 17:48:41 +08:00
    @Char2s 太厉害了!请问这个客户端在哪里可以下载?
    wbzd
        13
    wbzd  
       2022-12-19 17:53:27 +08:00
    @Char2s 啊,我懂了,这是一个 Demo 。
    wbzd
        14
    wbzd  
       2022-12-19 17:54:20 +08:00
    @Char2s 手机端,希望可以增加手势。
    ads1029
        15
    ads1029  
       2023-02-04 12:48:45 +08:00
    年少可畏 楼主加油啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2825 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 00:11 · PVG 08:11 · LAX 16:11 · JFK 19:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.