Curtain Roller Animation

Last Updated on : 2022-03-07 01:37:55download

RollerAnimate

Preview

Properties

Field name	Type	Description	Default value
style	StyleProp	The style of the component.	null
width	number	The width of the curtain roller.	250
height	number	The height of the curtain roller.	280
initPercent	number	The initial open percentage. Valid values: `0` to `1`.	0.5
buttonWidth	number	The width of the thumb.	40
type	string	The type of animation. Valid values: `close` `open` `pause`	null
rollerPosition	object	The position of the curtain roller.	{ top: cx(26), left: cx(20)}
animateTime	number	The duration of the animation. Unit: seconds.	8
bgImage	string	The background image of the curtain.	null
bgImageStyle	StyleProp	The style of the background image for the curtain.	null
rollerImage	string	The image of the curtain roller.	null
rollerStyle	StyleProp	The view style of the curtain roller.	null
rollerImageStyle	StyleProp	The image style of the curtain roller.	null
buttonImage	string	The image of the thumb.	null
buttonImageStyle	StyleProp	The image style of the thumb.	null
onChange	function	Callback for the end of the animation.	null
onMove	function	Animation execution callback.	null

Example

import { RollerAnimate } from 'tuya-panel-remote-sdk'
import Res from './res';
const { roller, button, background } = Res;

// Image available
class RollerAnimate extends Component { 
  render() { 
    return  <RollerAnimate
              rollerImage={roller}
              buttonImage={button}
              bgImage={background}
              type={type}
            />; 
  } 
}

import { RollerAnimate } from 'tuya-panel-remote-sdk'
// No image available
class RollerAnimate extends Component { 
  render() { 
    return <RollerAnimate type={null}/>; 
  } 
}

Prev DocWindow Pusher Animation

Next DocLight Animate