Material Motion 的最完整实现 - Material Studies 示例应用 Reply 的 Angular 实现现已公开
Char2s · 2022-11-23 14:02:58 +08:00 · 4923 次点击这是一个创建于 725 天前的主题，其中的信息可能已经有所发展或是发生改变。
闲来无事，尝试实现了一下 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 主题定制来创建品牌交流体验。
 |
1
nzbin 2022-11-23 17:18:02 +08:00
强
|
 |
2
beginor 2022-11-23 17:33:27 +08:00
👍
|
 |
3
nomagick 2022-11-23 18:20:21 +08:00
厉害了，楼主高中刚毕业，起点就这么高
|
 |
4
wunonglin 2022-11-23 18:35:56 +08:00
搞动画是真的累。op👍
|
 |
5
learningman 2022-11-23 18:49:16 +08:00
导航栏展开没有动画是还没写还是 bug 了
|
 |
6
Char2s OP @learningman 没写哈哈，那块动画一直有点问题，后来就摆了，之后再慢慢补
|
 |
7
ExplodingFKL 2022-11-24 00:50:06 +08:00 via Android
强
|
|
8
ExplodingFKL 2022-11-24 00:50:32 +08:00 via Android
搞过渡动画实在是太累了
|
 |
9
dabbit 2022-11-24 09:09:00 +08:00
肯搞动画的都是肝佬
|
 |
10
theEtran 2022-11-24 11:02:19 +08:00
完成度看起来很高啊
|
 |
15
ads1029 2023-02-04 12:48:45 +08:00
年少可畏 楼主加油啊
|
Select Language