Framer 10天交互动效特训 - 6

Framer 特训6

第二个案例实践，图片流的滚动界面

最终效果

我们先用 Sketch 把静态界面做出来，导入Framer。注意只有建组的元素才能被 Framer 操作。导入图片推荐大家使用 Craft 插件。

静态图

操作重点：

1. 滚动的图片流
2. 大图的显示
3. 大图的隐藏
4. 实际交互优化

滚动的图片流

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

# Define variables
navBar = sketch.navBar
images = [sketch.img1, sketch.img2, sketch.img3, sketch.img4, sketch.img5]

# Interaction part
# 滚动区域设置
scroll = ScrollComponent.wrap sketch.content
scroll.scrollHorizontal = false
content = [navBar, scroll]

注意事项

1. 学会使用数组，方便一次性把事件给所有需要绑定的元素

大图的显示

当点击缩略图后，大图显示。注意此时，其他所有内容要隐藏。

# 给所有图片绑定点击事件
for image in images
    image.borderRadius = 6
    
    # 监听点击事件
    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)
        # 根据移动距离修改移动时间
        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   

注意事项

1. layer.copy() 用于复制原图层，避免直接操作原图层带来的麻烦。
2. screenFrame 记录图层的绝对定位位置

大图的隐藏

再次点击大图后，大图消失，隐藏内容再次显示。

        # 点击大图返回
        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                                      

注意事项

1. 监听动画事件，在动画结束后，再显示其他元素
2. 删除复制的图层, 使用 destroy() 函数

实际交互优化

很多操作上的细节，只有用代码写出来的时候才能发现，这也是我觉的 Framer 相比视频动效的一个优点。

第一个优化是禁止点击事件。虽然内容隐藏了，视觉上看不到，但是点击该区域还是会触发事件，因此需要手动禁用。

# 禁止点击其他元素
        for image in images
            image.ignoreEvents = true       

第二个是根据图片距离屏幕中心的距离，来设置移动时间的长短。距离长移动 0.6s，距离短移动 0.3s.

# 根据移动距离修改移动时间
        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 数值的设置，这个需要你不断调试，一直到你视觉上满意的程度。短动画尽量控制在 0.3s 左右。有时需要使用 delay 让动画有次序，避免 2 个动画同时发生，让视觉上产生冲突。

完整代码

# 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
# 滚动区域设置
scroll = ScrollComponent.wrap sketch.content
scroll.scrollHorizontal = false
content = [navBar, scroll]

# 给所有图片绑定点击事件
for image in images
    image.borderRadius = 6
    
    # 监听点击事件
    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)
        # 根据移动距离修改移动时间
        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