美文网首页设计工具工具MG动画UI动效
动效软件 Form 教程:状态控制

动效软件 Form 教程:状态控制

作者: 镇雷 | 来源:发表于2014-12-28 21:53 被阅读1497次

    这篇文章根据官方推荐的视频,来介绍一下如何用 Form 实现:

    分别先添加两个名为 State Output 和 State Input 的 Patch 到当前工程中。这里说明一下,State Output 能够输出一个预先设定的数值并且存储在 State Snput 当中,换言之就是一个状态的存储,这个状态可能对应的是拖动某个控件时其位置等信息,比如接下来具体讲解的这个例子。

    同时再添加一个Color View Patch 和一个 Math Patch,设置为加法,按下图所示连接。简单解释一下,从 State Output 会输出一个数值(默认是0),传递给加法器之后(设置+0.1),会进一步传递给 State Input 和 Color View。到 State Input 中的数据会被暂时存储,通过 State 接口返回给 State Output,再次输出进行累加。而每一次累加的结果也会通过 X Position 接口使得 Color View 发生变化。最后的结果就是,白色方块慢慢匀速向右侧滑动。(从连接线上的数值能看到加法以后的结果)

    现在,我们希望白色方块能够跟随手指的拖动而移动。添加 Pan Interaction Patch,并做如下图连接。原本 State Output 中输出的值是+0.1,现在,将 X Delta 接口传递给加法器进行累加,结果就是 State Output 的数值加上 X 坐标的变化量。Pan Interaction 能够搜集白色方块上手势滑动的变量,效果是现在方块可以随着手指向左右移动了。

    一般我们还会限定控件的移动返回,比如不能让这个白色方块移动到界面之外(因为那样你就不能操纵它回来了),所以这里添加一个Clamp Patch,名字很形象,叫做夹具。将 Clamp Patch 的最小值和最大值分别设置为0和120,并且放置在 Color View 和加法器之间,如下图所示。这样,白色方块就只能在屏幕内滑动,而不会越过边界了。

    有的时候,像这类滑动控件的动画经常会用到,因此可以将这些动作打包并添加到自己的库中。首先把除了 Color View 以外的所有 Patch 打包成一个 Group,命名为Pan Clamp。双击进入 Group 的内部,我们要给这个通用组建设置输入和输出窗口。添加一个 Input Splitter Patch,,在 Patch 上右键,选择Publish Outpus,选择 Output,将接口输出:

    最后给 Clamp 的最大最小值也设置入口,总体如图连接。

    现在,点击顶部的 Document,再选择 Add Selection to Library,填写描述等内容,就完成了。

    视频下载

    相关文章

      网友评论

      • 孙梦超:origamI 和 form相比 哪个好点?
      • aaa888311865:BTW,用scroll gesture,动效似乎更流畅一些呢:)
      • aaa888311865:写得非常赞!
        不过,view跟随手指移动那部分,添加的patch是否应该为pan gesture而不是pan interaction?希望雷神有时间看一下
      • 02e8110b1470:教程很棒,希望能介绍多点form的各种patch的功能和用法,谢谢!
      • 02e8110b1470:视频没有了么
      • 镇雷:@airuan 啊!!真抱歉 马上改回来!
      • lkl_ue:非常喜欢你的分享,然后这篇的标题from貌似拼写有。

      本文标题:动效软件 Form 教程:状态控制

      本文链接:https://www.haomeiwen.com/subject/ihtztttx.html