Angular 全局页面切换动画 me-pageloading

最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情http://tympanus.net/codrops/2014/04/23/page-loading-effects/. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做成一个angular module, 方便以后添加类似效果时, 直接使用.

Github: https://github.com/jeremial/me-pageloading

做好的demo效果

1. 配合 angular-ui-router使用, 效果http://isay.me/me-pageloading/angular-ui-router.html
2. 配合 angular-route使用, 效果http://isay.me/me-pageloading/angular-route.html

目前整个模块可以零配置工作, 但是由于angular-route的实现机制, `$routeChangeSuccess`在页面初始化后会触发两次, 因此会造成页面直接进入后就会触发一次效果. 这个问题可以通过禁用`me-pageloading`的自动加载解决.

在angular-ui-router中没有此问题.

scarlex

2014 年 7 月 12 日

@kmvan
我倒是觉得动画效果交互中的关键。动画效果对于提升用户体验有很大的帮助。Google 最近的 Material Design 也在动画上面下了很大功夫。

ik0r

2014 年 7 月 12 日

@kmvan 如果是为了用动画而用动画, 当然是没有意义的, 但是如果应该用的地方, 用对了动画, 对用户体验的提升就不是一点半点的了

kmvan

2014 年 7 月 13 日

@Jeremial
@scarlex
我看不出 windows 的过渡动画有什么意义，什么淡入淡出，进出都耗上500ms 直接慢了一秒，大大们不觉得吗？

scarlex

2014 年 7 月 13 日

@kmvan
我想了一会都没想到... windows 哪些地方会有动画？

如果放到 app/web app 上面去考虑，动画可以起到缓冲和引导用户的作用。
你可以想想如果没有动画的话，当你向左/向右滑动的时候，侧边栏就是突然占据了画面的一部分位置，这会让人感到不适和困惑。

你可以再想想，如果在 Android/iOS/WP 中把全部动画效果都移除的话，用户使用起来会怎样？（对于你来说可能没什么变化）

如 @Jeremial 所说，动画用在对的地方的话，可以很好的提升用户体验。

现在的大部分产品都会去考虑用户体验的问题。如果你和你的竞争对手做的产品功能都是一样的，但是你的产品并没有考虑到用户体验，但竞争对手的产品却在用户体验升花了很多功夫，用户会更加倾向哪种产品？

kmvan

2014 年 7 月 13 日

@scarlex 手指滑动的动画这个需要。我只是认为，例如win的菜单显示，最大化最小化窗口，那些动画显然是多余的，瞬间显示所需内容比逐渐显示好，我认为这能提高我工作的效率，你不这样认为吗？

scarlex

2014 年 7 月 13 日

@kmvan
刚才开虚拟机试了一下，嗯，windows下那样的粗糙的动画还不如直接去掉。看起来好不爽，好生硬的过度。这个可以当成一个动画用的不对的栗子吧

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/122321

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.