Framer 10天交互动效特训 - 5

Framer 特训5

今天我们进入第一个案例的学习，iPhone 的 iMessage 聊天界面。

最终效果

操作重点：

1. 滚动的聊天流
2. 闪烁的光标
3. 录音按钮的交互
4. 输入内容的交互

滚动的聊天流

在 Framer 15天交互动效特训 - 4 中我们讨论过了 ScrollComponent 组件，这里直接使用即可。

# 滑动区域创建
scroll = ScrollComponent.wrap(sketch.scroll)
# 禁止横向滑
scroll.scrollHorizontal = false
# 底部内容间隔
scroll.contentInset =
    bottom: 32
# 滚到最底部 
scroll.scrollY = scroll.height

注意事项

1. 禁止横向滑动
2. 默认聊天位置应该在信息流的最下方
3. 给内容设置合适的底边距，美观

闪烁的光标

本质上是一个 width:3 的图片反复闪烁100次的假象，透明度从 1 至 0 即可。动画间延迟 0.25s ，避免闪烁过于频繁。

# 每0.5s，延迟0.25s光标闪烁1次，重复100次
indicator.animate
    opacity: 0
    options: 
        time: .5
        delay: .25
        repeat: 100

注意事项

1. 会用 animate
2. 适时使用 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

注意事项

1. 注意默认状态的设置
2. 学会监听动画结束事件

输入内容的交互

点击录音按钮后，录音内容显示。然后通过 Utils.delay() 控制内容在 2s 后消失。

    # 内容显示
    inputContent.animate
        opacity: 0
        options: 
            time: .4        
    # 内容消失
    Utils.delay 2, ->
        inputContent.animate
            opacity: 1
            options: 
                time: .4

注意事项

1. 学会使用 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