@bible-strong/avatar-反应
反应19 出一个经验证的"圣经坚固" AvatarDefinition。反应和反应 DOM 19 是对等的
依赖关系; @bible-strong/avatar-core 以正常依赖方式安装.
安装
pnpm add @bible-strong/avatar-react react react-dom
在应用程序入口处导入软件包样式表一次 :
import { Avatar, type AvatarController } from '@bible-strong/avatar-react'
import type { AvatarDefinition } from '@bible-strong/avatar-core'
import '@bible-strong/avatar-react/styles.css'
import { useRef } from 'react'
export function Assistant({ definition }: { definition: AvatarDefinition }) {
const avatar = useRef<AvatarController>(null)
return (
<>
<Avatar ref={avatar} definition={definition} defaultAnimation="idle" />
<button onClick={() => avatar.current?.play('happy')}>Play happy</button>
<button onClick={() => avatar.current?.setExpression('neutral')}>Neutral</button>
</>
)
}
对于与 JSON 定义相联的可重复使用组件,使用 createAvatar它验证了
定义一次,当 JSON 静态键入时,缩小 animation, (中文(简体) ), defaultAnimation, (中文(简体) ),
expression 财务报告和审定财务报表 defaultExpression 该定义中的语义键:
import { createAvatar } from '@bible-strong/avatar-react'
import avatarJson from './strobi.avatar.json'
const StrobiAvatar = createAvatar(avatarJson)
export function Strobi() {
return <StrobiAvatar defaultAnimation="idle" />
}
在运行时获取的定义由同一工厂验证,但其密钥必然是 在运行时选中, 而不是由 TypeScript 推断 .
play 财务报告和审定财务报表 setExpression 返回时 { ok: true } 键入错误
unknown_animation, (中文(简体) ), unknown_expression 或者说 controlled_by_props。 。 。 . pause 冻结精确
时间位置, 呼叫 play 用被暂停的密钥恢复它,并且 stop 返回一个
无控制的外形 neutral。 。 。 .
推荐参考
Avatar 曝光打入的定义道具,回放状态和演示文稿. AnimationKey
财务报告和审定财务报表 ExpressionKey 是提供定义中的语义字符串键.
定义和播放
| Prop | 类型 | 默认 | 行为 |
|---|---|---|---|
definition | AvatarDefinition | 所需经费 | 经验证的JSON定义包含要渲染的表达和动画. |
animation | AnimationKey | undefined | —— 说 | 控制了时间 每个步骤选择显示的表达式。 相互独占 expression。 。 。 . |
expression | ExpressionKey | undefined | —— 说 | 控制了直接表达 相互排斥 animation。 。 。 . |
defaultAnimation | AnimationKey | undefined | —— 说 | 初始控制时间,在挂载时读取. 默认启用自动播放 。 相互独占 defaultExpression。 。 。 . |
defaultExpression | ExpressionKey | undefined | —— 说 | 初始无控制表达式, 在挂载时读取而不启动时间段 。 相互独占 defaultAnimation。 。 。 . |
autoplay | boolean | undefined | true | 开始 defaultAnimation 自动。 没有它就没有效果 defaultAnimation。 。 。 . |
ref | Ref<AvatarController> | undefined | —— 说 | 揭示了下文所述的当务之急. |
animation 财务报告和审定财务报表 expression 是两个不同的真相来源。 传出两个错误;
元件从不默不作声地凌驾于其中之一。 受控目标优先
故意混合时不受控制的违约.
列报
| Prop | 类型 | 默认 | 行为 |
|---|---|---|---|
size | number | string | undefined | 240 | 数字或 CSS 值应用于包装宽度和高度 . |
className | string | undefined | —— 说 | CSS课加到外包装上. |
style | CSSProperties | undefined | —— 说 | 外包装的内置样式. width 财务报告和审定财务报表 height 来自 size。 。 。 . |
ariaLabel | string | undefined | Procedural avatar | 为屏幕阅读器宣布了无障碍名称 . |
播放回调
| Prop | 类型 | 接收 |
|---|---|---|
onAnimationEnd | (animation: AnimationKey) => void | 一个键 once 动画自然完成时. |
onExpressionChange | (expression: ExpressionKey) => void | 当显示表达式改变时, 语义表达式键 . |
onError | (error: AvatarRuntimeError) => void | 通过道具提供的未知动画或表达键. |
未知的密钥经过 animation, (中文(简体) ), expression, (中文(简体) ), defaultAnimation 或者说 defaultExpression
报告 onError。没有错误处理器,组件会写入输入的运行时间错误
给开发者控制台,而不是默默地失败.
强制 API
传出 a ref 接收 AvatarController。当按钮、事件或其他需要时使用
源头需要驱动一个不受控制的外观:
| 方法 | 类型 | 行为 |
|---|---|---|
play(animation) | (animation: AnimationKey) => AvatarCommandResult | 启动动画或恢复其暂停位置. |
pause() | () => void | 冻结准确的时间线位置. |
stop() | () => void | 停止播放并重置一个不受控制的外观 neutral。 。 。 . |
setExpression(expression) | (expression: ExpressionKey) => AvatarCommandResult | 直接显示一个表达式. |
getState() | () => AvatarPlaybackState | 回返 activeAnimation?, (中文(简体) ), activeExpression 财务报告和审定财务报表 status。 。 。 . |
play 财务报告和审定财务报表 setExpression 返回时 { ok: true } 或者说 { ok: false, error }。错误包括:
unknown_animation, (中文(简体) ), unknown_expression 财务报告和审定财务报表 controlled_by_props时 animation 或者说
expression 由道具控制,使用这些道具改变目标;必须的目标
命令不能替换父值.
定义经验证后,每件不可改变的对象参考一次,并在 参考内容有变化.
有型钩子
样式表显示 .bs-avatar 财务报告和审定财务报表 .bs-avatar__svg消费者 className 财务报告和审定财务报表 style 为:
适用于外包装.
公共组件从未曝光工作室ID或文档类型. 软件包跟随语义
发相. 虽然它仍然低于 1.0.0,打破 API 更改小版本的增量
校正补丁版本.