javascript - "Animated.createAnimatedComponent"是如何工作的？

Question

在组件 ProgressBarAndroid 中，有一些 Prop indeterminable={Boolean} 向用户显示正在发生的事情的动画。我想在 ProgressViewIOS 上做几乎相同的事情。所以我试着用Animated来制作它...

我在名为“createAnimatedComponent”的动画方法的文档中看到，他们使用它来创建 Animated.View

我试图创建另一个动画( native )组件，但它根本不起作用。
动画应逐渐将 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 仅用于修改样式。 Prop 可以作为动画值传递，但请记住它不是数字!

Answer 1

Animated.createAnimatedComponent可以为许多不同的属性设置动画，但是使用 native 驱动程序只支持一些属性，幸运的是它出现了 progress在 ProgressViewIOS是其中之一。
这是 working implementation动画 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现在已弃用，但构建自己的进度 View 非常简单，只需要两个 View s 具有像这样的简单样式( expo snack ):

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',
  },
});