Framer 特训5
今天我们进入第一个案例的学习，iPhone 的 iMessage 聊天界面。
最终效果
操作重点：
- 滚动的聊天流
- 闪烁的光标
- 录音按钮的交互
- 输入内容的交互
滚动的聊天流
在 Framer 15天交互动效特训 - 4 中我们讨论过了 ScrollComponent 组件，这里直接使用即可。
# 滑动区域创建
scroll = ScrollComponent.wrap(sketch.scroll)
# 禁止横向滑
scroll.scrollHorizontal = false
# 底部内容间隔
scroll.contentInset =
bottom: 32
# 滚到最底部
scroll.scrollY = scroll.height
注意事项
- 禁止横向滑动
- 默认聊天位置应该在信息流的最下方
- 给内容设置合适的底边距，美观
闪烁的光标
本质上是一个 width:3 的图片反复闪烁100次的假象，透明度从 1 至 0 即可。动画间延迟 0.25s ，避免闪烁过于频繁。
# 每0.5s，延迟0.25s光标闪烁1次，重复100次
indicator.animate
opacity: 0
options:
time: .5
delay: .25
repeat: 100
注意事项
- 会用 animate
- 适时使用 delay 和 repeat 属性
录音按钮的交互
点击录音按钮后，需要给用户反馈。个人认为交互效果最重要的一个作用就是提供即时反馈。
遮罩层显示，动画结束后消失，再隐藏，避免其所占区域影响下次事件的触发。
# 点击录音按钮事件
iconMic.on Events.Click, ->
# 设置点击反馈默认状态
iconMicActive.visible = true
iconMicActive.opacity = 0
iconMicActive.scale = .8
# 显示反馈
iconMicActive.animate
opacity: 1
scale: 1
options:
time: .4
# 反馈消失
iconMicActive.on Events.AnimationEnd, ->
this.animate
opacity: 0
options:
time: .4
# 隐藏遮盖区域
iconMicActive.visible = false
注意事项
- 注意默认状态的设置
- 学会监听动画结束事件
输入内容的交互
点击录音按钮后，录音内容显示。然后通过 Utils.delay() 控制内容在 2s 后消失。
# 内容显示
inputContent.animate
opacity: 0
options:
time: .4
# 内容消失
Utils.delay 2, ->
inputContent.animate
opacity: 1
options:
time: .4
注意事项
- 学会使用 Framer 内置的多种 Utilities 函数，详见 https://framer.com/docs/#utils.utilities
完整代码
# Coded by Joey in April, 2017
# Import file "chat"
sketch = Framer.Importer.load("imported/chat@1x")
# Define variables
indicator = sketch.indicator
iconMic = sketch.iconMic
iconMicActive = sketch.iconMicActive
inputContent = sketch.inputContent
# Interaction part
# 滑动区域创建
scroll = ScrollComponent.wrap(sketch.scroll)
# 禁止横向滑
scroll.scrollHorizontal = false
# 底部内容间隔
scroll.contentInset =
bottom: 32
# 滚到最底部
scroll.scrollY = scroll.height
# 每0.5s，延迟0.25s光标闪烁1次，重复100次
indicator.animate
opacity: 0
options:
time: .5
delay: .25
repeat: 100
# 点击录音按钮事件
iconMic.on Events.Click, ->
# 设置点击反馈默认状态
iconMicActive.visible = true
iconMicActive.opacity = 0
iconMicActive.scale = .8
# 显示反馈
iconMicActive.animate
opacity: 1
scale: 1
options:
time: .4
# 反馈消失
iconMicActive.on Events.AnimationEnd, ->
this.animate
opacity: 0
options:
time: .4
# 隐藏遮盖区域
iconMicActive.visible = false
# 内容显示
inputContent.animate
opacity: 0
options:
time: .4
# 内容消失
Utils.delay 2, ->
inputContent.animate
opacity: 1
options:
time: .4
Reference
Youtube 原教程地址：https://www.youtube.com/watch?v=BTo-geWnfsc&t=615s
Sketch 源文件下载地址：https://github.com/motif/framerteachexamples
Framer 原型展示：https://framer.cloud/DtMLQ
