01 借助Data传递参数

操作后改变 data 的值，设定动画参数为 data 的值，data 值改变时动画开始。

import { Data, Override } from "framer"
const data = Data({
    rotate: 0,
})
export function ClickRotate(): Override {
    return {
        animate: { rotate: data.rotate },
        onTap() {
            data.rotate = data.rotate + 90
        },
        // 语法二
        // onTap:()=>{data.rotate=data.rotate+90}
    }
}

或者使用 Hook 的方式。

import * as React from "react"
import { Override } from "framer"
export function ClickRotate(): Override {
    // const rotate=0
    const [rotate, setRotate] = React.useState(0)
    return {
        // 点击时 rotate 的值改变
        onTap() {
            setRotate(rotate + 90)
        },
        animate: { rotate: rotate },
    }
}

02 颜色渐变动画&循环 yoyo: infinity

import * as React from "react"
import { Frame, Override } from "framer"

export function Animation_Color(): Override {
    return {
        animate: {
            backgroundColor: "white",
            transition: {
                duration: 1,
                yoyo: Infinity,
            },
        },
    }
}

03 loop:infinity

设置 transtion zhon中 loop的值为 infinity 可使动画重复。

export function Loop(): Override {
    return {
        animate: { rotate: 360 },
        transition: { duration: 0.1, loop: Infinity, ease: "linear" },
    }
}

04 initial 初始状态

两种方法设置 initial 状态。

export function asValues(): Override {
    return {
        initial: { opacity: 0.5 },
    }
}

export function asVariants(): Override {
    const variants = {
        state1: {
            opacity: 0.1,
        },
        state2: {
            opacity: 1,
        },
    }
    return {
        initial: "state1",
        variants: variants,
    }
}

05 Keyframes 关键帧

关键帧，通过关键帧的方式设定动画参数。

export function Motion() {
    return (
        <Frame width={600} height={450} background={"#0055ff"}>
            <Frame
                animate={{
                    scale: [1, 2, 2, 1, 1],
                    rotate: [0, 0, 270, 270, 0],
                    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
                    transition: {
                        duration: 1.4,
                        yoyo:Infinity,
                        repeatDelay:1,
                    },
                }}
                center={true}
                width={100}
                height={100}
                background={"white"}
            />
        </Frame>
    )
}

06 onAnimationStart

定义在 animate 中的动画开始时的回调函数。

07 onAnimationComplete

定义在 animate 中的动画结束时的回调函数。