Framer 特訓6
第二個案例實踐饭庞，圖片流的滾動界面
最終效果
我們先用 Sketch 把靜態(tài)界面做出來，導入Framer沽损。注意只有建組的元素才能被 Framer 操作袖外。導入圖片推薦大家使用 Craft 插件。
靜態(tài)圖
操作重點：
- 滾動的圖片流
- 大圖的顯示
- 大圖的隱藏
- 實際交互優(yōu)化
滾動的圖片流
在 Framer 15天交互動效特訓 - 4 中我們討論過了 ScrollComponent 組件略吨，這里直接使用即可集币。
# Define variables
navBar = sketch.navBar
images = [sketch.img1, sketch.img2, sketch.img3, sketch.img4, sketch.img5]
# Interaction part
# 滾動區(qū)域設(shè)置
scroll = ScrollComponent.wrap sketch.content
scroll.scrollHorizontal = false
content = [navBar, scroll]
注意事項
- 學會使用數(shù)組，方便一次性把事件給所有需要綁定的元素
大圖的顯示
當點擊縮略圖后翠忠，大圖顯示鞠苟。注意此時，其他所有內(nèi)容要隱藏秽之。
# 給所有圖片綁定點擊事件
for image in images
image.borderRadius = 6
# 監(jiān)聽點擊事件
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)
# 根據(jù)移動距離修改移動時間
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 記錄圖層的絕對定位位置
大圖的隱藏
再次點擊大圖后考榨，大圖消失跨细，隱藏內(nèi)容再次顯示。
# 點擊大圖返回
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
注意事項
- 監(jiān)聽動畫事件扼鞋，在動畫結(jié)束后申鱼，再顯示其他元素
- 刪除復制的圖層, 使用 destroy() 函數(shù)
實際交互優(yōu)化
很多操作上的細節(jié)愤诱，只有用代碼寫出來的時候才能發(fā)現(xiàn)，這也是我覺的 Framer 相比視頻動效的一個優(yōu)點捐友。
第一個優(yōu)化是禁止點擊事件淫半。雖然內(nèi)容隱藏了，視覺上看不到匣砖，但是點擊該區(qū)域還是會觸發(fā)事件科吭，因此需要手動禁用。
# 禁止點擊其他元素
for image in images
image.ignoreEvents = true
第二個是根據(jù)圖片距離屏幕中心的距離猴鲫，來設(shè)置移動時間的長短对人。距離長移動 0.6s，距離短移動 0.3s.
# 根據(jù)移動距離修改移動時間
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 數(shù)值的設(shè)置拂共，這個需要你不斷調(diào)試牺弄，一直到你視覺上滿意的程度。短動畫盡量控制在 0.3s 左右宜狐。有時需要使用 delay 讓動畫有次序势告，避免 2 個動畫同時發(fā)生蛇捌，讓視覺上產(chǎn)生沖突。
完整代碼
# 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
# 滾動區(qū)域設(shè)置
scroll = ScrollComponent.wrap sketch.content
scroll.scrollHorizontal = false
content = [navBar, scroll]
# 給所有圖片綁定點擊事件
for image in images
image.borderRadius = 6
# 監(jiān)聽點擊事件
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)
# 根據(jù)移動距離修改移動時間
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
