01 useCycle

01 使用 Variants

使用 variant 设置两个状态，点击时在两个状态中生成动画。

export function rotate(): Override {
    // 在两个状态中切换，触发函数为 cycle(),动画为 animate
    const [animate, cycle] = useCycle("rotated", "untated")
    return {
        // 设置状态(可包含多个属性)
        variants: {
            rotated: {
                rotate: 0,
                scale: 1,
                borderRadius: 8,
            },
            untated: {
                rotate: 90,
                scale: 1.2,
                borderRadius: 20,
            },
        },
        // 动画
        animate: animate,
        // 点击时激活动画
        onTap() {
            cycle()
        },
    }
}

02 不使用 Variants

若值包含单一参数，则可不使用 variants。

// 不使用 variants
export function scale(): Override {
    const [scale, cycle] = useCycle(1, 1.5)
    return {
        // 动画
        animate: { scale: scale },
        // 点击时激活动画
        onTap() {
            cycle()
        },
    }
}