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

你可能感兴趣的:(Framer 10天交互动效特训 - 5)