01 repeat 重复

使用 yoyo 来制造无限循环，使用 repeaDelay 参数来设置重复动画之间的间隔。

import * as React from "react"
import { Override, useCycle } from "framer"
export function repeat(): Override {
    return {
        animate: {
            scale: 1.3,
        },
        transition: {
            duration: 0.3,
            yoyo: Infinity,
            // loop:Infinity,
            // 重复动画之间的延时
            repeatDelay: 1,
            // scale: { type: "spring", stiffness: 400 },
        },
    }
}

02 spring 弹簧动画

通过 transition: { type: “spring”, stiffness: 400 } 来给动画加上弹性效果。

export function spring(): Override {
    const [scale, cycle] = useCycle(1, 1.2)
    return {
        animate: { scale: scale },

        // 给动画施加弹性
        transition: { type: "spring", stiffness: 400 },
        // transition: { type: "spring", damping: 1 },

        // 自动循环
        onAnimationComplete() {
            cycle()
        },

        // 点击后循环
        // onTap() {
        //     cycle()
        // },
    }
}

2.1 stiffness 刚性

https://www.khanacademy.org/partner-content/pixar/simulation/hair-simulation-101/v/sim3-launch

2.2 damping 阻尼

可理解为弹簧的减震器，可抵抗快速变化（stiffness），值越大弹簧越快恢复原状。

03 给某个属性变化单独设置 duration

如下例所示：颜色的动画时间是 0.01，其他属性的动画时间是 0.1。

transition: {
  duration: 0.1,
    color: { duration: 0.01 },
},