美文网首页Framer 中文文档
捏合Pinchable丨Framer 文档 Code

捏合Pinchable丨Framer 文档 Code

作者: 刘板栗 | 来源:发表于2017-09-04 22:04 被阅读18次

Code

Pinchable 图层可以用两根手指控制旋转和缩放,这种多点触控一般用在地图和相片APP,用来缩放或给内容导航。

在 Mac Framer,您可以按住alt键同时移动光标以显示第二个光标,用来模拟多点触控。和拖动图层一样,设置pinchable.enabled状态为ture启动捏手势。

layerA.pinchable.enabled = true

Pinchable图层控制缩放和旋转属性,默认这两个属性都是启动的。通过禁用缩放,可以只使用旋转属性,反之亦然。

# 禁用缩放 
layerA.pinchable.scale = false
 
# 禁用旋转 
layerA.pinchable.rotate = false

捏事件 Pinch Events

三个基本事件:onPinchonPinchStartonPinchEnd。捏合调整图层的实际缩放和角度属性,捏完了之后可以将属性动画设置为回到默认值。

# 启用捏合 
layerA.pinchable.enabled = true
 
# 回到原来位置的动画 
layerA.onPinchEnd ->
    layerA.animate
        scale: 1
        rotation: 0
        options:
            curve: Spring(damping: 0.5)
            time: 0.5
pinchable

捏合 Panning

如果给图层同时启用了拖动和捏合,那图层捏合的时候也可以移动。捏合和拖动一样,是一个多点触控手势,您可以使用onPan 事件检测到一个平移。

# 图层layerA启用捏合和拖动 
layerA.draggable.enabled = true
layerA.pinchable.enabled = true
 
# 回到原来位置的动画
layerA.onDragEnd ->
    layerA.animate
        scale: 1
        rotation: 0
        options:
            curve: Spring(damping: 0.5)
            time: 0.5
panning

相关文章

  • 捏合Pinchable丨Framer 文档 Code

    Code Pinchable 图层可以用两根手指控制旋转和缩放,这种多点触控一般用在地图和相片APP,用来缩放或给...

  • Code丨Framer文档

    Code 代码模式 Code 先说在Framer中用代码创建交互的概念和一些简单的教程。不用管你会啥不会啥先,我们...

  • 动画 Animate丨Framer 文档 Code

    Code 几乎所有的图层属性都可以做动画,同一个动画中可以定义多个属性。完了还能定义动画的属性,事件、曲线、延迟等...

  • 状态 States丨Framer 文档 Code

    Code 其实动画就是图层从一个状态切换到另一个状态,但直接用动画,这个图层就只有两个状态了。要给这个图层定义两个...

  • 图层 Layers丨Framer 文档 Code

    Code 要是用过任何一个设计软件儿,那对图层的概念应该很熟悉了。没有给图层添加内容前,一个图层就是一个矩形。图层...

  • 事件 Events丨Framer 文档 Code

    Code “点击图层A,图层A缩小”这里面“点击图层A”就是一个事件。通过事件给以给图层定义交互动画。简单的点击、...

  • 滚动 Scroll丨Framer 文档 Code

    Code 熟悉iOS平滑滚动吧?要达到这个恰到好处感觉涉及很多物理学。Framer 中的 Scroll 组件会为保...

  • 流 Flow丨Framer 文档 Code

    Code Flow 组件用于快速在多个页面之间切换,将静态屏幕转换为交互流程。 Flow 组件的特别之处在于它知道...

  • 页面 Page丨Framer 文档 Code

    Code 使用 Page 组件可以很轻松的把多个静态屏幕拼接在一起。 Page 组件可实现图层之间从任意方向相互...

  • 滑块 Slider丨Framer 文档 Code

    Code 滑块可以用来显示进度、调节音量、调整图片、定义价格范围等。使用Slider组件就不用重头开始搭建了。 S...

网友评论

    本文标题:捏合Pinchable丨Framer 文档 Code

    本文链接:https://www.haomeiwen.com/subject/zacyjxtx.html