Framer 特训6
第二个案例实践，图片流的滚动界面
最终效果
我们先用 Sketch 把静态界面做出来，导入Framer。注意只有建组的元素才能被 Framer 操作。导入图片推荐大家使用 Craft 插件。
静态图
操作重点：
- 滚动的图片流
- 大图的显示
- 大图的隐藏
- 实际交互优化
滚动的图片流
在 Framer 15天交互动效特训 - 4 中我们讨论过了 ScrollComponent 组件，这里直接使用即可。
# Define variables
navBar = sketch.navBar
images = [sketch.img1, sketch.img2, sketch.img3, sketch.img4, sketch.img5]
# Interaction part
# 滚动区域设置
scroll = ScrollComponent.wrap sketch.content
scroll.scrollHorizontal = false
content = [navBar, scroll]
注意事项
- 学会使用数组，方便一次性把事件给所有需要绑定的元素
大图的显示
当点击缩略图后，大图显示。注意此时，其他所有内容要隐藏。
# 给所有图片绑定点击事件
for image in images
image.borderRadius = 6
# 监听点击事件
image.on Events.Click, (e, layer)->
# 复制当前图片
curImage = layer.copy()
# 移动到原图片位置
curImage.parent = sketch.screen
curImage.placeBehind(navBar)
curImage.x = layer.screenFrame.x
curImage.y = layer.screenFrame.y
# 隐藏原图片
layer.visible = false
# 移动复制图片至中心
dis = Math.abs(Screen.midY - image.midY)
# 根据移动距离修改移动时间
if dis < image.hei / 4
curImage.animate
midY: Screen.height / 2
scale: Screen.width / curImage.width
options:
time: .3
delay: .2
curve: Spring(damping: .8)
else
curImage.animate
midY: Screen.height / 2
scale: Screen.width / curImage.width
options:
time: .6
delay: .2
curve: Spring(damping: .8)
# 隐藏其他元素
for element in content
element.animate
opacity: 0
options:
time: .2
# 禁止点击其他元素
for image in images
image.ignoreEvents = true
注意事项
- layer.copy() 用于复制原图层，避免直接操作原图层带来的麻烦。
- screenFrame 记录图层的绝对定位位置
大图的隐藏
再次点击大图后，大图消失，隐藏内容再次显示。
# 点击大图返回
curImage.on Events.Click, ->
curImage.animate
scale: 1
x: layer.screenFrame.x
y: layer.screenFrame.y
options:
time: .2
# 显示其他元素
for element in content
element.animate
opacity: 1
options:
time: .2
# 显示原图层，删除复制图片图层
curImage.on Events.AnimationEnd, ->
layer.visible = true
curImage.destroy()
# 允许点击其他元素
for image in images
image.ignoreEvents = false
注意事项
- 监听动画事件，在动画结束后，再显示其他元素
- 删除复制的图层, 使用 destroy() 函数
实际交互优化
很多操作上的细节，只有用代码写出来的时候才能发现，这也是我觉的 Framer 相比视频动效的一个优点。
第一个优化是禁止点击事件。虽然内容隐藏了，视觉上看不到，但是点击该区域还是会触发事件，因此需要手动禁用。
# 禁止点击其他元素
for image in images
image.ignoreEvents = true
第二个是根据图片距离屏幕中心的距离，来设置移动时间的长短。距离长移动 0.6s，距离短移动 0.3s.
# 根据移动距离修改移动时间
if dis < image.hei / 4
curImage.animate
midY: Screen.height / 2
scale: Screen.width / curImage.width
options:
time: .3
delay: .2
curve: Spring(damping: .8)
else
curImage.animate
midY: Screen.height / 2
scale: Screen.width / curImage.width
options:
time: .6
delay: .2
curve: Spring(damping: .8)
第三个是 time 和 curve 数值的设置，这个需要你不断调试，一直到你视觉上满意的程度。短动画尽量控制在 0.3s 左右。有时需要使用 delay 让动画有次序，避免 2 个动画同时发生，让视觉上产生冲突。
完整代码
# Coded by Joey in April, 2017
# Import file "photoFeed"
sketch = Framer.Importer.load("imported/photoFeed@1x")
# Define variables
navBar = sketch.navBar
images = [sketch.img1, sketch.img2, sketch.img3, sketch.img4, sketch.img5]
# Interaction part
# 滚动区域设置
scroll = ScrollComponent.wrap sketch.content
scroll.scrollHorizontal = false
content = [navBar, scroll]
# 给所有图片绑定点击事件
for image in images
image.borderRadius = 6
# 监听点击事件
image.on Events.Click, (e, layer)->
# 复制当前图片
curImage = layer.copy()
# 移动到原图片位置
curImage.parent = sketch.screen
curImage.placeBehind(navBar)
curImage.x = layer.screenFrame.x
curImage.y = layer.screenFrame.y
# 隐藏原图片
layer.visible = false
# 移动复制图片至中心
dis = Math.abs(Screen.midY - image.midY)
# 根据移动距离修改移动时间
if dis < image.hei / 4
curImage.animate
midY: Screen.height / 2
scale: Screen.width / curImage.width
options:
time: .3
delay: .2
curve: Spring(damping: .8)
else
curImage.animate
midY: Screen.height / 2
scale: Screen.width / curImage.width
options:
time: .6
delay: .2
curve: Spring(damping: .8)
# 隐藏其他元素
for element in content
element.animate
opacity: 0
options:
time: .2
# 禁止点击其他元素
for image in images
image.ignoreEvents = true
# 点击大图返回
curImage.on Events.Click, ->
curImage.animate
scale: 1
x: layer.screenFrame.x
y: layer.screenFrame.y
options:
time: .2
# 显示其他元素
for element in content
element.animate
opacity: 1
options:
time: .2
# 显示原图层，删除复制图片图层
curImage.on Events.AnimationEnd, ->
layer.visible = true
curImage.destroy()
# 允许点击其他元素
for image in images
image.ignoreEvents = false
Reference
Youtube 原教程地址：https://www.youtube.com/watch?v=kJYI4oYrHik
Framer 原型展示：https://framer.cloud/UegKC
