Framer js 实现类 Origami Swipe 跟随效果

背景：Framer.js 实现滑动切换时，有 PageComponent 函数，但自定义范围较窄，也无法实现可交互动画。Origami 的 Swipe 组件可以实现交互，弹性效果也很赞，可惜只有 Start 与 End 两个状态，无法实现向左向右滑动两种效果。

实现效果：

Framer: draggable + states.switch

自带效果：

Origami

framer.js

实现步骤：

1. 建立一个主 Layer

2. 使用 For x in [0…30] 建立 30 个子 Layer，同时子 Layer 有 A/B 两个状态。

3. 主 Layer DragEnd 时，子 Layer 在 A/B 两个状态之间切换。

4. 主 Layer onDrag 时，利用计算修改子 Layer 的各项参数

关键参数：

- Math.round( LayerA.x/210) 计算出当前处于的页面编号，也是子 Layer 的编号。

- LayerA.childrenWithName(“Layer#{i}”)[0] 可以选取对应的子 Layer。（如果有更好的方法，请联系我。）

- states.switchInstant(“stateA”) 状态切换函数。

- for i in [0...date]
     layer = new Layer
     parent: LayerA
     name: "Layer#{i}"

Thanks