Framer 特訓5

今天我們進入第一個案例的學習躬柬，iPhone 的 iMessage 聊天界面痴怨。

最終效果

操作重點：

1. 滾動的聊天流
2. 閃爍的光標
3. 錄音按鈕的交互
4. 輸入內(nèi)容的交互

滾動的聊天流

在 Framer 15天交互動效特訓 - 4 中我們討論過了 ScrollComponent 組件，這里直接使用即可频丘。

# 滑動區(qū)域創(chuàng)建
scroll = ScrollComponent.wrap(sketch.scroll)
# 禁止橫向滑
scroll.scrollHorizontal = false
# 底部內(nèi)容間隔
scroll.contentInset =
    bottom: 32
# 滾到最底部 
scroll.scrollY = scroll.height

注意事項

1. 禁止橫向滑動
2. 默認聊天位置應該在信息流的最下方
3. 給內(nèi)容設置合適的底邊距诗力，美觀

閃爍的光標

本質(zhì)上是一個 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 屬性

錄音按鈕的交互

點擊錄音按鈕后匙瘪，需要給用戶反饋。個人認為交互效果最重要的一個作用就是提供即時反饋蝶缀。
遮罩層顯示丹喻，動畫結(jié)束后消失，再隱藏翁都，避免其所占區(qū)域影響下次事件的觸發(fā)驻啤。

# 點擊錄音按鈕事件
iconMic.on Events.Click, ->
    # 設置點擊反饋默認狀態(tài)
    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
        # 隱藏遮蓋區(qū)域
        iconMicActive.visible = false

注意事項

1. 注意默認狀態(tài)的設置
2. 學會監(jiān)聽動畫結(jié)束事件

輸入內(nèi)容的交互

點擊錄音按鈕后，錄音內(nèi)容顯示荐吵。然后通過 Utils.delay() 控制內(nèi)容在 2s 后消失骑冗。

    # 內(nèi)容顯示
    inputContent.animate
        opacity: 0
        options: 
            time: .4        
    # 內(nèi)容消失
    Utils.delay 2, ->
        inputContent.animate
            opacity: 1
            options: 
                time: .4

注意事項

1. 學會使用 Framer 內(nèi)置的多種 Utilities 函數(shù)，詳見 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
# 滑動區(qū)域創(chuàng)建
scroll = ScrollComponent.wrap(sketch.scroll)
# 禁止橫向滑
scroll.scrollHorizontal = false
# 底部內(nèi)容間隔
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, ->
    # 設置點擊反饋默認狀態(tài)
    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
        # 隱藏遮蓋區(qū)域
        iconMicActive.visible = false
    
    # 內(nèi)容顯示
    inputContent.animate
        opacity: 0
        options: 
            time: .4        
    # 內(nèi)容消失
    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