如何制作具有动画宽度的矩形React Native

Question

我是React Native的新手。我需要创建一个自定义滑块，并且我认为它可以通过动画制作。那么您能解释一下如何创建此动画吗？

Answer 1

我为此创建了一个演示

import * as React from 'react';
import { Text, View, Animated } from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';

export default class App extends React.Component {

  state = {
    widthAnim: new Animated.Value(0)
  }

  maxWidthAnimate = () => {
    Animated.timing(this.state.widthAnim , {
      toValue: 1,
      duration: 2000
    });
  }

  minWidthAnimate = () => {
    Animated.timing(this.state.widthAnim , {
      toValue: 0,
      duration: 2000
    });
  }

  render() {
    const width = this.state.widthAnim.interpolate(
      {
        inputRange: [0, 0.5, 1],
        outputRange: [50, 200, 50]
      }
    );
    return (
      <View>
        <GestureRecognizer
          onSwipeLeft={this.minWidthAnimate}
          onSwipeRight={this.maxWidthAnimate}
        >
            <Animated.View style={{width: width, height: 100, backgroundColor: "blue", borderBottomRightRadius: 100, borderTopRightRadius: 100}}>
            </Animated.View>
        </GestureRecognizer>
      </View>
    );
  }
}

这是一个博览会链接：https://snack.expo.io/BJvTVMOSN