start
installationanimation
Basic usage
import {Animate} from "tuix-design"copy
<Animate
animate={["bg:red", "bg:orange", "bg:green"]}
option={{ iterations: Infinity, duration: 2000 }}
>
<Icon name="Home" color="#ffffff" />
</Animate>copy
Manual animation
In some cases animation need to be handle manually. Use ref to access the handler function
const ExampleAnimation = ()=>{
const animation = useRef<any>(null);
return (
<div>
<Animate
ref={animation}
animate={["bg:red", "bg:orange", "bg:green"]}
option={{ iterations: Infinity, duration: 2000 }}
auto={false}
>
<Icon name="Home" color="#ffffff" />
</Animate>
<Flex gap={5}>
<Button onClick={() => animation.current.play()} variant="secondary">
play
</Button>
<Button onClick={() => animation.current.pause()} variant="secondary">
pause
</Button>
<Button
onClick={() => animation.current.reverse()}
variant="secondary"
>
reverse
</Button>
<Button onClick={() => animation.current.stop()} variant="secondary">
stop
</Button>
</Flex>
</div>
)
}copy
API
| props | type | status | default | description |
|---|---|---|---|---|
| animate | styleProperties[] | required | None | animation keyframe |
| option | optionProperties | optional | defaultOptionProperties | animation option |
| auto | boolean | optional | true | true if animation start automatically |
Option Properties
| props | type | status | default | description |
|---|---|---|---|---|
| delay | number | optional | 0 | animation delay in millisecondes |
| duration | number | optional | 500 | animation duration in millisecondes |
| iterations | number | optional | 1 | animation iterations |
| easing | ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | optional | linear | animation easing |
basicmanualapioption properties