# useCycle

**useCycle(**c1, c2**): \[**currentState,  cycleState**]**

这个方法能实现在多个视觉属性设置中切换。它能让状态切换时产生自然的动画过渡。它的工作原理有点像React中的useState方法。你需要给这个方法传递几个参数，分别是当前的状态和将要切换的状态，然后它会返回一个数组，内含有两个参数，第一个是当前状态值，第二个是能触发切换的方法。

```jsx
import * as React from "react"
import { Frame, useCycle } from "framer"

export function MyComponent() {
  const [x, cycleX] = useCycle(0, 50, 100)

  return (
    <Frame
      animate={{ x: x }}
      onTap={() => cycleX()}
     />
   )
}
```

| <p>items: T\[]</p><p>想要进行切换的几个状态</p>                             |
| ---------------------------------------------------------------- |
| <p>returns: CycleState\<T></p><p>\[currentState, cycleState]</p> |

**Cycling between Variants**

useCycle方法经常被用于和variants属性结合进行切换动画效果。

在这个案例中，我们定义了一个有三个属性装啊提的variants的对象，然后使用useCycle方法创建出了一个current变量和cycle方法，然后把current赋值到了Frame组件上的animate属性上，同时给onTap赋值了一个带有cycle方法的匿名函数。

这样的话，我们每次去点击Frame元素的时候，都会触发Frame的背景颜色向下一个variants的属性进行切换，因为你每次点击，current变量里的属性名称都会进行切换。

```jsx
import * as React from "react"
import { Frame, useCycle } from "framer"

export function MyComponent() {
  const variants = {
    green: { background: "#1ea463" },
    yellow: { background: "#fecd45" },
    red: { background: "#de5347" },
  }

  const [current, cycle] = useCycle(
    "green",
    "yellow",
    "red"
  )

  return (
    <Frame
      variants={variants}
      animate={current}
      onTap={() => cycle()}
    />
  )
}
```

**Cycling to a Specific Value**

你可以通过给useAnimation产生的cycle方法传递index参数，来切换到某个特定的样式。

在上一个案例中，我们每次店家Frame标签都会在三个variants属性名中依次切换。但是在我们这里，我们想要让他在鼠标离开Frame元素时立即到“green”状态，那么我就在cycle方法那里给它传递了一个0，0就是“green”这个状态在使用useCycle这个方法时的下标值。

```jsx
import * as React from "react"
import { Frame, useCycle } from "framer"

export function MyComponent() {
  const variants = {
    green: { background: "#1ea463" },
    yellow: { background: "#fecd45" },
    red: { background: "#de5347" },
  }

  const [current, cycle] = useCycle(
    "green",
    "yellow",
    "red"
  )

  return (
    <Frame
      variants={variants}
      animate={current}
      onTap={() => cycle()}
      onMouseLeave={() => cycle(0)}
    />
  )
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yinglinhan.gitbook.io/framer-x-api/library-ku/utilities/usecycle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.