Motion

Last Updated on : 2023-10-12 08:00:23download

Overview

Motion component is used to enrich component actions.

Note: this component is added in the @2.0.0-rc.2 version.

Code demo

Note: for more information, see Demo.

Fade-in and fade-out

import React from "react"; import { View, StyleSheet } from "react-native"; import { Button, Motion, Utils } from "tuya-panel-kit"; const { winWidth } = Utils.RatioUtils; class MotionScene extends React.PureComponent { constructor(props) { super(props); this.state = { showFade: false }; } render() { return ( <View style={{ flex: 1 }}> <Button style={styles.button} text="Motion.Fade" textStyle={styles.text} onPress={() => this.setState({ showFade: ! this.state.showFade })} /> <Motion.Fade show={this.state.showFade} onHide={() => this.setState({ showFade: false })} > <View style={styles.content} /> </Motion.Fade> </View> ); } } const styles = StyleSheet.create({ button: { marginTop: 12, width: winWidth, height: 44, backgroundColor: "#666" }, text: { color: "#fff" }, content: { width: winWidth, height: 200, backgroundColor: "#f0f" } }); export default MotionScene;

Swipe up and swipe down

import React from "react"; import { View, StyleSheet } from "react-native"; import { Button, Motion, Utils } from "tuya-panel-kit"; const { winWidth } = Utils.RatioUtils; class MotionScene extends React.PureComponent { constructor(props) { super(props); this.state = { showPullUp: false }; } render() { return ( <View style={{ flex: 1 }}> <Button style={styles.button} text="Motion.PullUp" textStyle={styles.text} onPress={() => this.setState({ showPullUp: ! this.state.showPullUp })} /> <Motion.PullUp style={{ position: "absolute", bottom: 0 }} dropHeight={200} show={this.state.showPullUp} onHide={() => this.setState({ showPullUp: false })} > <View style={[styles.content, { bottom: 0 }]} /> </Motion.PullUp> </View> ); } } const styles = StyleSheet.create({ button: { marginTop: 12, width: winWidth, height: 44, backgroundColor: "#666" }, text: { color: "#fff" }, content: { width: winWidth, height: 200, backgroundColor: "#f0f" } }); export default MotionScene;

Zoom in and fade in/zoom out and fade out

import React from "react"; import { View, StyleSheet } from "react-native"; import { Button, Motion, Utils } from "tuya-panel-kit"; const { winWidth } = Utils.RatioUtils; class MotionScene extends React.PureComponent { constructor(props) { super(props); this.state = { showScaleFadeIn: false }; } render() { return ( <View style={{ flex: 1 }}> <Button style={styles.button} text="Motion.ScaleFadeIn" textStyle={styles.text} onPress={() => this.setState({ showScaleFadeIn: ! this.state.showScaleFadeIn }) } /> <Motion.ScaleFadeIn style={{ marginTop: 40 }} show={this.state.showScaleFadeIn} onHide={() => this.setState({ showScaleFadeIn: false })} > <View style={styles.content} /> </Motion.ScaleFadeIn> </View> ); } } const styles = StyleSheet.create({ button: { marginTop: 12, width: winWidth, height: 44, backgroundColor: "#666" }, text: { color: "#fff" }, content: { width: 200, height: 200, backgroundColor: "#f0f" } }); export default MotionScene;

Zoom in and fade in/swipe down and fade out

import React from "react"; import { View, StyleSheet } from "react-native"; import { Button, Motion, Utils } from "tuya-panel-kit"; const { winWidth } = Utils.RatioUtils; class MotionScene extends React.PureComponent { constructor(props) { super(props); this.state = { showScalePullDown: false }; } render() { return ( <View style={{ flex: 1 }}> <Button style={styles.button} text="Motion.ScalePullDown" textStyle={styles.text} onPress={() => this.setState({ showScalePullDown: ! this.state.showScalePullDown }) } /> <Motion.ScalePullDown style={{ marginTop: 40 }} show={this.state.showScalePullDown} onHide={() => this.setState({ showScalePullDown: false })} > <View style={styles.content} /> </Motion.ScalePullDown> </View> ); } } const styles = StyleSheet.create({ button: { marginTop: 12, width: winWidth, height: 44, backgroundColor: "#666" }, text: { color: "#fff" }, content: { width: 200, height: 200, backgroundColor: "#f0f" } }); export default MotionScene;

Swipe down and swipe up

import React from "react"; import { View, StyleSheet } from "react-native"; import { Button, Motion, Utils } from "tuya-panel-kit"; const { winWidth } = Utils.RatioUtils; class MotionScene extends React.PureComponent { constructor(props) { super(props); this.state = { showPushDown: false }; } render() { return ( <View style={{ flex: 1 }}> <Button style={styles.button} text="Motion.PushDown" textStyle={styles.text} onPress={() => this.setState({ showPushDown: ! this.state.showPushDown }) } /> <Motion.PushDown style={{ marginTop: 40 }} show={this.state.showPushDown} onHide={() => this.setState({ showPushDown: false })} dropHeight={200} > <View style={styles.content} /> </Motion.PushDown> </View> ); } } const styles = StyleSheet.create({ button: { marginTop: 12, width: winWidth, height: 44, backgroundColor: "#666" }, text: { color: "#fff" }, content: { width: 200, height: 40, backgroundColor: "#f0f" } }); export default MotionScene;

Zoom in and fade in/zoom out and fade out without operation

import React from "react"; import { View, StyleSheet } from "react-native"; import { Button, Motion, Utils } from "tuya-panel-kit"; const { winWidth } = Utils.RatioUtils; class MotionScene extends React.PureComponent { constructor(props) { super(props); this.state = { show: false }; } render() { return ( <View style={{ flex: 1 }}> <Button style={styles.button} text="Motion.Toast" textStyle={styles.text} onPress={() => this.setState({ show: true })} /> <Motion.Toast style={{ marginTop: 40 }} show={this.state.show} onFinish={() => this.setState({ show: false })} > <View style={{ width: 200, height: 200, backgroundColor: "#f0f" }} /> </Motion.Toast> </View> ); } } const styles = StyleSheet.create({ button: { marginTop: 12, width: winWidth, height: 44, backgroundColor: "#666" }, text: { color: "#fff" } }); export default MotionScene;

API general

style

The style of the content.

Type Required Default value
ViewPropTypes.style No null

show

Whether to display the content.

Type Required Default value
Bool No undefined

children

Custom content.

Type Required Default value
Element Yes null

showDuration

Display duration of the animation.

Type Required Default value
Number No 300

hideDuration

Hiding duration of the animation.

Type Required Default value
Number No 300

onShow

Callback of showing the animation.

Type Required Default value
Func No () => {}

onHide

Callback of hiding the animation.

Type Required Default value
Func No () => {}

animationConfig

Animation effect configuration.

Type Required Default value
{ “duration”: “number”, “delay”: “number”, “isInteraction”: “Boolean”, “useNativeDriver”: “Boolean” } No { duration: 300, delay: 0, isInteraction: true, useNativeDriver: true, }

API-Motion.Fade

fadeOpacity

Animation opacity.

Type Required Default value
Number No 1

API-Motion.PullUp

dropHeight

Animation drop height.

Type Required Default value
Number No undefined

API-Motion.ScaleFadeIn

initScale

The initial zoom scale.

Type Required Default value
Number No 0

finalScale

The zoom scale at the end of the animation.

Type Required Default value
Number No 0

API-Motion.ScalePullDown

initScale

The initial zoom scale.

Type Required Default value
Number No 0

API-Motion.PushDown

dropHeight

Animation drop height.

Type Required Default value
Number No 200

API-Motion.Toast

initScale

The initial zoom scale.

Type Required Default value
Number No 0