😍
Framer API 中文版
  • 写在前面
  • 从这里开始
    • 介绍
      • 快速开始
      • 基础
    • 教程
      • 准备 Setup
      • 引入 Slider 组件
      • Slider组件的元素
      • 拖动 & MotionValue
      • Hooks & 传递数据
      • 完成
      • 回顾
    • 简要案例
      • Frame
      • Stack
      • Animate
      • Gestures
      • Dragging 拖拽
      • Scrolling 滚动
      • Paging 翻页
      • Tranforms 变换
      • Variants 动画状态组
  • LIBRARY 库
    • Frame
      • Layout 布局
      • Visual 视觉
      • Transform 变换
      • Animation 动画
      • Transition 过渡
      • Variants 动画状态组
      • Tap 点击
      • Hover 悬浮
      • Pan
      • Drag
      • Types
    • Animation
      • Overview
      • Animation controls
      • Tween
      • Spring
      • Inertia 惯性
      • Orchestration
      • Types
    • Color
      • Create
      • Modify
      • Convert
      • Compare
      • Models
    • Page
      • Content
      • Padding
      • Events
      • Effects
      • PageEffectInfo
    • Scroll
      • Sizing
      • Content
      • Events
    • Stack
      • Content
      • Padding
    • Utilities
      • Transfrom
      • useTransform
      • useAnimation
      • useCycle
      • useMotionValue
      • useSpring
      • useViewportScroll
  • FRAMER X
    • Assets
      • Functions
    • Data & Overrides
    • CanvasComponents
      • Canvas.tsx
      • Layout
      • Colors
    • PropertyControls
      • Adding Controls
      • Hiding Controls
      • Array
      • Boolean
      • Color
      • ComponentInstance
      • Enum
      • File
      • FusedNumber
      • Image
      • Number
      • SegmentedEnum
      • String
    • Render Target
      • Properties
      • Functions
Powered by GitBook
On this page

Was this helpful?

  1. LIBRARY 库
  2. Color

Modify

Color.alpha(color, a): Color

设置颜色的透明度

const blue = Color("#0099FF")

const transparent = Color.alpha(blue, 0.1)

color: Color

需要设置颜色的颜色实例

a: number

0-1的一个值,默认是1

returns: Color

Color.brighten(color, amount): Color

返回一个在传入颜色基础上更亮一些的颜色。

const blue = Color("#0099FF")
const brightblue = Color.lighten(blue, 20)

color: Color

需要进行颜色调整的颜色实例

amount: number

0-100的数值,默认是10,调整的百分比

returns: Color

返回经过调整的颜色实例

Color.darken(color, amount): Color

把传入的颜色变暗

const blue = Color("#0099FF")
const darkblue = Color.darken(blue, 20)

color: Color

需要进行颜色调整的颜色实例

amount: number

0-100的数值,默认是10,调整的百分比

returns: Color

返回经过调整的颜色实例

Color.desaturate(color, amount): Color

降低传入颜色的饱和度

const blue = Color("#0099FF")
const desaturated = Color.desaturate(blue, 100)

color: Color

需要进行颜色调整的颜色实例

amount: number

0-100的数值,默认是10,调整的百分比

returns: Color

返回经过调整的颜色实例

Color.difference(colorA, colorB): number

colorA: Color

colorB: Color

returns: number

Color.grayscale(color): Color

返回一个完全无饱和度的颜色

const blue = Color("#0099FF")
const gray = Color.grayscale(blue)

color: Color

returns: number

Color.hueRotate(color, angle): Color

返回一个调整了色相角度的颜色

color: Color

需要调整色相的颜色

angle: number

色相调整的角度

returns: number

Color.interpolate(colorA, colorB, model)

返回一个函数,可以实现输出的颜色在两种颜色之间混合及切换,默认使用的RGB的颜色模式对象,在实现某些颜色变化时非常有效。

const blend = Color.interpolate(Color("red"), Color("blue"))

blend(0)   // Initial state (red)
blend(0.5) // Mid state (purple)
blend(1)   /

colorA: Color

开始的颜色

colorB: Color

结束颜色

model: ColorMixModelType

颜色模式对象,ColorMixModelType中的其中一种

returns: (progress:number) => Color

Color.lighten(color, amount): Color

给颜色添加白色返回一个更亮的颜色

const blue = Color("#0099FF")
const lightblue = Color.lighten(blue, 20)

color: Color

要进行处理的颜色对象

amount: number

调整数值,从0-100,默认是10

returns: Color

Color.mix(from, toColor, { model }): (p:number) => string

返回一个函数可以混合两个颜色,然后输出一个字符串类型的RGB颜色格式的值

from: Color

开始的颜色

toColor: Color

结束的颜色

{ model }: { model?: ColorMixModelType | undefined; }

可选的颜色模式对象参数

model: 颜色模式对象的其中一种

returns: (p: number) => string

Color.multiplyAlpha(color, alphaValue): Color

改变颜色的透明度,把原透明度乘以传入alphaValue

const blue = Color("#0099FF")
const transparent = Color.multiplyAlpha(blue, 0.5)

color: Color

需要进行调整的颜色

alphaValue: number

一个0-1范围内的数字,默认是1

returns: Color

Color.saturate(color, amount): Color

增加一个颜色的饱和度

const blue = Color("#0099FF")
const saturated = Color.saturate(blue, 100)

color: Color

要进行调整的颜色

amount: number

0-100范围内的数字,默认是10

returns: Color

Color.transparent(color): Color

把颜色的opacity的值设为0

const blue = Color("#0099FF")

const transparent = Color.alpha(blue)

color: Color

要被调整的颜色

returns: Color

PreviousCreateNextConvert

Last updated 5 years ago

Was this helpful?

用 方式去计算两个颜色之间的差异,返回一个0-765之间的数值。

Euclidean distance fitting human perception