svelte - 如何使用补间存储为 svelte 中的数组值设置动画？

Question

我有一个包含以下数据的可写存储

   let array= writable({
                          skills: [{
                                    id: 1,
                                    name: "Wordpress",
                                    knowledge: 0.9
                                   }, 
                                   {
                                    id: 2,
                                    name: "Js",
                                    knowledge: 0.8
                                     } ]
                      })

我想根据 KNOWLEDGE 为进度条设置动画，我在 {#each } 循环中访问知识，但进度条没有动画，因为我必须传递补间存储对象并设置它的值。那么如何为 bar 设置动画呢？如何在循环中将知识值传递给补间对象 set() 方法？

Answer 1

数组中的每条记录都需要一个对应的tweened()存储。您可以创建一个组件来为您执行此操作。

1. 创建一个包装<progress/>并具有tweened()商店的组件：

<!-- SkillProgress.svelte -->
<script>
    import {tweened} from 'svelte/motion'

    export let value = 0

    const progress = tweened(0)

    progress.set(value)
</script>

<progress value={$progress}/>

2. 在中，为每个技能记录App.svelte绑定一个组件：<SkillProgress/>

<!-- App.svelte -->
<script>
  import SkillProgress from './SkillProgress.svelte'
  import {writable} from 'svelte/store'

  const skills = writable([{
            id: 1,
            name: "Wordpress",
            knowledge: 0.9
        }, 
        {
            id: 2,
            name: "Js",
            knowledge: 0.8
        }])
</script>

<ul>
    {#each $array.skills as skill}
        <li>
            {skill.name}
            <SkillProgress value={skill.knowledge}/>
        </li>
    {/each}
</ul>