Framer API Handbook 1-8

翻译文档原网址：🔗https://www.framer.com/api🔗

一.介绍

1.Framer API是个啥

A complete API reference of the Framer Library, a JavaScript library made for rapid interactive prototyping for web and mobile.一个Framer库的完整API参考资料，为网页和移动设备快速实现交互原型的一个JS语言库

*API：Application Programming interface 应用程序编程接口(界面)，通俗讲，可以通过调用的函数达成一些应用上的功能或者动画等。

*JS：JavaScript 网页之间交互效果的语言，一种前端语言

2.总览

Framer提供基于物理特性的高级动画，复杂的触控手势和滚动浏览、页面切换、界面流元素的通用组件。Framer被设计的初衷是让初学者能够不受限制的探索创意，不受创意转换数字化的困扰。它基于React/JSX/TypeScript三个语言。如果想要学到更多关于Framer的知识，软件框架、软件开发技术等，务必查看阅读我们的ES6 and React指南。

（大佬看这个，初学者无视这个）网址：https://paper.dropbox.com/doc/Framer-ES6-React-Guide-Th7joG9fFSSiyZgOFYqj6

3.快速开始

安装

Framer API与Framer X软件配合工作的，但是它也是一个很好的独立库，你可以用npm用终端命令行安装（有兴趣就去搜索npm，csdn有教程）

导入

一旦安装成功，你可以将Framer API的效果导入任何的设计文件（.framerx结尾的文件）

Framer X

这个自学吧，www.framer.com官网，最新推出的软件，自认为有点东西，教程很简单，学过sketch很快能上手。这里略过。

4.基础（大致看看）

动画

如果想做一个简单的方形自动缩小1/2,注意如何用常规的HTML文档将方形参数结合在一起，就像你在任何react语言中做的那样。

export function MyComponent(){

    return <Frame animate={{ scale:0.5 }}/>

}

题外话：如果不懂一点前端是看不懂的。HTML+CSS+JS+React都是基于网页的，看完这些就不是很大的问题。不然会很懵逼

循环

再举一个点一次范围大一次的案例

// Cycle scale on tap export 
function MyComponent() {  const [scale, cycle] = useCycle(3, 1)  
return (    
  <Frame animate={{ scale: scale }}      
    onTap={() => cycle()}/>) 
}

拖拽

界面中的元素你可以拖拽他达成一定效果

Export function MyComponent(){
return <Frame drag />
}

滚动浏览

浏览一些页面的时候，需要切换内容，就会用到页面，文本框滚动

Export function MyComponent(){
    return (
    <Scroll>
    <Frame />
    <Frame />
）
}

—看不懂跳过—

二.指导

1.总览

略

2.设置

略

这部分都是一些案例，用在线fork出的编译工具跟着教程代码制作滑轮效果等，这里就不翻译了。重点在库‘Lilbrary’

三.库(重点部分)

框架

框架概念以及可以做什么

—承载布局，样式，动效，事件的最底层重要容器—

框架组件是HTML中的div的升级版，有额外的选项和自用的默认值以方便更快的达到一些目的。最高级别的属性也只是给底层的div生成style样式仅此而已，但是你也可以用style属性覆写(override)重新赋予不同的样式。框架可以做的事情如下：

—设置大小和增加布局约束

—水平居中和垂直居中

—改变背景颜色或者加减图片

—两个不同状态的物体之间增加动画（A->B或B->A）

—电脑端和手机端上增加点击触发事件

—增加高级交互动作，比如用手指屏幕上拖拽某对象（drag）

—对某些高级交互动作，比如摇一摇，产生反应

import *as React from "react"
import { Frame } from "framer"

export function MyComponent() {
  return(
      <Frame size={300} center>
    Hello
        </Frame>
  )
}

性能

为了从动画中有最棒的表现，可以尝试唯一的赋予动画改变值和不透明度，因为它们是GPU加速驱动的。按照这种方式，你可以在现代移动端上让成千上万个图层动起来。

//GPU加速的（比较快）
<Frame initial={{scale: 1}} animate={{scale: 2}} />
//CPU加速的(比较慢)
<Frame initial={{scale: 200}}> animate={{scale: 400}} />

组合/嵌套

框架组件和DOM内的元素（Document Object Model：文件对象模型）有很好的兼容性，主要因为Frame本身就是DOM元素中的div标签类型。你可以给它加上很多属性（布局内容有属性用法）：size 、width 、height 、top 、right 、left 、bottom 、center，以下是代码范例：

export function MyComponent(props){
  return(
    <div>
      style={{
        width:"100%",
        height:"100%",
        background:"rgba(255,0,0,.5)", 
      }}
      <Frame size="40%" center="x" top={50}>
        Hello
      </Frame>
    </div>
  )
}

文字居中

如果你的框架只包含文本内容，它直接默认居中。你也可以避免让它不默认居中，只需要在字体旁边增加span标签

//文本默认居中
<Frame>Hello</Frame>
//文本默认不居中
<Frame><span>Hello</span></Frame>

事件处理

事件信息传递是由React语言处理的，表现像DOM事件。你可以取消这些事件用函数preventDefault（），如果想要停止传递作用可以用stopPropagation（）

DOM

框架逐渐基于HTML的div标签，所以它继承了DOM中用骆驼命名法的所有属性：

// css文件类名
<Frame className="pretty" />
// Dom事件命名
<Frame onClick={onClick} />
<Frame onMouseOut={onMouseOut} />
<Frame onTouchUp={onTouchUp} />

1⃣️布局

框架布局规则比较相似于常见的css，如果父级元素大小被重新定义布局也会被改变。你可以选择性的使用简写比如center快速将元素居中。

框架默认是被绝对定位的（absolute postion）。你可以用位置属性明显的改变后观察。如果你加了一个组件下的子级框架并希望它是相对位置（relative position）放置的，而现在组件会自动给它覆写为relative position模式，你不需要做任何操作。

当组合起来的布局属性不合适，写进去的代码优先级和CSS一致（be consistent with）。优先级为：

— height > top,bottom > center=”y”

— width > left, right > center=”x”

//右边空间被忽视掉了
<Frame width={100} left={100} right={100} />
//居中被忽视掉了
<Frame left={0} right={100} center="x" />

以下是布局常见属性值：

width

设置CSS宽度属性。默认值为200。支持所有的CSS值类型（包括像素pixels，百分比percentages，关键字keywords等）

// 像素pixels
<Frame width={100} />
// 百分比percentages
<Frame width={"100%"} />
//注意括号里的双引号,除了pixels其它都要加

height

设置CSS高度属性。默认值为200。支持所有的CSS值类型（包括像素pixels，百分比percentages，关键字keywords等）

// 像素pixels
<Frame height={100} />
// 百分比percentages
<Frame height={"100%"} />
//注意括号里的双引号,除了pixels其它都要加

size

同时（simultaneously）设置宽高的捷径参数，默认pixels

<Frame size={100} />

center

设置如何居中的捷径参数，默认pixels

<Frame center /> //居中
<Frame center={"x"} /> //水平居中
<Frame center={"y"} /> //垂直居中

top

离页面顶端的距离。默认设置为0像素pixels

<Frame top={100} />

right

离页面右端的距离。默认设置为0像素pixels

<Frame right={100} />

left

离页面右端的距离。默认设置为0像素pixels

<Frame left={100} />

bottom

离页面右端的距离。默认设置为0像素pixels

<Frame bottom={100} />

positon

设置CSS中的position属性。默认为“absolute”属性

<Frame position={"relative"} />

2⃣️视觉效果

style：运动风格

visible：可见性

opacity：不透明度

数值{0-1}

background：背景

设置当前框架的背景。支持色彩，通过src链接的图片,色彩默认为半透明的蓝色。

<Frame background="#09F" />
<Frame background={Color({r:255,g:0,b:102})} />
<Frame background={{ alpha:1,angle:75,start:"##09F",end:"#F09"}} />
//渐变色
<Frame background={{ src:"http://example.com/logo.png"}} />

backgroundColor:背景颜色

<Frame backgroundColor="#09F" />
<Frame backgroundColor={Color({r:255,g:0,b:102})} />

Image:背景图片

<Frame image="https://source.unsplash.com/random" />

color：文本颜色

不是背景的颜色，和backgroundColor区分

border:设置边框

可以用pixels也可以用percentages

//像素1 实线 颜色#09F的边框
<Frame border="1px solid #09F" />
//默认
<Frame border="none" />

shadow:盒子阴影

<Frame shadow="10px 5px 5px black" />

overflow

将框架变为蒙板一样的东西

3⃣️变化（坐标，大小等）

x,y,z

CSS坐标轴移动变化

<Frame 
  x={100}
  //y={100}
  //z={100}
  />

rotate

CSS旋转变化

<Frame 
  rotate={45}
  //rotateX={45}
  //rotatoY={45}
  //rotatoZ={45}
  />

scale

CSS缩小和放大变化

<Frame 
  scale={1.5}
  //scaleX={1.5}
  //scaleY={1.5}
  />

skew

CSS倾斜变化

<Frame 
    skew={15}
  //skewX={15}
  //skewY={15}
/>

origin

改变被被转换元素的位置

<Frame
  originX={0.5}
  //originY={0.5}
  //originZ={100}
  />

perspective

定义3D元素距视图的距离

preserve3d

将子框架放入3D空间，默认是false状态

backfaceVisible

将框架背面的内容翻过来可见，默认为true状态

transformTemplate

模版用法：

function transformtemplate({ x, rotate}){
  return 'rotate(${rotate}deg) translateX(${x}px)''
}
//调用的模板（函数定义体）


<Frame x={0} rotate={100} transformTemplate={transformTemplate} />
//调用模版

4⃣️动画

initial：初始化

有属性，变量标签或者变量标签组，设置为false可把动画中的值进行初始化（禁用安装动画）

// 作为一个值
<Frame initial={{ opacity: 1}} />
// 作为一个初始化变量
<Frame initial="visible" variants={variants} />
// 多个初始化变量
<Frame initial={["visible","active"]} variants={variants} />
// 初始化为flase值时（禁止加载动画）
<Frame initial={false} animate={{ opacity: 0 }} />

animate：动画属性

赋予动画的值，变量标签或动画控制标签


<Frame animate={{ opacity: 1 }} />
<Frame animate="visible" variants={variants} />
<Frame animate={["visible","active"]} variants={variants} />
// 动画控制器
<Frame animate={animation} />

exit：退出

从结构树中删除此组件时要设置动画的目标

这个组件必须是 AnimatePresence 的第一个动画子代才可以退出这个动画

会有这个局限是是因为 React 语言不允许逐渐去推迟加载动画除非整个动画已经完整。一旦这个局限被设定，AnimatePresence组件就不是很必要了

import { Frame, AnimatePresence } from 'framer'

export function MyComponent(props){
  return (
    <AnimatePresence>
      {props.isVisible} && (
          <Frame 
          initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
          />
      )
  )
}

transition:过渡

默认过渡。如果动画没有被定义任何过渡效果，那我们可以试着定义一个spring过渡动画，如下

const spring={
  type:"spring",    // 过渡动画类型：spring
  damping:10,        // 阻尼值：10
  stiffness:100        // 刚性：100
}

<Frame transition={spring} animate={{ scale: 1.2 }} />

postionTransition：位置过渡

当一个框架是一个栈（stack）的子级，栈会负责框架的布局。每当一个在栈内框架的位置改变我们很难去知道，也很难去让它有一个与新位置之间的动画。通过增加postionTransition属性，它会自动在栈内生成一个到新位置的动画，不论栈改变与否或是框架改变了它在栈内的优先级。可以设置一个新的过渡效果或者使用默认的布局过渡效果。

function MyComponent({ distribution = "space-around" }){
  const spring = {
    type:"spring",
    damping:10,
    stiffness:100
  }

  return(
    <Stack distribution={distribution}>
      <Frame. layoutTransiion={spring} />
    </Stack>
  )
}

onUpdate(latest):void

具有最新运动值的回调，每帧触发一次

function onUpdate(latest){
  console.log(latest x,latest.opacity)
}

<Frame animate={{ x: 100, opacity: 0 }} onUpdat={onUpdate} />

onAnimationStart():void

当被定义的动画开始时进行回调

function onStart(){
  console.log("Animation completed")
}

<Frame animate={{ x: 100 }} onAnimationStart={onStart} />

onAnimationComplete():void

当被定义的动画完成时进行回调

function onComplete(){
  console.log("Animation completed")
}

<Frame animate={{ x:100 }} onAnimationComplete={onComplete} />

5⃣️过渡动画

在框架中，过渡属性可以被用来直接定义动画。一个过渡通常定义一个单独的过渡动画，却可以应用到一个框架中的所有的动画交互中。当一个过渡已经被添加到含有animate、hover、press属性的变量标签或者对象中时，这时候也是可以再更改过渡的属性的。

<Frame
  animate={{ scale:0.5 }}
  transtion={{ ease:"easeOut" }}
  />

你也可以为一个框架中的每个动画增加不同的过渡。若未指定，动画会用默认的过渡方式⬇️

const transition={
  x: { type:"spring",stiffness: 400 },
  opacity: { ease:"easeIn"},
}

当然，此时默认过渡也是可以再次被覆写做一点变化的⬇️

const transition={
  x: { type:"keyframe", values: [0, 100, 0] },
  default: { duration: 0.5},
}

你可以增加编排（orchestration）属性像是delay去影响整个动画。数字默认代表的是单位‘秒’⬇️

const transition = {
  delay: 1,
  opacity: { duration: 0.5},
}

过渡属性也可以被指定到变量对象⬇️

const variants = {
  hidden: {
    opacity: 0,
    transition: { duration: 0.25 },
  },
  visible: { opacity: 1 },
}

6⃣️变量

变量是一种更高级的用名字去组织你的动画状态

变量可以让你去确定动画状态和用名字去管理它们。也可以让你通过贯穿整个组件结构树只需要转换单个动画属性来控制动画

使用delayChildren和staggerChildren这类过渡属性是，当子级动画播放是相对于父级时你就可以编排

将变量体传递到一个或者多个框架的多个变量体后，这些变量体可以代替animate、initial、whiletap和whilehover属性

const variants = {
  active: {
    backgroundColor: "#f00"
  },
  inactive: {
    backgroundColor: "#fff",
    transition: { duration: 2 }
  }
}

<Frame variants={variants} animate="active" />

7⃣️轻触反馈（Tap）

点击收拾可以检测到指针何时按下并在同一组件上释放。当在组件上成功完成点击后，它将出发点击事件，而且超出组件点击会触发一个tapCancel事件（取消）。如果可点击的组件是一个可拖拽组件的子级，如果指针在手势移动超过3个像素点它会自动取消点击手势。

whileTap

当组件被按压会出发变量标签和属性变化

<Frame whileTap={{ scale: 0.8 }} />

onTap(event,info):void

当点击手势成功在这个元素上作用时侯的回调

function onTap(event, info){
  console.log(info.point.x, info.point.y)
}

<Frame onTap={onTap} />

onTapStart(event,info):void

当点击手势在元素上作用时候的回调

function onTapStart(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onTapStart={onTapStart} />

onTapCancel(event,info):void

当点击手势在元素外面结束时候的回调

function ontapCancel(event,info) {
  console.log(info.point.x, info.point.y)
}

<Frame onTapCancel={onTapCancel} />

8⃣️悬停

当指针悬停在组件上或者离开会被悬停手势检测到。它不同于onMouseEnter和onMouseLeave，因为只有在发生鼠标实际事件时，鼠标才会触发。

whileHover

当手势被确认的时候属性和变量标签才会动画化

<Frame whileHover={{ scale: 1.2}} />

9⃣️Pan

onPan(event,info):void

function onPan(event,info){
  console.log(info.point.x,info.point.y)
}

<Frame onPan={onPan} />

🔟拖拽

拖拽手势会将拖后的x/y值赋予给组件

onDrag(event,info):void

拖动组件的调用

function onDrag(event,info){
  console.log(info.point.x, info.point.y)
}

<Frame drag onDrag={onDrag} />

onDirectionLock(axis):void

确定触发拖动方向的回调函数

function onDirectionLock(axis) {
  console.log(axis)
}

<Frame
  drag
  dragDirectionLock
  onDirectionLock={onDirectionLock}
  />

drag

让元素能够被拖动，默认是设置关闭的。设置true则是任意方向。也可以只设置x或者设置y

<Frame drag="x" />
//<Frame drag="y" />
//<Frame drag="true" />

dragConstraints:拖动约束

可以设置left、right、top、bottom的像素，设置后拖拽会被约束。

<Frame
  drag="x"
  dragContraints={{ left: 0,right: 300 }}
  />

function MyComponent() {
  const constraintsRef = useRef(null)

  return(
    <Frame ref={constraintRef} width={400} height={400}>
      <Frame drag dragContraints={constraintRef} />
    </Frame>
  )
}

dragElastic:拖动弹性

值域 0 -1 ，默认0.5

<Frame
  drag={true}
  dragContraints={{ left:0,right:300 }}
  dragElastic={0.2}
  />

dragMomentum:动量

默认为true

<Frame
  drag={true}
  dragConstraints={{ left: 0,right:300 }}
  dragMomentum={false}
  />

Framer API 手册 （自译）

Framer API 手册 （自译）

Framer API Handbook 1-8

一.介绍

1.Framer API是个啥

2.总览

3.快速开始

安装

导入

Framer X

4.基础（大致看看）

动画

循环

拖拽

二.指导

1.总览

2.设置

三.库(重点部分)

框架

框架概念以及可以做什么

性能

组合/嵌套

文字居中

事件处理

DOM

1⃣️布局

width

height

size

center

top

top

right

left

bottom

positon

2⃣️视觉效果

style：运动风格

visible：可见性

opacity：不透明度

background：背景

backgroundColor:背景颜色

Image:背景图片

color：文本颜色

border:设置边框

shadow:盒子阴影

overflow

3⃣️变化（坐标，大小等）

x,y,z

rotate

scale

skew

origin

perspective

preserve3d

backfaceVisible

transformTemplate

4⃣️动画

initial：初始化

animate：动画属性

exit：退出

transition:过渡

postionTransition：位置过渡

onUpdate(latest):void

onAnimationStart():void

onAnimationComplete():void

5⃣️过渡动画

6⃣️变量

7⃣️轻触反馈（Tap）

whileTap

onTap(event,info):void

onTapStart(event,info):void

onTapCancel(event,info):void

8⃣️悬停

whileHover

9⃣️Pan

onPan(event,info):void

🔟拖拽

onDrag(event,info):void

onDirectionLock(axis):void

Framer API 手册（自译）

Framer API 手册（自译）