动效
Evoke UI 的动效主张是「克制而有生命」：位移用平滑曲线、浮现用 spring 弹性、其余一律 0.2s ease-in-out。所有动效遵循 prefers-reduced-motion，系统开启「减弱动态效果」时自动关闭。
每个演示都配了「重新播放」—— 通过重挂载（:key 递增）再次触发同一动效。
动效令牌
| 令牌 | 值 | 用途 |
|---|---|---|
--ew-ease-spring | cubic-bezier(0.3, 1.3, 0.3, 1) | 弹性入场（滑块、徽标弹入） |
--ew-ease-smooth | cubic-bezier(0.34, 0.69, 0.1, 1) | 位移滑动（轮播、开关、卡片） |
--ew-ease-out | cubic-bezier(0.215, 0.61, 0.355, 1) | 淡入 |
--ew-duration-fast / base / slow / slower | 0.15 / 0.2 / 0.3 / 0.5s | 时长阶 |
v-reveal 滚动入场
元素进入视口时浮现。五种方向变体 + 交错延迟，默认只触发一次（once: false 可反复触发）：
五种入场变体
点「重新播放」或再次滚过本区块即可复现。
up
left
right
zoom
fade
vue
<div v-reveal="{ type: 'zoom', delay: 240 }">…</div>数字滚动
EwStatistic 的 animated 属性让数值进入视口时从 0 滚到目标值： easeOutExpo 缓动（起步迅猛、收尾徐缓），自动解析前后缀（120K+、99.99%、¥68）：
count-up
点「重新播放」再看一遍；duration 越长收尾越从容。
1,200+
周下载
99.99%
可用性
38
组件
vue
<EwStatistic value="1,200+" label="周下载" align="center" animated :duration="1600" />内建动效的组件
| 组件 | 动效 |
|---|---|
| EwMarquee | 无限滚动横幅；文本模式 = 商场 LED 大字（实心/描边交替） |
| EwTabs | capsule 分段滑块弹性跟随激活项 |
| EwFeatureGrid | cards 默认交错入场（reveal / stagger 控制） |
| EwHero | reveal 开启后徽章→标题→描述→动作 60ms 错峰入场 |
| EwNavbar | hide-on-scroll 下滑隐藏上滑浮现；滚动磨砂 |
| EwCarousel | 平滑位移轮播 + 自动播放 |
| EwCard / EwArticleCard | 悬浮轻抬 + 封面缓放 |
| EwFaq | grid-rows 平滑展开 |
| EwSwitch / EwIconGrid | spring 滑块 / 徽标弹入 |
动感文本滚动
商场 LED 风格大字横幅
EwMarquee 文本模式：大写大字 + 实心/描边交替 + 主色分隔符；hover 暂停。点「重新播放」重看一次入场。
Evoke UICLEAN NAVY轻与快DELIGHTFUL MOTION明暗一体
vue
<EwMarquee
:items="['EVOKE UI', 'CLEAN NAVY', '轻与快', 'DELIGHTFUL MOTION']"
separator="star-fill"
alternate-outline
:duration="14000"
text-size="44px"
/>重新触发动效的通用手法
一次性动效（reveal / count-up）重放的最简方式是重挂载——给容器绑定递增的 :key：
vue
<script setup>
import { ref } from 'vue'
const countKey = ref(0)
</script>
<template>
<EwButton size="small" variant="outline" icon="refresh" @click="countKey++">
重新播放
</EwButton>
<EwStatistic :key="countKey" value="1,200+" animated />
</template>