Merge pull request #51 from unovue/feat/animation-control

feat: improve pan interaction and animation state management

Author: rick-hup

Diff for: docs/components/demo/pan/index.vue

@@ -8,7 +8,6 @@ function template({ rotateY, rotateX }: TransformProperties) {
 
 const controls = useAnimationControls()
 function handlePan(_: PointerEvent, info: PanInfo) {
-  _.preventDefault()
   controls.set({
     rotateY: info.offset.x / 2,
     rotateX: -info.offset.y / 2,
@@ -26,7 +25,7 @@ function handlePanEnd() {
 <template>
   <div class="flex flex-col items-center justify-center ">
     <Motion
-      class="card"
+      class="card touch-none"
       :transform-template="template"
       :animate="controls"
       @pan="handlePan"

Diff for: packages/motion/src/animation/hooks/animation-controls.ts

@@ -4,11 +4,21 @@ import type { Options } from '@/types'
 import { invariant } from 'hey-listen'
 import { setTarget } from 'framer-motion/dist/es/render/utils/setters.mjs'
 import type { VisualElement } from 'framer-motion'
+import { resolveVariant } from '@/state/utils'
 
 function stopAnimation(visualElement: VisualElement) {
   visualElement.values.forEach(value => value.stop())
 }
 
+function setStateTarget(state: MotionState, definition: Options['animate']) {
+  const resolvedVariant = resolveVariant(definition, state.options.variants, state.options.custom)
+  Object.entries(resolvedVariant).forEach(([key, value]) => {
+    if (key === 'transition')
+      return
+    state.target[key] = value
+  })
+}
+
 /**
  * @public
  */
@@ -85,6 +95,7 @@ export function setValues(
     return setVariants(state, [definition])
   }
   else {
+    setStateTarget(state, definition)
     setTarget(state.visualElement, definition as any)
   }
 }
@@ -95,7 +106,7 @@ function setVariants(state: MotionState, variantLabels: string[]) {
   reversedLabels.forEach((key) => {
     const variant = visualElement.getVariant(key)
     variant && setTarget(visualElement, variant)
-
+    setStateTarget(state, variant)
     if (visualElement.variantChildren) {
       visualElement.variantChildren.forEach((child) => {
         setVariants(mountedStates.get(child.current as HTMLElement), variantLabels)

Diff for: packages/motion/src/state/animate-updates.ts

@@ -117,8 +117,8 @@ function createAnimationFactories(
 ): AnimationFactory[] {
   const factories: AnimationFactory[] = []
 
-  new Set(Object.keys(this.target)).forEach((key: any) => {
-    if (!hasChanged(this.visualElement.getValue(key), this.target[key]))
+  Object.keys(this.target).forEach((key: any) => {
+    if (!hasChanged(prevTarget[key], this.target[key]))
       return
 
     this.baseTarget[key] ??= style.get(this.element, key) as string

Diff for: playground/nuxt/pages/pan.vue

@@ -26,7 +26,7 @@ function handlePanEnd() {
 <template>
   <div class="flex flex-col items-center justify-center ">
     <Motion
-      class="card"
+      class="card touch-none"
       :transform-template="template"
       :animate="controls"
       @pan="handlePan"