Motion

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