Как анимировать значения массива в svelte с помощью tweened store?

Question

У меня есть доступный для записи магазин со следующими данными

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

Я хочу анимировать индикатор выполнения в соответствии с ЗНАНИЕМ, я получаю доступ к знаниям в цикле {#each }, но панель не анимируется, потому что мне нужно передать анимированный объект хранилища и установить его значение. Итак, как оживить бар? как передать значение знаний методу 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>

Answer 2

Просто чтобы добавить к ответу Джошнуса выше.

SkillProgress.svelte нуждается в одном изменении:

progress.set(значение)должно быть$: progress.set(значение)