Merge pull request #167 from motiondivision/chore/motion-utils

rick-hup · web-flow · commit f1b14af65910 · 2025-05-30T20:42:56.000+08:00
chore: refactor imports from motion. reuse more utils
diff --git a/packages/motion/src/components/motion/use-motion-state.ts b/packages/motion/src/components/motion/use-motion-state.ts
@@ -7,8 +7,8 @@ import { checkMotionIsHidden } from '@/components/motion/utils'
 import { injectAnimatePresence } from '@/components/presence'
 import { MotionState } from '@/state'
 import { convertSvgStyleToAttributes, createStyles } from '@/state/style'
-import { isMotionValue } from '@/utils'
 import type { DOMKeyframesDefinition } from 'framer-motion'
+import { isMotionValue } from 'framer-motion/dom'
 import { invariant, warning } from 'hey-listen'
 import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref, useAttrs } from 'vue'
 
diff --git a/packages/motion/src/components/reorder/utils.ts b/packages/motion/src/components/reorder/utils.ts
@@ -1,7 +1,5 @@
 import type { ItemData } from '@/components/reorder/types'
-import { isMotionValue } from '@/utils'
-import { mixNumber } from '@/utils/mix/number'
-import { motionValue } from 'framer-motion/dom'
+import { isMotionValue, mixNumber, motionValue } from 'framer-motion/dom'
 
 export function compareMin<V>(a: ItemData<V>, b: ItemData<V>) {
   return a.layout.min - b.layout.min
diff --git a/packages/motion/src/features/gestures/drag/VisualElementDragControls.ts b/packages/motion/src/features/gestures/drag/VisualElementDragControls.ts
@@ -11,14 +11,12 @@ import { createBox } from '@/projection/geometry/models'
 import { eachAxis } from '@/projection/utils/each-axis'
 import type { Options } from '@/types'
 import { getContextWindow } from '@/utils'
-import { percent } from '@/value/types/numbers/units'
 import { addValueToWillChange } from '@/value/use-will-change/add-will-change'
 import type { Axis, BoundingBox, Point, Transition, VisualElement } from 'framer-motion'
-import { frame } from 'framer-motion/dom'
+import { frame, mixNumber, percent } from 'framer-motion/dom'
 import { measurePageBox } from '@/projection/utils/measure'
 import { convertBoundingBoxToBox, convertBoxToBoundingBox } from '@/projection/conversion'
 import { animateMotionValue } from 'framer-motion/dist/es/animation/interfaces/motion-value.mjs'
-import { mixNumber } from '@/utils/mix/number'
 import type { LayoutUpdateData } from '@/projection/node/types'
 import { invariant } from 'hey-listen'
 import { isPresent } from '@/state/utils/is-present'
diff --git a/packages/motion/src/features/gestures/drag/utils/constraints.ts b/packages/motion/src/features/gestures/drag/utils/constraints.ts
@@ -1,8 +1,6 @@
 import type { ResolvedConstraints } from '@/features/gestures/drag/types'
 import { calcLength } from '@/projection/geometry/delta-calc'
-import { clamp } from '@/utils/clamp'
-import { mixNumber } from '@/utils/mix/number'
-import { progress as calcProgress } from '@/utils/progress'
+import { progress as calcProgress, clamp, mixNumber } from 'framer-motion/dom'
 import type { Axis, BoundingBox, Box, DragElastic } from 'framer-motion'
 
 /**
diff --git a/packages/motion/src/state/style.ts b/packages/motion/src/state/style.ts
@@ -1,9 +1,8 @@
 import type { DOMKeyframesDefinition, ResolvedValues } from 'framer-motion'
 import { isCssVar, isNumber } from './utils'
 import { buildTransformTemplate, isTransform, transformAlias, transformDefinitions } from './transform'
-import { isMotionValue } from '@/utils'
+import { isMotionValue, px } from 'framer-motion/dom'
 import type { MotionStyle } from '@/types'
-import { px } from '@/value/types/numbers/units'
 
 type MotionStyleKey = Exclude<
   keyof CSSStyleDeclaration,
diff --git a/packages/motion/src/utils/clamp.ts b/packages/motion/src/utils/clamp.ts
diff --git a/packages/motion/src/utils/index.ts b/packages/motion/src/utils/index.ts
@@ -1,5 +1,4 @@
 export * from './createContext'
-export * from './motion-value'
 export * from './use-in-view'
 export * from './use-animation-frame'
 export * from './get-context-window'
diff --git a/packages/motion/src/utils/mix/number.ts b/packages/motion/src/utils/mix/number.ts
diff --git a/packages/motion/src/utils/motion-value.ts b/packages/motion/src/utils/motion-value.ts
diff --git a/packages/motion/src/utils/progress.ts b/packages/motion/src/utils/progress.ts
diff --git a/packages/motion/src/value/types/numbers/units.ts b/packages/motion/src/value/types/numbers/units.ts
diff --git a/packages/motion/src/value/use-motion-template.ts b/packages/motion/src/value/use-motion-template.ts
@@ -1,6 +1,6 @@
 import type { MotionValue } from 'framer-motion/dom'
+import { isMotionValue } from 'framer-motion/dom'
 import { useCombineMotionValues } from './use-combine-values'
-import { isMotionValue } from '../utils/motion-value'
 
 /**
  * 将多个motion值组合成一个新的motion值,使用模板字符串语法
diff --git a/packages/motion/src/value/use-spring.ts b/packages/motion/src/value/use-spring.ts
@@ -1,9 +1,8 @@
 import type { Ref } from 'vue'
 import { isRef, watch } from 'vue'
-import { animateValue, frame, frameData, motionValue } from 'framer-motion/dom'
+import { animateValue, frame, frameData, isMotionValue, motionValue } from 'framer-motion/dom'
 import type { JSAnimation, MotionValue } from 'framer-motion/dom'
 import type { SpringOptions } from 'framer-motion'
-import { isMotionValue } from '@/utils'
 
 function toNumber(v: string | number) {
   if (typeof v === 'number')
diff --git a/packages/motion/src/value/use-will-change/is.ts b/packages/motion/src/value/use-will-change/is.ts
@@ -1,5 +1,5 @@
-import { isMotionValue } from '@/utils'
 import type { WillChange } from '@/value/use-will-change/types'
+import { isMotionValue } from 'framer-motion/dom'
 
 export function isWillChangeMotionValue(value: any): value is WillChange {
   return Boolean(isMotionValue(value) && ((value as unknown) as WillChange).add)
diff --git a/playground/nuxt/pages/test.vue b/playground/nuxt/pages/test.vue
@@ -1,18 +1,122 @@
-<script setup>
-import { motion, useMotionValue, useScroll } from 'motion-v'
+<script setup lang="tsx">
+/** @jsxImportSource vue */
+import { AnimateNumber } from 'motion-plus-vue'
+import { motion } from 'motion-v'
+import { ref } from 'vue'
 
-const { scrollYProgress } = useScroll()
-const x = useMotionValue(0)
+const isCompact = ref(false)
+const isCurrency = ref(false)
+
+function Switch({ isOn, toggle }: { isOn: boolean, toggle: () => void }) {
+  return (
+    <motion.button
+      class="switch-container"
+      style={{
+        justifyContent: `flex-${isOn ? 'end' : 'start'}`,
+      }}
+      initial={false}
+      animate={{
+        backgroundColor: isOn
+          ? 'var(--hue-6-transparent)'
+          : '#586d8c33',
+      }}
+      onClick={toggle}
+      focus={{
+        outline: '2px solid #4ff0b7',
+      }}
+    >
+      <motion.div
+        class="switch-handle"
+        layout
+        data-is-on={isOn}
+        transition={{
+          type: 'spring',
+          visualDuration: 0.2,
+          bounce: 0.2,
+        }}
+      />
+    </motion.button>
+  )
+}
 </script>
 
 <template>
-  <motion.div
-    :style="{
-      width: '100px',
-      height: '100px',
-      backgroundColor: 'red',
-      x: scrollYProgress,
-      y: x,
-    }"
-  />
+  <div class="container">
+    <AnimateNumber
+      :format="{
+        notation: isCompact ? 'compact' : undefined,
+        compactDisplay: isCompact ? 'short' : undefined,
+        roundingMode: isCompact ? 'trunc' : undefined,
+        style: isCurrency ? 'currency' : undefined,
+        currency: isCurrency ? 'USD' : undefined,
+      }"
+      locales="en-US"
+      class="number"
+      :transition="{
+        visualDuration: 0.6,
+        type: 'spring',
+        bounce: 0.25,
+        opacity: { duration: 0.3, ease: 'linear' },
+      }"
+      :value="123.49"
+    />
+    <div class="controls">
+      <div>
+        Currency:
+        <Switch
+          :is-on="isCurrency"
+          :toggle="() => isCurrency = !isCurrency"
+        />
+      </div>
+      <div>
+        Compact:
+        <Switch
+          :is-on="isCompact"
+          :toggle="() => isCompact = !isCompact"
+        />
+      </div>
+    </div>
+  </div>
 </template>
+
+<style>
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.number {
+    font-size: 78px;
+}
+
+.controls {
+    display: flex;
+    gap: 20px;
+    border-radius: 50px;
+}
+
+.controls > div {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 18px;
+}
+
+.switch-container {
+    width: 40px;
+    height: 20px;
+    border-radius: 25px;
+    cursor: pointer;
+    display: flex;
+    padding: 5px;
+}
+
+.switch-handle {
+    width: 20px;
+    height: 20px;
+    background-color: #4ff0b7;
+    border-radius: 50%;
+}
+</style>

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`export * from './createContext'`
`2`		`-export * from './motion-value'`
`3`	`2`	`export * from './use-in-view'`
`4`	`3`	`export * from './use-animation-frame'`
`5`	`4`	`export * from './get-context-window'`