feat: useSpring

demo/src/App.vue

@@ -0,0 +1,53 @@
+<template>
+  <main class="main">
+    <label> <input type="checkbox" v-model="paused" /> Paused </label>
+    <!-- <MovingDot v-for="i in 3" :key="i" :paused="paused"></MovingDot> -->
+    <CardDemo :paused="paused" />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import MovingDot from './MovingDot.vue'
+import CardDemo from './views/CardDemo.vue'
+
+export default defineComponent({
+  components: { MovingDot, CardDemo },
+
+  setup() {
+    let paused = ref(true)
+
+    return { paused }
+  },
+})
+</script>
+
+<style>
+html {
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
+    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+}
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+</style>
+
+<style scoped>
+.main {
+  width: 100%;
+  height: 100%;
+}
+</style>

demo/src/MovingDot.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="dot second" :style="dotPositionStatic"></div>
+  <div class="dot" :style="dotPosition"></div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onUnmounted, ref, unref, watch } from 'vue'
+import { useMouse } from '@vueuse/core'
+import { presets, useSpring } from '../../src'
+
+function generateRandomPosition(offset = 100) {
+  return {
+    x: offset + Math.random() * (window.innerWidth - offset * 2),
+    y: offset + Math.random() * (window.innerHeight - offset * 2),
+  }
+}
+
+export default defineComponent({
+  props: {
+    paused: Boolean,
+  },
+
+  setup(props) {
+    const dot = ref(generateRandomPosition())
+    const mouse = useMouse()
+
+    watch([mouse.x, mouse.y], ([x, y]) => {
+      dotAnimated.x = x
+      dotAnimated.y = y
+    })
+
+    const dotAnimated = useSpring(dot)
+
+    dot.value = generateRandomPosition()
+
+    const interval = setInterval(() => {
+      if (!props.paused) {
+        Object.assign(dotAnimated, generateRandomPosition())
+      }
+    }, 1000)
+    onUnmounted(() => {
+      clearInterval(interval)
+    })
+
+    const dotPositionStatic = computed(() => {
+      const pos = unref(dot)
+      return {
+        transform: `translate(${pos.x}px, ${pos.y}px)`,
+      }
+    })
+
+    const dotPosition = computed(() => {
+      const pos = dotAnimated
+      return {
+        transform: `translate(${pos.x}px, ${pos.y}px)`,
+      }
+    })
+
+    return { presets, dot, dotPosition, dotPositionStatic }
+  },
+})
+</script>
+
+<style scoped>
+.dot {
+  position: absolute;
+  z-index: 100;
+  background-color: crimson;
+  /* border: maroon solid 2px; */
+  top: 0;
+  left: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
+  will-change: transform;
+}
+
+.second {
+  background-color: mediumspringgreen;
+  /* width: 4px;
+  height: 4px; */
+}
+</style>

demo/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+let app = createApp(App)
+app.mount('#app')

demo/src/views/CardDemo.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="root">
+    <div
+      class="card"
+      :style="cardStyle"
+      @click="spin"
+      @mousemove="update"
+      @mouseleave="reset"
+    >
+      <!-- <pre>{{ transform }}</pre> -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useSpring } from '../../../src'
+
+export default defineComponent({
+  props: {
+    paused: Boolean,
+  },
+  setup(props) {
+    const springConfig = {
+      mass: 5,
+      tension: 350,
+      friction: 40,
+    }
+
+    const transform = useSpring({ x: 0, y: 0, z: 0, scale: 1 }, springConfig, {
+      onRest() {
+        transform.z = 0
+      },
+    })
+
+    function update({ clientX: x, clientY: y }: MouseEvent) {
+      transform.x = -(y - window.innerHeight / 2) / 20
+      transform.y = (x - window.innerWidth / 2) / 20
+      transform.scale = 1.1
+    }
+
+    function spin() {
+      transform.z = (Math.round(Math.random() * 2) + 1) * 180
+    }
+
+    function reset() {
+      transform.x = 0
+      transform.y = 0
+      transform.scale = 1
+    }
+
+    const cardStyle = computed(() => ({
+      transform: `perspective(600px) rotateX(${transform.x}deg) rotateZ(${transform.y}deg) rotateY(${transform.z}deg) scale(${transform.scale})`,
+    }))
+
+    return { cardStyle, update, reset, spin, transform }
+  },
+})
+</script>
+
+<style scoped>
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #f0f0f0;
+  width: 100%;
+  height: 100%;
+}
+
+.card {
+  width: 45ch;
+  height: 45ch;
+  background: grey;
+  border-radius: 5px;
+  background-image: url(https://th.bing.com/th/id/OIP.dNThH2YkeWOEcyYZ9wKcEQHaJl?pid=Api&rs=1);
+  background-size: cover;
+  background-position: center center;
+  box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
+  transition: box-shadow 0.5s;
+  will-change: transform;
+  border: 15px solid white;
+  /* backface-visibility: hidden; */
+}
+
+.card:hover {
+  box-shadow: 0px 30px 100px -10px rgba(0, 0, 0, 0.4);
+}
+</style>

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Muelle</title>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/demo/src/main.js"></script>
+  </body>
+</html>

package.json

@@ -42,6 +42,7 @@
     "@types/jest": "^26.0.8",
     "@types/jsdom": "^16.2.3",
     "@vue/test-utils": "^2.0.0-beta.4",
+    "@vueuse/core": "^4.0.0-beta.16",
     "codecov": "^3.7.2",
     "conventional-changelog-cli": "^2.0.34",
     "jest": "^26.2.2",
@@ -54,6 +55,7 @@
     "size-limit": "^4.6.0",
     "ts-jest": "^26.1.4",
     "typescript": "^4.0.2",
+    "vite": "^1.0.0-rc.4",
     "vue": "^3.0.0-rc.5",
     "yorkie": "^2.0.0"
   },

src/index.ts

@@ -1,42 +1,2 @@
-import { defineComponent, PropType, VNodeProps, h } from 'vue'
-
-/**
- * Returns true.
- */
-export function mylib() {
-  return true
-}
-
-export interface ComponentProps {
-  custom?: boolean
-  data: { title: string; summary: string }
-}
-
-export const ComponentImpl = defineComponent({
-  props: {
-    custom: Boolean,
-    data: {
-      required: true,
-      type: Object as PropType<ComponentProps['data']>,
-    },
-  },
-
-  setup(props) {
-    return () =>
-      h(
-        'p',
-        `Custom: ${props.custom}. ${props.data.title} - ${props.data.summary}.`
-      )
-  },
-})
-
-// export the public type for h/tsx inference
-// also to avoid inline import() in generated d.ts files
-/**
- * Component of vue-lib.
- */
-export const Component = (ComponentImpl as any) as {
-  new (): {
-    $props: VNodeProps & ComponentProps
-  }
-}
+export * from './presets'
+export { useSpring } from './motion'