Material Design 里这种交互效果是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3804 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples
---
还有花瓣这个 http://huaban.com/boards/8818456/
---
只会平移和渐变，感觉自己弱爆了。
只是演示动画？那这种演示动画用什么软件做的？
谢谢

演示

平移

交互

6 条回复 • 2014-07-04 03:42:55 +08:00

27149

2014-06-26 15:42:22 +08:00

感觉是不错，国外的交互真是强

likaci

2014-06-26 15:52:37 +08:00

@27149 还有这个

http://www.uisdc.com/dribbble

27149

2014-06-26 15:58:26 +08:00

@likaci 这个是ui kit 做的原型，演示用的

doskoi

2014-06-26 18:32:44 +08:00

不难，交互动画关键是想象力。

你可以理解为从初始状态A，到目标状态B。
寻找相同的部分补充过渡动画，效果越平滑越好。
不同的部分有alpha的变化或transition，或者结合在一起，甚至更多效果一起。

如第一个图就有
主要图案scale的变化，整体frame的变化，延时的圆形滑块的透明度和scale的变化。

第二个也一样，你可以分开来理解，首先点了名字，目标状态的名字从这个位置初始化做transition，名字在目标结束的位置是不变的，所以移动到该去的位置就行了。背景的alpha变化，底部信息也是alpha的变化和transition的结合。

如果会Core Animation，顺便一说这些动画只是presentation layer的action。

whuhacker

2014-06-26 22:05:50 +08:00

http://www.polymer-project.org/

Material Design 的前端实现

vincent4j

2014-07-04 03:42:55 +08:00

Material Design 中文版 (Google I/O 2014 最新推出的全平台设计指南)

Google I/O(2014) 最新推出的 Material Design 势必会成为全平台设计规范，其适配包括 Android Mobile, Android Table, Desktop Chrome 在内的所有平台；design.1sters.com 采用高效的 GitHub 协同翻译模式在一周之内全部译完，希望能帮助到国内的设计师和开发者！

http://design.1sters.com