svelte/motion

<script>
  import * as PIXI from 'pixi.js'
  import { Text, Sprite } from 'svelte-pixi'
  import { spring } from 'svelte/motion'

  let dragging = false
  let offset = { x: 0, y: 0 }
  let startingPosition = { x: 200, y: 200 }

  let position = spring(startingPosition, {
    stiffness: 0.2,
    damping: 0.4,
  })

  function handleDragStart(event) {
    dragging = true
    const { x, y } = event.detail.data.global

    offset = {
      x: x - $position.x,
      y: y - $position.y
    }
  }

  function handleDrag(event) {
    if (dragging) {
      const { x, y } = event.detail.data.global
      position.update($position => ({
        x: x - offset.x,
        y: y - offset.y,
      }), { hard: true })
    }
  }

  function handleDragEnd() {
    dragging = false
    position.set(startingPosition, { soft: 1 })
  }
</script>

<Text
  x={200}
  y={300}
  anchor={0.5}
  text="Try clicking and dragging the mushroom"
  style={{ fill: 'white', fontSize: 20 }} />
<Sprite
  texture={PIXI.Texture.from('/assets/mushroom.png')}
  anchor={0.5}
  x={$position.x}
  y={$position.y}
  rotation={($position.x - startingPosition.x) * 0.02}
  interactive
  buttonMode
  on:pointerdown={handleDragStart}
  on:pointerup={handleDragEnd}
  on:pointerupoutside={handleDragEnd}
  on:mousemove={handleDrag} />
  

<script>
  import { onMount} from 'svelte'
  import { Graphics, onTick } from 'svelte-pixi'
  import { tweened } from 'svelte/motion'
  import { cubicOut } from 'svelte/easing'

  const barWidth = 200

  const progress = tweened(barWidth / 5, {
    duration: 400,
    easing: cubicOut
  })

  let step = 0

  onTick(() => {
    step += 1

    if (step > 100) {
      step = 0

      if ($progress < barWidth) {
        $progress += barWidth / 5
      } else {
        $progress = barWidth / 5
      }
    }
  })

</script>

<Graphics
  x={200}
  y={200}
  pivot={{ x: barWidth / 2 }}
  draw={graphics => {
    graphics.clear()
    graphics.beginFill(0xff0000)
    graphics.drawRect(0, 0, $progress, 50)
    graphics.endFill()
  }}/>