如何使用补间商店为 svelte 中的数组值设置动画？

Question

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

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

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

Answer 1

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

创建一个包装 <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}/>

在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>

Answer 2

只是为了补充上面 joshnuss 的回答。

SkillProgress.svelte 需要一处更改：

progress.set(值) 应该是 $: progress.set(价值)

如何使用补间商店为 svelte 中的数组值设置动画？

How to animate array values in svelte with tweened store?

svelte

svelte-3

svelte-component

svelte-store