#逐字入场
scale 让新字符从较小尺寸放大，同时淡入并消退模糊。字符始终占据自己的排版空间，因此前面的内容保持原位。
逐字缩放
#使用方式
选择对应框架查看代码。Core 示例中的 mappers 传入 Core 输入，并显式启用 mapper；组件通过 streaming.effect 启用相同效果，并内置视觉渲染器。
import type { MapperPluggable } from '@fluxdown/core';
import { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Scale } from '@fluxdown/core-plugins/plugins/mapper/scale';
const mappers: MapperPluggable[] = [
[Smooth, { enabled: true }],
[Scale, { enabled: true }],
];import { Fluxdown } from 'fluxdown';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <Fluxdown streaming={{ effect: 'scale' }} text={text} />;
}<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';
defineProps<{ text: string }>();
</script>
<template>
<Fluxdown :streaming="{ effect: 'scale' }" :text="text" />
</template><script lang="ts">
import { Fluxdown } from '@fluxdown/svelte';
type MessageProps = {
text: string;
};
let { text }: MessageProps = $props();
</script>
<Fluxdown streaming={{ effect: 'scale' }} {text} />import type { StreamingConfig } from '@fluxdown/angular';
import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';
@Component({
selector: 'app-message',
imports: [Fluxdown],
template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
readonly text = input.required<string>();
readonly streaming: StreamingConfig = { effect: 'scale' };
}import { Fluxdown } from '@fluxdown/react-native';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <Fluxdown streaming={{ effect: 'scale' }} text={text} />;
}import { Fluxdown } from '@fluxdown/lynx';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <Fluxdown streaming={{ effect: 'scale' }} text={text} />;
}import { Fluxdown } from '@fluxdown/solid';
type MessageProps = {
text: string;
};
export function Message(props: MessageProps) {
return <Fluxdown streaming={{ effect: 'scale' }} text={props.text} />;
}import { Fluxdown } from '@fluxdown/taro';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <Fluxdown streaming={{ effect: 'scale' }} text={text} />;
}缩小变化幅度，让入场更柔和：
import type { MapperPluggable } from '@fluxdown/core';
import { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Scale } from '@fluxdown/core-plugins/plugins/mapper/scale';
const mappers: MapperPluggable[] = [
[Smooth, { enabled: true }],
[Scale, { enabled: true, duration: 250, from: 0.5, blur: 0.04 }],
];import { Fluxdown } from 'fluxdown';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
streaming={{
effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
}}
text={text}
/>
);
}<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';
defineProps<{ text: string }>();
</script>
<template>
<Fluxdown
:streaming="{ effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }] }"
:text="text"
/>
</template><script lang="ts">
import { Fluxdown } from '@fluxdown/svelte';
type MessageProps = {
text: string;
};
let { text }: MessageProps = $props();
</script>
<Fluxdown
streaming={{ effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }] }}
{text}
/>import type { StreamingConfig } from '@fluxdown/angular';
import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';
@Component({
selector: 'app-message',
imports: [Fluxdown],
template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
readonly text = input.required<string>();
readonly streaming: StreamingConfig = {
effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
};
}import { Fluxdown } from '@fluxdown/react-native';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
streaming={{
effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
}}
text={text}
/>
);
}import { Fluxdown } from '@fluxdown/lynx';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
streaming={{
effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
}}
text={text}
/>
);
}import { Fluxdown } from '@fluxdown/solid';
type MessageProps = {
text: string;
};
export function Message(props: MessageProps) {
return (
<Fluxdown
streaming={{
effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
}}
text={props.text}
/>
);
}import { Fluxdown } from '@fluxdown/taro';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
streaming={{
effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
}}
text={text}
/>
);
}只有新出现的文字参与动画。代码、公式和替换内容保持原有渲染方式。动画遵循系统的减少动态效果设置。
#配置
以下字段属于 ['scale', config] 中的 scale 配置对象。
#enabled 可选
类型： boolean
默认值： true
在 effect: ['scale', config] 中开启逐字入场效果。已有内容保持静止。动画遵循 prefers-reduced-motion，代码、公式和替换内容沿用原有渲染。
#duration 可选
类型： number
默认值： 200
入场时长，单位为毫秒。0 立即显示字符。负数按 0 处理，非有限值使用默认时长。
#from 可选
类型： number
默认值： 0
字符的初始缩放比例，范围为 0 到 1。字符以底部中心为原点放大到完整尺寸，保留原有排版占位。超出范围的值会被限制在范围内，非有限值使用 0。
#blur 可选
类型： number
默认值： 0.08
初始模糊半径，单位为随字号变化的 em。例如字号为 20 像素时，0.08 对应 1.6 像素。模糊会在入场过程中逐渐消退，设为 0 可以关闭。负数按 0 处理，非有限值使用默认半径。