Framer 10天交互动效特训 - 7

Framer 特训7

第三个案例实践，iPhone 的锁屏界面

最终效果

该动效主要使用的是 PageComponent，对此不熟悉的同学可以看 Framer 15天交互动效特训 - 4 复习下。主要用与滚动 Banner 和页面切换时使用。

我们先用 Sketch 把需要的静态图片做出来。每个控件是单独的，分别是状态栏，解锁界面文字，首页文字，背景图。方便 Framer 进行调用。

Static images

操作重点：

1. 图片整理
2. PageComponent 创建
3. 增加交互效果

图片整理

将 Sketch 中的图片分别导出，然后拖入 Framer 中。

# Import images                 
bg = new Layer
    width: 750
    height: 1334
    image: "images/bg.png"

home = new Layer
    width: 750
    height: 1344
    image: "images/home.png"

numbers = new Layer
    width: 750
    height: 1344
    image: "images/numbers.png"

status = new Layer
    width: 750
    height: 40
    image: "images/status.png"

注意事项

1. Sketch 制作图片时，一定要考虑动态效果，然后把运动的控件独立出来，便于后续操作。

PageComponent 创建

创建 PageComponent 控件，把需要滑动的内容从左至右依次添加。

#Define PageComponent
page = new PageComponent
    # 和屏幕一样大小
    width: Screen.width
    height: Screen.height
    # 禁止垂直方向滑动
    scrollVertical: false

# 从左到右排列页面内容
# 添加密码页
page.addPage(numbers)
# 添加锁屏页
page.addPage(home)  

# 设置默认界面，第二个参数禁止动画效果
page.snapToPage(home,false)                         

注意事项

1. 通过 snapToPage() 设置默认页面，注意其第二个参数用来控制是否有 transition effect, 设置为 false 避免一开始的动画效果。

增加交互效果

当滑动界面时，背景图片实时改变，增加趣味性。主要改动其三个属性：scale(大小), blur(模糊度), opacity(透明度).

# 监听滑动事件
page.content.on 'change:x', ->
    # 使用 Util.modulate() 函数进行映射，最后一个参数用来限定范围
    # 映射滑动距离到背景大小
    bg.scale = Utils.modulate(this.x, [-750, 0], [1, 1.1], true)
    # 映射滑动距离到背景模糊程度
    bg.blur = Utils.modulate(this.x, [-750, 0], [1, 20], true)
    # 映射滑动距离到背景透明度
    bg.opacity = Utils.modulate(this.x, [-750, 0], [1, .8], true)                   

注意事项

1. Utils.modulate() 是 Framer 内置的映射函数，好比 Utils.modulate(输入20年前房价，[20年前房价区间]，[现在房价区间])，输出值便是现在的房子现在值多少钱。
2. Utils.modulate() 的最后一个参数用于限定范围，确定输出值是否超出第三个参数的区间范围。好比是否设定房价的最低值和最高值。

完整代码

# Coded by Joey in April, 2017

# Import images                 
bg = new Layer
    width: 750
    height: 1334
    image: "images/bg.png"

home = new Layer
    width: 750
    height: 1344
    image: "images/home.png"

numbers = new Layer
    width: 750
    height: 1344
    image: "images/numbers.png"

status = new Layer
    width: 750
    height: 40
    image: "images/status.png"

#Define PageComponent
page = new PageComponent
    # 和屏幕一样大小
    width: Screen.width
    height: Screen.height
    # 禁止垂直方向滑动
    scrollVertical: false

# 从左到右排列页面内容
# 添加密码页
page.addPage(numbers)
# 添加锁屏页
page.addPage(home)

# 设置默认界面，第二个参数禁止动画效果
page.snapToPage(home,false)

# 监听滑动事件
page.content.on 'change:x', ->
    # 使用 Util.modulate() 函数进行映射，最后一个参数用来限定范围
    # 映射滑动距离到背景大小
    bg.scale = Utils.modulate(this.x, [-750, 0], [1, 1.1], true)
    # 映射滑动距离到背景模糊程度
    bg.blur = Utils.modulate(this.x, [-750, 0], [1, 20], true)
    # 映射滑动距离到背景透明度
    bg.opacity = Utils.modulate(this.x, [-750, 0], [1, .8], true)

Reference

Youtube 原教程地址：https://www.youtube.com/watch?v=zmnrWAfDswQ
Framer 原型展示：https://framer.cloud/aLuPk