文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

开始使用

示例

动画

手势

Motion 值

工具

集成

指南

JS

React

Vue

开始使用

示例

动画

手势

Motion 值

工具

集成

指南

JavaScript

mix

mix

mix 可以创建一个函数，该函数将根据 0-1 的进度值在两个值之间混合。

const mixer = mix(0, 100)
mixer(0.5) // 50

mix 能够混合多种不同的值类型

  • 数字

  • 颜色 (RGBA, HSLA)

  • 复杂字符串

  • 以上类型的数组和对象

此外，RGB 颜色混合使用线性 RGB 色彩空间，确保颜色混合时不会出现典型的 CSS 亮度下降/灰暗。

用法

从 Motion 导入

import { mix } from "motion"

通过传递两个相同类型的值来创建一个混合器

const mixNumber = mix(0, 100)
const mixColor = mix("#000", "#FFF")
const mixObject = mix(
  { a: "0px", b: 10 },
  { a: "20px", b: 0 }
)

将 0-1 进度值传递给混合器函数以返回混合值。

const mixComplex = mix("0px 0px #fff", "100px 100px #000")

mixComplex(0.5) // 50px 50px rgba(128, 128, 128, 1)

也接受 0-1 范围之外的值。

const mixNumber = mix(0, 100)

mixNumber(2) // 200
mixNumber(-1) // -100

缓动函数

您可以通过将进度值传递给缓动函数:

import { mix, easeInOut } from "motion"

const mixNumber = mix(0, 100)

mixNumber(easeInOut(0.75))

来对混合值应用缓动效果。

随机值生成

const x = mix(100, 400, Math.random())

您可以使用 Math.random() 作为 mix 中的进度值来生成随机值。

默认情况下，从 Math.random() 返回的进度数字将是线性分布的。也就是说，返回 0.1 和返回 0.9 的可能性相同。因此，如果您运行上述代码数百次，您将获得均匀分布在所提供范围内的值。

// Mostly higher numbers
mix(0, 50, easeOut(Math.random()))

// Mostly lower numbers
mix(0, 50, easeIn(Math.random()))

可以通过将 Math.random() 传递给缓动函数来更改其分布

Motion+Motion+ 示例是一次性付费、终身会员资格，让您可以访问不断增长的高级示例splitText.

库的源代码，以及高级组件，例如 Cursor 和 AnimateNumber 以及诸如

mix 可以创建一个函数，该函数将根据 0-1 的进度值在两个值之间混合。

const mixer = mix(0, 100)
mixer(0.5) // 50

mix 能够混合多种不同的值类型

  • 数字

  • 颜色 (RGBA, HSLA)

  • 复杂字符串

  • 以上类型的数组和对象

此外，RGB 颜色混合使用线性 RGB 色彩空间，确保颜色混合时不会出现典型的 CSS 亮度下降/灰暗。

用法

从 Motion 导入

import { mix } from "motion"

通过传递两个相同类型的值来创建一个混合器

const mixNumber = mix(0, 100)
const mixColor = mix("#000", "#FFF")
const mixObject = mix(
  { a: "0px", b: 10 },
  { a: "20px", b: 0 }
)

将 0-1 进度值传递给混合器函数以返回混合值。

const mixComplex = mix("0px 0px #fff", "100px 100px #000")

mixComplex(0.5) // 50px 50px rgba(128, 128, 128, 1)

也接受 0-1 范围之外的值。

const mixNumber = mix(0, 100)

mixNumber(2) // 200
mixNumber(-1) // -100

缓动函数

您可以通过将进度值传递给缓动函数:

import { mix, easeInOut } from "motion"

const mixNumber = mix(0, 100)

mixNumber(easeInOut(0.75))

来对混合值应用缓动效果。

随机值生成

const x = mix(100, 400, Math.random())

您可以使用 Math.random() 作为 mix 中的进度值来生成随机值。

默认情况下，从 Math.random() 返回的进度数字将是线性分布的。也就是说，返回 0.1 和返回 0.9 的可能性相同。因此，如果您运行上述代码数百次，您将获得均匀分布在所提供范围内的值。

// Mostly higher numbers
mix(0, 50, easeOut(Math.random()))

// Mostly lower numbers
mix(0, 50, easeIn(Math.random()))

可以通过将 Math.random() 传递给缓动函数来更改其分布

Motion+Motion+ 示例是一次性付费、终身会员资格，让您可以访问不断增长的高级示例splitText.

库的源代码，以及高级组件，例如 Cursor 和 AnimateNumber 以及诸如

mix 可以创建一个函数，该函数将根据 0-1 的进度值在两个值之间混合。

const mixer = mix(0, 100)
mixer(0.5) // 50

mix 能够混合多种不同的值类型

  • 数字

  • 颜色 (RGBA, HSLA)

  • 复杂字符串

  • 以上类型的数组和对象

此外，RGB 颜色混合使用线性 RGB 色彩空间，确保颜色混合时不会出现典型的 CSS 亮度下降/灰暗。

用法

从 Motion 导入

import { mix } from "motion"

通过传递两个相同类型的值来创建一个混合器

const mixNumber = mix(0, 100)
const mixColor = mix("#000", "#FFF")
const mixObject = mix(
  { a: "0px", b: 10 },
  { a: "20px", b: 0 }
)

将 0-1 进度值传递给混合器函数以返回混合值。

const mixComplex = mix("0px 0px #fff", "100px 100px #000")

mixComplex(0.5) // 50px 50px rgba(128, 128, 128, 1)

也接受 0-1 范围之外的值。

const mixNumber = mix(0, 100)

mixNumber(2) // 200
mixNumber(-1) // -100

缓动函数

您可以通过将进度值传递给缓动函数:

import { mix, easeInOut } from "motion"

const mixNumber = mix(0, 100)

mixNumber(easeInOut(0.75))

来对混合值应用缓动效果。

随机值生成

const x = mix(100, 400, Math.random())

您可以使用 Math.random() 作为 mix 中的进度值来生成随机值。

默认情况下，从 Math.random() 返回的进度数字将是线性分布的。也就是说，返回 0.1 和返回 0.9 的可能性相同。因此，如果您运行上述代码数百次，您将获得均匀分布在所提供范围内的值。

// Mostly higher numbers
mix(0, 50, easeOut(Math.random()))

// Mostly lower numbers
mix(0, 50, easeIn(Math.random()))

可以通过将 Math.random() 传递给缓动函数来更改其分布

Motion+Motion+ 示例是一次性付费、终身会员资格，让您可以访问不断增长的高级示例splitText.

库的源代码，以及高级组件，例如 Cursor 和 AnimateNumber 以及诸如

frame

splitText

以 mix 为特色的示例包括

保持关注

订阅
©2025 Motion Division Ltd.

网站

关于

文档

示例

Motion+

博客

赞助

社交媒体

Discord

GitHub

X/Twitter

以 mix 为特色的示例包括

保持关注

订阅
©2025 Motion Division Ltd.

网站

关于

文档

示例

Motion+

博客

赞助

社交媒体

Discord

GitHub

X/Twitter