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

[Char2s]

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

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

Links

• GitHub Repository: https://github.com/TheNightmareX/reply
• GitHub Pages: https://thenightmarex.github.io/reply/

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

Design

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

[nzbin]

强

[beginor]

👍

[nomagick]

厉害了，楼主高中刚毕业，起点就这么高

[wunonglin]

搞动画是真的累。op👍

[learningman]

导航栏展开没有动画是还没写还是 bug 了

[Char2s]

@learningman 没写哈哈，那块动画一直有点问题，后来就摆了，之后再慢慢补

[ExplodingFKL]

强

[ExplodingFKL]

搞过渡动画实在是太累了

[dabbit]

肯搞动画的都是肝佬

[theEtran]

完成度看起来很高啊

[Char2s]

@nzbin 啊一下子没认出来，居然是您哈哈！谢谢捧场！很久以前就有关注您的很多项目！

[wbzd]

@Char2s 太厉害了！请问这个客户端在哪里可以下载？

[wbzd]

@Char2s 啊，我懂了，这是一个 Demo 。

[wbzd]

@Char2s 手机端，希望可以增加手势。

[ads1029]

年少可畏 楼主加油啊