react-native - 如何使用 React Native 社区/滑块在 react-native-svg 弧中生成流畅的动画？

Question

我的滑块调用一个函数changeIncome：

        <Slider
          minimumValue={0}
          step={1}
          maximumValue={sliderUIData.income_range} // {sliderUIData.income_range}
          style={{ width: 370, height: 40 }}
          step={10}
          minimumTrackTintColor="#AADD00"
          maximumTrackTintColor="000000"
          thumbTintColor={Platform.select({ android: appColors.blue})}
          //redux values:
          value={sliderUIData.income_slider}
          onValueChange={ (value) => changeIncome(value) } <<<
          // events:
          onSlidingStart={(value) => slidingStart(value)}
          onSlidingComplete={(value) => slidingComplete(value)}
        />
    
       

然后将该值保存在 Redux 状态中，然后被另一个组件拾取：

const  changeIncome =  async (values) => {
    dispatch(changeincome(values));
    
     
  };

在第二个组件中（实际上只是一组函数），然后根据滑块设置的值设置弧段（在执行了大量计算之后）：

（只显示第一段）

 this.segment1Start = 0
    this.segment1End = this.segment1Start + this.income;
    if (this.segment1End > arcEnd) {
      this.segment1End = arcEnd;
    }
  
if (this.segment1Start != this.save_segment1Start) { dispatch(changearcsegment1begin(this.segment1Start))} ; 
    if (this.segment1End != this.save_segment1End) { dispatch(changearcsegment1end(this.segment1End))};
    this.save_segment1End = this.segment1End
    this.save_segment1Start = this.segment1Start

dispatch(changearcsegment) 代码将值发送到 redux 状态，然后由 redux 状态更改（arcData.arc_segment_1_begin,arcData.arc_segment_1_end）触发弧重绘：

      <Svg
        width={windowWidth}
        height={modwindowHeight - svgWindowHeightFactor}
        onLayout={onSVGLayout}
      >
        {/* rent amount */}

        <Path
          fill="none"
          stroke={appColors.incomeRed}
          strokeWidth={15}
          strokeLinecap="square"
          d={drawArc(
            windowWidth * 0.5,
            svgsize.height,
            Platform.OS === "ios"
              ? svgsize.height * 0.93
              : svgsize.height * 0.92,
            arcData.arc_segment_1_begin,
            arcData.arc_segment_1_end
          )}
        />

所有这些都非常出色，除了弧仅在 onValueChange 由滑块更新。我希望弧线在滑动动作期间平滑地动画。我现在正在上 Using React Native Animated 课程（Udemy），可能会在那里遇到解决方案，但我想我会在这里问论坛专家。

社区滑块在底层是原生的（即，Android 滑块和 iOS 滑块）。Animated 有一些本机功能，但我认为这与这里无关。此外，Animated 可以从滚动视图和其他几种情况下获取本机事件，但在这里也可能不相关。

问题：如何重写此代码以使弧在滑动动作期间平滑动画？（正如他们在 iOS 上的原生 Swift 应用程序中使用滑块时所做的那样，无需特别努力）。

标签： react-nativeanimationsvgreact-reduxslider