Curtains Animation

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

CurtainsAnimate

Preview

Properties

Field name	Type	Description	Default value
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
curtainsLeftImage	string	The image of the left curtain.	null
curtainsRightImage	string	The image of the right curtain.	null
curtainsStyle	StyleProp	The view style of the curtains.	null
curtainsImageStyle	StyleProp	The image style of the curtains.	null
buttonImage	string	The image of the thumb.	null
buttonStyle	StyleProp	The view style of the thumb.	null
buttonImageStyle	StyleProp	The image style of the thumb.	null
buttonPositionErrorValue	number	The position error value of the thumb.	null
type	string	The type of animation. Valid values: `close` `open` `pause`	null
style	StyleProp	The style of the component.	null
width	number	The width of the curtains.	280
height	number	The height of the curtains.	280
initPercent	number	The initial open percentage. Valid values: `0` to `1`.	0.3
buttonWidth	number	The width of the thumb.	40
animateTime	number	The duration of the animation. Unit: seconds.	8
curtainsPosition	{top: number,left: number}	The position of the curtains.	{top: 15,left: 8}
onChange	function	The callback of the swipe gesture and release.	null
onMove	function	The callback of the swipe gesture and move.	null
buttonPositionErrorValue	number	The position error value of the thumb.	0

Example

import { CurtainsAnimate } from 'tuya-panel-remote-sdk'
import Res from './res';
const { roller, button, left, right } = Res;
// Image available
class CurtainsAnimate extends Component { 
  render() { 
    return <CurtainsAnimate 
    rollerImage={roller}
    buttonImage={button}
    curtainsLeftImage={left}
    curtainsRightImage={right}
    buttonPositionErrorValue={4} />; 
  } 
}

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

Prev DocCircle Handle

Next DocWindow Pusher Animation