V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
likaci
V2EX  ›  问与答

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

  •  
  •   likaci · 2014-06-26 15:39:21 +08:00 · 7429 次点击
    这是一个创建于 3810 天前的主题,其中的信息可能已经有所发展或是发生改变。


    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
        1
    27149  
       2014-06-26 15:42:22 +08:00
    感觉是不错,国外的交互真是强
    likaci
        2
    likaci  
    OP
       2014-06-26 15:52:37 +08:00
    27149
        3
    27149  
       2014-06-26 15:58:26 +08:00   ❤️ 1
    @likaci 这个是ui kit 做的原型,演示用的
    doskoi
        4
    doskoi  
       2014-06-26 18:32:44 +08:00   ❤️ 1
    不难,交互动画关键是想象力。

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

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

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

    如果会Core Animation,顺便一说这些动画只是presentation layer的action。
    whuhacker
        5
    whuhacker  
       2014-06-26 22:05:50 +08:00   ❤️ 1
    http://www.polymer-project.org/

    Material Design 的前端实现
    vincent4j
        6
    vincent4j  
       2014-07-04 03:42:55 +08:00   ❤️ 1
    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
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2691 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 12:13 · PVG 20:13 · LAX 04:13 · JFK 07:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.