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

【问题标题】：How to make rectangle with animated width React Native如何制作具有动画宽度的矩形 React Native
【发布时间】：2019-02-18 08:38:38
【问题描述】：

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

【问题讨论】：

动画是在在拖动事件期间还是在在用户按下事件之后执行的？
@cowCrazy 在拖动事件期间执行的动画
在这种情况下，假设您希望它尽可能原生，请查看 Reanimated 如果还不够，请检查 GestureHandler。两者都来自同一作者，并且可以很好地协同工作。遗憾的是，React Native 的 Animated api 还没有为你想要实现的目标做好准备。
@cowCrazy 是否可以更改 Slider 标准 react-native 组件的样式并使其像我的示例一样？
样式是指Zibra 线条还是滑块的X 轴偏移？

标签： javascript reactjs react-native animation react-animated

【解决方案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

【讨论】：

谢谢。看起来像我想要的，但是如何在控制手指（如滑块）的同时运行动画？
这几乎是我需要的，但有一个问题。是否可以在最小值和最大值之间设置值？比如取拉取，直到数值达到最大值或者某个数值（数值从0到10，停在8）
可以看一个例子here