"Animated.createAnimatedComponent"如何工作？

Question

在Component ProgressBarAndroid中,有一些props indeterminable = {Boolean},它向用户显示它正在发生的动画.我想在ProgressViewIOS上做同样的事情.所以我尝试用Animated来动画它...

我在Animated方法的文档中看到了名为'createAnimatedComponent'的文档,它们用于创建Animated.View

我试图创建另一个动画(本机)组件,但它根本不起作用.动画应逐渐将fillValue提升至20%并继续使用媒体上传的原始值...

这是我的组件

// ProgressBar.ios.js
// @flow
import { PropTypes } from 'react';
import Component from 'components/base/Component';
import { ProgressViewIOS, Animated } from 'react-native';

const AnimatedProgressViewIOS = Animated.createAnimatedComponent(ProgressViewIOS);

class ProgressBarIOS extends Component {

  static propTypes = {
    // Percentage (0 - 100)
    fill: PropTypes.number.isRequired,
  };

  constructor(props, context: any) {
    super(props, context);
    this.state = {
      fillValue: new Animated.Value(props.fill),
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.fill === 0) {
      Animated.timing(this.state.fillValue, { toValue: 0.2, duration: 500 }).start();
    } else if (nextProps.fill > 19) {
      this.state.fillValue.setValue(nextProps.fill / 100);
    }
  }

  shouldComponentUpdate(nextProps) {
    return this.props.fill !== nextProps.fill;
  }

  render() {
    return (
      <AnimatedProgressViewIOS
        style={{ alignSelf: 'stretch' }}
        progress={this.state.fillValue} />
    );
  }

}

export default ProgressBarIOS;

编辑:AnimatedComponent仅用于修改样式.道具可以作为动画值传递但记住它不是数字!

Answer 1

Animated.createAnimatedComponent可以为许多不同的属性设置动画，但是使用本机驱动程序仅支持某些属性，幸运的是它出现progress在ProgressViewIOS其中之一。

这是一个动画的工作实现ProgressViewIOS。

import * as React from 'react';
import { View, SafeAreaView } from 'react-native';
import { ProgressViewIOS, Animated } from 'react-native';

const AnimatedProgressViewIOS = Animated.createAnimatedComponent(
  ProgressViewIOS
);

export default function App() {
  const value = React.useRef(new Animated.Value(0));

  React.useEffect(() => {
    Animated.loop(
      Animated.timing(value.current, {
        duration: 2000,
        toValue: 1,
        useNativeDriver: true,
      })
    ).start();
  }, []);

  return (
    <SafeAreaView>
      <View style={{ padding: 20 }}>
        <AnimatedProgressViewIOS
          style={{ alignSelf: 'stretch' }}
          progress={value.current}
        />
      </View>
    </SafeAreaView>
  );
}

值得注意的是，ProgressViewIOS现在已被弃用，但是构建您自己的进度视图非常简单，只需要两个Views 和像这样的简单样式（expo小吃）：

import * as React from 'react';
import { View, SafeAreaView, StyleSheet, Button, Text } from 'react-native';
import { Animated } from 'react-native';

export default function App() {
  const [progress, setProgress] = React.useState(() => Math.random());

  return (
    <SafeAreaView>
      <View style={{ padding: 20 }}>
        <AnimatedProgressView progress={progress} />
        <Text style={{padding: 20, textAlign: 'center'}}>{Math.round(progress * 100)}%</Text>
        <Button title="Animate" onPress={() => setProgress(Math.random())} />
      </View>
    </SafeAreaView>
  );
}

function AnimatedProgressView({ progress, style }) {
  const value = React.useRef(new Animated.Value(0));
  const [width, setWidth] = React.useState(0);

  React.useEffect(() => {
    Animated.spring(value.current, { toValue: progress }).start();
  }, [progress]);

  return (
    <View
      style={[styles.track, style]}
      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}>
      <Animated.View
        style={[
          styles.fill,
          {
            transform: [
              {
                translateX: value.current.interpolate({
                  inputRange: [0, 1],
                  outputRange: [-width, 0],
                  overflow: 'clamp',
                }),
              },
            ],
          },
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  track: {
    minHeight: 4,
    borderRadius: 2,
    overflow: 'hidden',
    backgroundColor: '#ddd',
  },
  fill: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'blue',
  },
});