写给设计师看的 Framer JS —— 基础物理交互（二）

作者: 陈加新 | 来源:发表于2015-11-08 16:01 被阅读683次

写给设计师看的 Framer JS —— 基础物理交互（二）
写给设计师看的 Framer JS —— 基础物理交互（一）
交互设计工具Framer新版体验——前所未有的设计方式
构建自己的 framer.js 工具链
写给设计师看的 Framer JS —— 制作原型前的准备
Framer 10天交互动效特训 - 4
JS交互微信之获取收货地址
Framer X 上手体验
PM需要读的书籍
产品修炼清单

本文所有图文（除了网页截图）皆为原创，版权完全归我本人所有。如有未经允许的「任何部分或全部」的转载、抄袭、盗用，全部默认为：您已同意并接受给我本人 3 万元。本文「发布」时间：2015 年 11 月 08 号 16:01。

本系列文章将直接从实践角度出发，本着「写完一篇文章再砍掉一半」的原则，不必要的解释和说明没有展开。

阅读前请精读 Framer JS 官网的 Learn 并在阅读中配合官方文档实时查阅。

本系列文章将不定期连载，最终制作成电子书，名为《写给设计师看的 Framer JS》

需要体验效果就请点击链接，�支持任何基于 Webkit 的浏览器，不区分平台和设备。

在基础物理交互（一）中，点击文中链接进行交互时可以发现：它只能点击一次，无法通过点击变化后的图形回到原样。

这是因为我们没有定义之后的操作，要定义下一次的操作结果很容易，在上面交互事件的基础上按部就班再来一次即可，但是如果一个交互是来回变化的，难道我们要定义无数次的操作结果么？

解决这个问题要理解它背后的原理。假设一个对象的交互结果有两种：0 和 1，我们将 0 和 1 看作两种状态，那么设定一次操作让其在这两种状态之间切换，即可解决上述问题。

再进一步想，所有需要用到多次的状态（交互结果），都应该定义好之后按实际场景分配使用，这样不仅让效率更高、代码更简洁，而且有利于整理思路和逻辑关系。

综上所述，当交互结果需要在不同场景使用到多次时，都应该使用 states 去实现。在 Framer 中为图层添加状态并指定变化时间、曲线、延时等：

layer.states.add
    state1:
        x: 0
        y: 0
        scale: 1
    state2:
        x: 200
        y: 200
        scale: 1.5
    state3:
        x: 400
        y: 400
        scale: 2
    ...
layer.states.animationOptions = 
    curve: "ease"
    time: 0.5
    delay: 0.2

回到一开始的例子，通过 states 让图层实现循环交互：

# add states for layer
layer.states.add
    rounded:
        borderRadius: 15
        scale: 1.5
        rotation: 180
layer.states.animationOptions = 
    time: 0.5
    curve: "ease"

# set click event
layer.on Events.Click, ->
    layer.states.next ["rounded", "default"]

为之前 “1” 的状态起个名字叫 rounded，它的参数与之前一模一样，唯一的不同是：它现在不仅是一种交互结果，同时还是一个可调用的 state。

layer.states.next 的语义是按照设定好的交互事件切换状态列表，["rounded", "default"] 就是它的状态列表，相当于两首歌列表循环。
default 就是 layer 的初始状态，Framer 默认最开始 layer 的属性为 default，无需我们定义。

状态切换的交互

亲自体验：http://share.framerjs.com/h9zs7epwgz0p/

以 twitter 的发布交互进入实战，准备两张去掉状态栏的截图，去网上下载一个 iOS 9 的 UI Kit 找到状态栏素材，如图所示：

�所需截图

参照第一篇文章进行上传操作：

�有序整理 groups 列表

�xy 坐标设为 0

完成这个效果所需的代码：

$ = Framer.Importer.load "imported/Untitled 2"

# default states
Utils.globalLayers $
bg = new BackgroundLayer backgroundColor: "black"
post.y = 1334

# create post action respond area
postaction = new Layer
    width: 88
    height: 88
    x: 750 - 88
    y: 40
    superLayer: notific
    backgroundColor: false

# post action events
postaction.on Events.Click, ->

    # notific page animate
    notific.animate
        properties:
            opacity: 0.8
            scale: 0.93
        time: 0.4
        curve: "ease"

    # post page animate
    post.animate
        properties:
            y: 0
        time: 0.4
        curve: "ease"

# create cancel action respond area
cancel = new Layer
    width: 88
    height: 88
    x: 750 - 88
    y: 40
    superLayer: post
    backgroundColor: false

# cancel action events
cancel.on Events.Click, ->

    post.animate
        properties:
            y: 1334
        time: 0.4
        curve: "ease"
    
    notific.animate
        properties:
            opacity: 1
            scale: 1
        time: 0.4
        curve: "ease"

实际效果（注意看状态栏，因为它的位置是固定不变的，故需要重新准备素材）：