Question

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

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

我想根据知识对进度条进行动画处理，我正在{#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>

如何用补间存储来动画化数组值？

1 个答案: