示例:得分动画
假设在游戏中玩家每次得分时,得分数字应该以动画的形式平滑地增加到新的值。
1. 创建一个新的 Svelte 组件 Score.svelte
javascript
<script>
// 定义一个响应式的变量 score 用于存储当前得分
let score = 0;
// 模拟得分函数,用于演示目的
function addScore(points) {
// 更新得分前的临时变量
const previousScore = score;
// 更新实际得分
score += points;
// 使用 setTimeout 来模拟异步更新,比如从服务器获取新得分
setTimeout(() => {
// 这里可以触发任何其他逻辑
}, 500);
}
</script>
<!-- 显示当前得分 -->
<svelte:transition name="fade" duration={300}>
<p>{score}</p>
</svelte:transition>
<button on:click={() => addScore(10)}>+10 分</button>
在这个组件中,定义score
变量,并且有一个按钮用来模拟增加得分的动作。每当点击按钮时,addScore
函数被调用,它会增加score
的值。这里使用<svelte:transition>
来为得分的变化添加淡入淡出的效果。
2. 添加自定义过渡样式(可选)
如果想要更复杂的过渡效果,可以在Svelte项目中的全局样式文件或组件内添加CSS:
css
/* 在组件内部或者全局样式文件中 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease; /* 动画持续时间和缓动函数 */
}
.fade-enter, .fade-leave-to {
opacity: 0; /* 初始和结束状态的不透明度 */
}
3. 使用 <svelte:animate>
来实现数值变化的动画
如果希望得分的变化是渐进的而不是瞬间完成,可以使用<svelte:animate>
标签:
javascript
<script>
// 同上
let score = 0;
function addScore(points) {
const previousScore = score;
score += points;
// 动画开始
$: if (previousScore !== score) {
// 这里你可以加入更多的逻辑
}
}
</script>
<svelte:animate
from={{ value: previousScore }}
to={{ value: score }}
duration={300}
easing={t => t * (2 - t)} // 自定义缓动函数
let:value
>
<p>{value}</p>
</svelte:animate>
<button on:click={() => addScore(10)}>+10 分</button>
这里的<svelte:animate>
标签会根据from
和to
属性之间的变化来创建一个数值的平滑过渡。还定义一个自定义的缓动函数来控制动画的速度曲线。