App.vue

<script setup lang="ts">
import { ref } from 'vue'

import { spring, springValue, sv } from '../../src/vue'

const dotLeftPosition = {
  x: 100,
  y: 200,
}

const dotRightPosition = {
  x: 500,
  y: 200,
}

const x = springValue(dotLeftPosition.x)
const y = springValue(dotLeftPosition.y)

const isDragging = ref(false)

const onPointerDown = (e: PointerEvent) => {
  isDragging.value = true
  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
}

const onPointerMove = (e: PointerEvent) => {
  if (!isDragging.value) {
    return
  }

  x.target = e.clientX
  y.target = e.clientY
}

const onPointerUp = () => {
  if (!isDragging.value) {
    return
  }
  isDragging.value = false

  const velocityX = x.velocity()
  const threshold = (dotLeftPosition.x + dotRightPosition.x) / 2

  if (x.target + velocityX > threshold) {
    x.target = dotRightPosition.x
    y.target = dotRightPosition.y
  } else {
    x.target = dotLeftPosition.x
    y.target = dotLeftPosition.y
  }
}
</script>

<template>
  <div class="wrapper">
    <div class="dot left"></div>
    <div class="dot right"></div>

    <spring.div
      class="ball"
      :spring-style="{ translate: sv`${x}px ${y}px` }"
      :duration="800"
      :disabled="isDragging"
      @pointerdown="onPointerDown"
      @pointermove="onPointerMove"
      @pointerup="onPointerUp"
    />
  </div>
</template>

<style scoped>
.dot {
  position: absolute;
  margin-top: -2.5px;
  margin-left: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
}

.left {
  left: calc(1px * v-bind('dotLeftPosition.x'));
  top: calc(1px * v-bind('dotLeftPosition.y'));
}

.right {
  left: calc(1px * v-bind('dotRightPosition.x'));
  top: calc(1px * v-bind('dotRightPosition.y'));
}

.ball {
  position: absolute;
  left: -50px;
  top: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
  will-change: transform;
}
</style>