各位大大帮我一下吧 没思路



  • 本人想写一个动画 比如人有1000个 数字从0变化,类似于这个样,数字递增特效(http://www.jb51.net/article/113034.htm),同时享有一个进度条 跟着数字变化



  • 同学,你的页面404了



  • 效果(不支持Gif上传?):
    0_1517563223540_image.png

    代码:

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Animated,
      Text,
      View
    } from 'react-native';
    
    class _Text extends Component {
      render() {
        return (
          <Text>{Math.floor(this.props.animateValue)}</Text>
        );
      }
    }
    
    const AnimatedText = Animated.createAnimatedComponent(_Text);
    
    export default class App extends Component<{}> {
      constructor(props) {
        super(props);
    
        this.state = {
          count: new Animated.Value(0),
          initCount: 0,
          totalCount: 1000,
        };
      }
    
      componentDidMount() {
        this.animate = Animated.timing(
          this.state.count,
          {
            toValue: this.state.totalCount,
            duration: 5000,
          }
        )
        this.animate.start(() => {
          this.animate = null;
        });
      }
    
      componentWillUnmount() {
        if (this.animate) {
          this.animate.stop();
          this.animate = null;
        }
      }
    
      render() {
        // this.state.count.__getValue()
        const {
          count,
          initCount,
          totalCount,
        } = this.state;
    
        return (
          <View style={styles.container}>
            <AnimatedText animateValue={count} />
            <View style={[styles.progressBar]}>
              <Animated.View
                style={[styles.progressSubBar, {
                  width: count.interpolate({
                    inputRange: [initCount, totalCount],
                    outputRange: ['0%', '100%']
                  }),
                }]}
              />
            </View>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        padding: 20,
        paddingTop: 40,
      },
      progressBar: {
        marginTop: 10,
        height: 10,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: '#cccccc',
        width: 100,
      },
      progressSubBar: {
        height: 10,
        backgroundColor: '#00ff00',
      },
    });
    


  • @HermitCarb 谢谢啊 OK啦



  • @ericzhou2008 额 估计是后面文字也跑链接上去了 不过问题解决了


登录后回复