xtf-motion

组件说明

xtf-motion 是为已有内容增加入场、循环、叠加和级联动画的容器，适用于活动入口、状态提醒及卡片焦点。它不负责渲染业务内容，只通过默认插槽包裹 xtf-button、xtf-card 等现有组件。

---

基础用法

1. 基础入场

用于普通卡片的淡入效果：

<template>
  <xtf-motion effect="fade-up" :loop="false">
    <xtf-card padding="md"><xtf-text text="订单已创建" /></xtf-card>
  </xtf-motion>
</template>
<script>
export default {}
</script>

2. 主题与循环

用于持续强调的操作入口：

<template>
  <xtf-motion effect="pulse-glow" theme="success" :duration="1800">
    <xtf-button label="立即处理" @click="handleClick"
  /></xtf-motion>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('开始处理')
    }
  }
}
</script>

3. 多动画顺序播放

effects-mode="sequence" 会按数组顺序切换动画：

<template>
  <xtf-motion block :effects="effects" effects-mode="sequence" :effects-gap="160" :duration="1000">
    <xtf-card padding="md"><xtf-text text="营销活动入口" /></xtf-card>
  </xtf-motion>
</template>
<script>
export default {
  data() {
    return { effects: ['fade-up', 'pulse-glow', 'laser-sweep'] }
  }
}
</script>

4. 子节点级联

默认插槽的直接子节点可依次开始动画：

<template>
  <xtf-motion block effect="zoom-in" cascade :cascade-step="120" :loop="false">
    <xtf-text text="第一步" /><xtf-text text="第二步" /><xtf-button label="完成" @click="done"
  /></xtf-motion>
</template>
<script>
export default {
  methods: {
    done() {
      uni.showToast({ title: '已完成', icon: 'none' })
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
effect	String	'pulse-glow'	单个动画名	单效果
effects	Array | String	[]	动画列表，可为空格、逗号或数组	多效果
effectsMode	String	'parallel'	'parallel' 同时播放，'sequence' 顺序播放	effects 多项时
effectsGap	String | Number	120	顺序播放间隔（ms）	顺序播放
theme	String	'primary'	primary/success/warning/danger/info 主题色	使用主题色
accentColor	String	''	主强调色	覆盖主题主色
accentColor2	String	''	次强调色	覆盖主题柔和色
duration	String | Number	2200	动画时长，限制为 500-6000ms	调整节奏
delay	String | Number	0	初始延迟（ms）	延后入场
loop	Boolean	true	是否无限循环	持续强调
cascade	Boolean	false	是否让默认插槽直接子节点级联	多项内容
cascadeStep	String | Number	120	子节点级联间隔（ms）	cascade 为真
play	Boolean	true	是否播放动画	外部暂停动画
paused	Boolean	false	是否暂停，并会停止顺序计时器	临时冻结
overlay	Boolean	true	是否渲染光晕、扫描线等特效层	强视觉效果
overlayLayer	String	'below'	覆盖层在内容上方或下方	'above'/'below'
auraLayer	String	'below'	光晕在内容上方或下方	'above'/'below'
intensity	String | Number	1	特效强度，限制为 0.6-1.8	调整幅度
radius	String | Number	28	容器圆角	包裹卡片
inset	String | Number	10	内容外侧留白	调整包裹间距
block	Boolean	false	是否占满可用宽度	块级区域
customClass	String	''	根节点自定义类名	样式覆盖
customStyle	String | Object	''	根节点自定义样式	动态样式

---

事件

事件名称	触发时机	回调参数	参数说明
click	点击根容器时	(event: Event)	原始点击事件

事件使用示例

<template>
  <xtf-motion effect="shockwave" theme="danger" @click="handleMotionClick">
    <xtf-button label="风险提示"
  /></xtf-motion>
</template>
<script>
export default {
  methods: {
    handleMotionClick(event) {
      console.log('motion click', event)
    }
  }
}
</script>

---

插槽

插槽名	作用域参数	说明
默认插槽	无	动画包裹的业务内容；开启 cascade 时，直接子节点会按 cascadeStep 依次开始动画。

默认插槽示例

<template>
  <xtf-motion block effect="fade-up" :loop="false" @click="handleClick">
    <view class="notice">库存已同步</view>
  </xtf-motion>
</template>
<script>
export default {
  methods: {
    handleClick(event) {
      console.log('motion click', event)
    }
  }
}
</script>

---

主题说明

• 主色使用 var(--xtf-motion-accent)，默认来自 --xtf-color-primary 等主题变量。
• 次色和光晕使用 var(--xtf-motion-secondary)。
• 时长、圆角、内边距分别由 --xtf-motion-duration、--xtf-motion-radius、--xtf-motion-inset 控制。
• overlay 为真时，特效层按 overlayLayer 和 auraLayer 叠放。

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关颜色变量。