Framer-Motion : Motion Value

Motion Value

motion Value 특징

1. 애니메이션 값의 상태와 속도를 추적한다.
2. React의 렌더 사이클 외부에서 동작하기 떄문에, 컴포넌트가 다시 랜더링되지 않고도 애니메이션을 시작하고 중지할 수 있다.
3. motion value는 자동으로 생성되지만 고급 사용 사례에서는 수동으로 만들어 구성 요소에 제공할 수 있다.

Motion Value 주요 메서드

메서드	설명
get()	motion alue의 현재 상태를 반환한다.
set(newValue)	motion value의 새로운 값을 설정한다. React 재랜더링을 트리거하지 않는다.
getVelocity()	motion value의 현재 속도를 반환한다.
on(eventName,subscription)	motion value에 이벤트 리스너를 추가한다. 반환된 함수는 리스너를 취소한다.
stop()	현재 활성화된 애니메이션을 중지한다.
destroy()	motion vlaue의 구독자를 정리하고 삭제한다.
jump(newValue)	motion value를 새로운 값으로 설정하며, 이전 값과의 연속성을 끊고 속도를 0으로 리섯하며 활성화 된 애니메이션을 종료한다.

motion Value 예제

import {motion, useMotionValue} from 'framer-motion'

export default function Comp26(){

//useMotionValue Hook을 사용하여 motion value를 생성.
// 초기값을 0으로 설정
    const x = useMotionValue(0) 

//motion value를 -50으로 하는 함수 설정
    function method1(){
        x.set(-50)
    }

    return(
        <>
        //motion.div 컴포넌트에 스타일로 motion value를 적용.
        <motion.div style={{x}} 
        animate={{x:100,y:50}} transition={{duration:2}}
        >
            Motion value Example
        </motion.div>
        <button onClick={method1}>x 이동</button>
      
        </>
    )

}

---

useTransform

useTransform 혹은 Framer Motion에서 motion valu 를 변환하는 데 사용된다.
useTransform을 사용하면 하나 이상의 motion value의 출력을 변환하여 새로운 motion value를 생성할 수 있다.

useTransform 예제

MotionValue = useTransform(x, inputRange, outputRange)

import {motion, useMotionValue, useTransform} from 'framer-motion'

export default function Comp01(){
    const x = useMotionValue(-200)
    const xInput = [-200,0,200]
    
    const opacityInput = [0.5,1,0.5]
    const colorInput = ["#f00","#0f0","#00f"]

    const opacity=useTransform(x,xInput,opacityInput)
    const color = useTransform(x,xInput,colorInput)

    return(
        <>
        <motion.div style={{x,opacity,color}} 
        animate={{x:200}} transition={{duration:5}}
        >
       
            Motion value Example
        </motion.div>
   
        </>
    )

}

---

useMotionValueEvent

React 컴포넌트의 생명주기 동안 MotionValue 이벤트 핸들러를 관리하는 훅이다.
이 훅을 사용하면 MotionValue의 이벤트를 구독하고, 컴포넌트가 언마운트될 때 자동으로 구독을 해제할 수 있다.

useMotionValueEvent 사용가능 이벤트 종류

종류	설명
change	MotionValue의 최산 값을 제공한다.
animationStart	애니메이션이 시작될 때 발생한다.
animationComplete	애니메이션의 완료될 때 발생한다.
animationCancel	애니메이션이 취소될 때 발생한다.

import {motion, useMotionValue, useMotionValueEvent} from 'framer-motion'
import { useState } from 'react'

function Comp28(){
    const x = useMotionValue(0);
    const [isAnimating,setIsAnimating]=useState(false);
    
    useMotionValueEvent(x,"animationStart",()=>{
        console.log("animation이 x 속성을 기준으로 시작됨")
    });

    useMotionValueEvent(x,"change",(latest)=>{
        console.log(`x 변경 :${latest}`)
    });

    useMotionValueEvent(x,"animationComplete",()=>{
        console.log("animation x 완료");
        setIsAnimating(false)
    });
    useMotionValueEvent(x,"animationCancel",()=>{
        console.log("animation x 취소")
        setIsAnimating(false)
    });
    return(
        <div>
            <motion.div
             style={{x, width:100, height:100,backgroundColor:"blue"}}
             animate={{x : isAnimating ? 100 : 0}}
             transition={{duration:2}}
            />
            <button onClick={()=>setIsAnimating(!isAnimating)}>
                {isAnimating? "Cancel Animation" : "Start Animation"}
            </button>
        </div>
    )

}

export default Comp28

useMotionTemplate

useMotionTemplate는 여러 MotionValue를 문자열 템플릿으로 결합하여 새로운 MotionValue를 생성하는 훅이다.
문자열 템플릿 내의 MotionValue가 업데이트될 때마다 새로운 MotionValue도 최신값으로 업데이트 된다.

백틱( )안에 양식에 맞춰 사용하면 된다.

import {motion, useMotionTemplate, useMotionValue} from 'framer-motion'


function Comp29(){

    const x = useMotionValue(0)
    const backgroundColor = useMotionTemplate`rgb(0,${x},255)`;
 
    return(
        <div 
        style={{padding:"50px", backgroundColor:"white"}} >

            <motion.div      
            style={{x, width:100, height:100, backgroundColor}}      
            animate={{x: 255 }}
            transition={{duration:2}} >
            </motion.div>

        </div>
    )
}

export default Comp29

useTime

useTime은 생서왼 이후 시간을 밀리초 단위로 업데이트하는 motionValue를 반환하는 훅이다.
이 훅은 애니메이션을 지속적으로 구동하는 데 특히 유용하다.

clamp 는 범위가 벗어나도 계속 허용할지를 정하는 속성이다.
{ clamp: false } 인 경우는 범위를 벗어나도 애니메이션에 계속 진행되며 true 일 경우는 범위가 끝나면 애니메이션도 종료된다.

import {motion, useTime, useTransform} from 'framer-motion'

function Comp30(){
    const time = useTime();
    const rotate = useTransform(
        time,
        [0,4000], //4초마다
        [0,360], //360도 회전
        { clamp: false } ///4초가 지났어도(범위가 벗어나도) 계속 허용할 것인가 
        
    ) 
    return(
        <motion.div
        style={{width:100, height:100,
            backgroundColor:"blue",rotate}} >
            Rotating Box
        </motion.div>
    )
}

export default Comp30

---

useVelocity

useVelocity는 다른 Motion value의 속도를 추적하는 motion value를 생성하는 훅이다.
이 훅은 숫자 motion value를 받아서 해당 motion value의 속도로 업데이트되는 새로운 motion value를 반환한다.

import { useVelocity,motion, useMotionValue, useMotionValueEvent } from 'framer-motion';

const Comp123 = () => {
  const x = useMotionValue(0)
  const xVelocity = useVelocity(x)

  useMotionValueEvent(xVelocity,"change",
    (latestVelocity)=>{
      console.log("속도",latestVelocity.toFixed(2))
    }
  )
  return(
    <motion.div drag
      style={{x, width:100,height:100,backgroundColor:"yellow"}}
      >
        Velocity Ex
    </motion.div>
  )
};

export default Comp123;