Question

我正在看这道小吃：https://snack.expo.io/SJzzaNaQN下面是我期望它可以随着放松而平稳地增加高度的代码，但是没有成功：

Animated.timing(this.anim, {
 toValue: fill,
 duration: 2000,
 easing: Easing.linear
}).start();

帮助？

Answer 1

这是您修复的代码

 import React, { Component } from 'react';
    import { Animated, Text, TextInput, View, StyleSheet, Easing } from 'react-native';

    class CircleFillable extends Component {
      anim = new Animated.Value(this.props.fill)

      componentDidUpdate(propsOld) {
        const { fill } = this.props;
        const { fill:fillOld } = propsOld;

        if (fill !== fillOld) {
          Animated.timing(this.anim, { 
            toValue:fill, 
            duration:1000, 
            easing: 
            Easing.linear 
            }).start();
        }
      }
      render() {
        const fillAnim = this.anim.interpolate({ 
          inputRange:[0, 100], 
          outputRange:['0%', '100%'],
          extrapolate:'clamp'
          });



        return (
          <View style={styles.circle}>
            <Animated.View style={[styles.circleFill,{height:fillAnim}]} />
          </View>
        )
      }
    }

    export default class App extends Component {
      state = {
       text: '25'
      }
      render() {

        const { text } = this.state;
        let fillAsNumber = Math.min(text, 100);
        if (Number.isNaN(fillAsNumber)) fillAsNumber = 0;

        return (
          <View style={styles.container}>
            <CircleFillable fill={fillAsNumber} />
            <Text style={{ marginTop:32 }}>Change fill to:</Text>
            <TextInput onChangeText={text => this.setState({ text })} value={text} style={{ width:64, height:48, textAlign:'center' }}/>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        marginTop: 64
      },
      circle: {
        width: 196,
        height: 196,
        borderRadius: 196 / 2,
        borderWidth: 2,
        borderColor: '#000000',
        overflow: 'hidden'
      },
      circleFill: {
        backgroundColor: 'orange',
        width: '100%',
        bottom: 0,
        position: 'absolute'
      }
    });

Answer 2

我相信这是因为您要为用户输入的每个值设置静态持续时间（2000毫秒）。我认为您必须根据用户输入动态更改它。

我对此if语句添加检查填充值并基于其动态定义持续时间的原始解决方案。

      componentDidUpdate(propsOld) {
    const { fill } = this.props;
    const { fill: fillOld } = propsOld;
    let duration = 0;

    if (fill <= 25) {
      duration = 500;
    } else if (fill > 25 && fill <= 50 ) {
      duration = 1000;
    } else if (fill > 50 && fill <= 75 ) {
      duration = 1500; 
    } else { duration = 2000 }

    if (fill !== fillOld) {
      Animated.timing(this.anim, {
        toValue: fill,
        duration: duration,
        easing: Easing.linear,
      }).start();
    }
  }

在本地反应中平稳地增加高度？

2 个答案: