08 variants

Variants are collections of visual properties, like states, that you can animate or cycle between. For example, buttons usually have a hover state next to their default state. On hover, perhaps the background and boxShadow are changed. These properties can be defined in variants.
First, we’re defining the variants, which are essentially collections of visual properties. In this case, they’ll each contain a scale and a rotate value. We’ll call them variantA and variantB respectively.

Finally, we’re referencing the properties using the variants property, and animating to variantB on hover with the whileHover property.

Variants 是视觉参数的集合，像状态一样，你可以在这些视觉参数之间进行动画或循环。比如，按钮通常有个悬浮态，可能悬浮时按钮背景色和阴影改变了，这些参数可以在variants中定义 。第一步，我们定义这些本质上是视觉参数的变体。在这个案例中，他们各自都包含了缩放和旋转的值。我们会在variantA和variantB中分别调用他们。

最终，我们使用variants参数去引用他们，通过whileHover属性动画到variantB

import * as React from "react"
import { Override } from "framer"
export function ScaleRotate(): Override {
    const variants = {
        variantA: {
            scale: 1,
            rotate: 0,
        },
        variantB: {
            scale: 1.3,
            rotate: 90,
        },
    }
    return {
        initial: "variantA",
        whileHover: "variantB",
        // 声明调取 variants，调取之后才有效
        variants: variants,
    }
}

注：调用时要声明调取 variants: variants