Support | 微信 & TG: @scomper

Framer X 学习笔记(六)实践

2018.12.13 08:54

Framer X 中的组件大部分都很直观,只需要安装后通过 Components 面板拖拽到页面里就可以使用。不过浏览研究组件的过程中也发现了不少偏「技术」流的组件,使用方式也略微复杂一些。这类组件的更像是一种「桥接」,通过安装它们来构建相应的代码环境,然后再通过 code overrides 的方式调用。

演示特殊组件的用法之前,我们先构建一些应用场景,用具体的需求来推动会更有感触一些。当想法出现以后,熟悉的软件和工具越多,能联想到的解决方式也更多。

1、用 Framer X 绘制一个简单的演示流程页面,如何动态的提示需要点击的位置?
软件的截图拖拽到 Framer X 里,通过 Link 可以很快的构建一个页面流程。这种方式在绘制原型草图阶段也会经常用到,几张图片,添加 frame 覆盖在热区,最后创建链接。图示中关键信息和位置一般采用的是标注和高亮,但是总还是没有动画醒目,例如一个不断闪烁的圆点。

Hype 3 里要实现这个很简单,创建一个「持久符号」的圆点动画就可以,Framer X 里如果要引入动画效果则需要借助 Lottie 组件。

  • Lottie 组件安装后可以调用外部的 JSON 格式的动画,将 Lottie 组件添加到页面后,通过右侧属性面板输入一个 JSON 的 URL 链接。
  • JSON 的动画可以通过 After Effects (安装 Bodymovin 插件)制作并输出,或者直接前往 www.lottiefiles.com 网站下载一个现成的,例如上面的示例里用到的绿色圆点(https://www.lottiefiles.com/1042-round)。
  • JSON 文件下载下来以后,可以上传到自己的 gist 网站,生成 raw 的网址复制到 Framer X 的 Lottie 组件里。

2、在不写代码的情况下,还有没有其它简单的交互动画,在页面加载或者点击时显示动态效果。
在 Store 里找了一圈,AnimatePosedComponent 都可以实现。

Animate 提供了弹出(from direction)、缩放(scale up)、淡出(fade in)三张效果,触发动作有页面加载(on mount)和点击(on tap)。

Animate 组件本身像一个效果容器,需要连接到其它 frame 来实现效果。通过叠加 Animate 组件可以按照 Delay 的延时设定显示一个复合的动画效果。

图示中的添加了两个 Animate,一个连接到 Round 的圆形填充,一个连接到圆形的边框,前者施加了一个透明度淡入的效果,后者是边框缩放的效果。

如果把 Animate 框拉大一些,连接到一个 frame 卡片,动画方式选择:bottom Delay 1200 Duration 800,可以用来体现底部卡片弹出的效果。

PosedComponent 组件实现起来就复杂一些,不仅需要安装组件,还需要在项目中新建一个 tsx 的文件。

  • 安装 PosedComponent 组件;
  • 添加组件到页面后选择组件,在右侧的属性面板中点击 Code 旁的 + 号新建一个 文件,默认会创建一个名为 app.tsx 的文件,并用关联的代码编辑器打开;
  • 复制相应的代码到编辑器,覆盖默认的代码。

App.tsx 顶部的声明部分

1
2
3
4
5
6
7
8
import { Data, animate, Override, Animatable } from "framer";
import createPosed, {
  hoverable,
  pressable,
  focusable,
  draggable,
  scrollable
} from "fx-posed";

具体功能部分,可以在组件的介绍页面复制相应的代码到 App.tsx 文件当中,使用那个效果就添加哪一个部分,不用都拷贝进去。

1
2
3
4
5
// Default Hover
const [wh0] = hoverable({
    init: { opacity: 0 },
    hover: { opacity: 20 });
export const HoverTest0: Override = () => wh0;
1
2
3
4
5
6
// Hover with options
const [wh1] = hoverable({
  init: { top: 0, scale: 1 },
  hover: { top: -12, scale: 1.1 }
});
export const HoverTest1: Override = () => wh1;

App.tsx 编辑完成后保存,选中 PosedComponent 组件,属性面板中 Code 的部分选择刚新建的 App.tsx,Override 选择具体的效果,例如 HoverTest0,预览看看效果是不是鼠标滑动到框架上透明度发生变化。有兴趣的可以把 PosedComponent 组件包含的其它几种效果都实验一下。其中按压、缩放、Hover 状态变化比较实用。

3、 Framer X 里如何实现响应式布局,基于不同分辨率自动切换原型
Hype 里通过增加不同分辨率的「布局」可以实现在不同设备上的自动切换,Framer X 里并没有原生支持响应布局,不过通过 Responsive Layout Component 组件也能实现同样的效果。

安装 Responsive Layout Component 组件后,将其连接到为不同设备分辨率绘制的 Frame, 这样当预览窗口的分辨率发生变化时就会自动切换到对应的布局。

✳️ 需要注意的是连接的框架尺寸最好略小于实际设备的尺寸,这样组件才能基于分辨率的变化切换。


为了方便研究和体会,把上面提到的组件都整合在一个范例文件里。
Dropbox 下载链接

Framer X 对具备编码能力的设计师来说是非常友好和强大的,这也是学习它而不是其它原型软件的价值所在。学习曲线虽然有些漫长,但是可以从阅读代码、修改代码开始,研究那些酷炫的实例也能不断发现其中的秘密。

利用组件来实现效果,只能是一个便捷的方式,要自由和灵活还是要从代码入手。

Framer X 学习资源

  • Framer X + React,Framer 中文视频课程,作者 @lintonye还经常在 Twitter 会发一些 #FramerXTip 技巧。另外,这个团队还有一个微信公众号「设计师也玩 React」,分享 React 知识。
  • Framer-X-Course ,官方推荐的另一个视频教程(英文),包含了 10 节课的内容。
  • 30 Days of Framer X ,通过 GIF 动画可以直观的看到 Framer X 能够实现的各种效果,提供了可下载的范例文件。

GitHub 下载地址:30 Days of Framer X Code

Comments
Write a Comment