Question

尝试使用react native的动画库生成wave动画。当我将useNativeDriver设置为false时，它正在工作，但是它有滞后。但是，当我将其设置为true时，会出现错误

“尝试通过先使用'useNativeDriver：true'启动动画，在已移至“本地”的动画节点上运行JS驱动的动画。

如何解决此问题，使动画流畅运行？

import React, { useState, useEffect } from 'react';
import { Animated, View, StyleSheet } from 'react-native';

export default WaveAnimation = React.memo(() => {

  const [animatedValue, setAnimatedValue] = useState(new Animated.Value(0))
  const [opacityA, setOpacityA] = useState(new Animated.Value(0.3))
  const [animatedValue1, setAnimatedValue1] = useState(new Animated.Value(0))
  const [opacityB, setOpacityB] = useState(new Animated.Value(0.3))
  const [animatedValue2, setAnimatedValue2] = useState(new Animated.Value(0))
  const [opacityC, setOpacityC] = useState(new Animated.Value(0.3))
  const [animatedValue3, setAnimatedValue3] = useState(new Animated.Value(0))
  const [opacityD, setOpacityD] = useState(new Animated.Value(0.3))

  const AnimationTime = 4000;

  const animateWave = () => {
    Animated.stagger(1000, [
      Animated.loop(
        Animated.parallel([
          Animated.timing(animatedValue1, {
            toValue: 1,
            duration: AnimationTime,
            useNativeDriver: false
          }),
          Animated.timing(opacityB, {
            toValue: 0,
            duration: AnimationTime,
            useNativeDriver: false
          }),
        ])
      ),
      Animated.loop(
        Animated.parallel([
          Animated.timing(animatedValue, {
            toValue: 1,
            duration: AnimationTime,
            useNativeDriver: false
          }),
          Animated.timing(opacityA, {
            toValue: 0,
            duration: AnimationTime,
            useNativeDriver: false
          }),
        ])
      ),
      Animated.loop(
        Animated.parallel([
          Animated.timing(animatedValue2, {
            toValue: 1,
            duration: AnimationTime,
            useNativeDriver: false
          }),
          Animated.timing(opacityC, {
            toValue: 0,
            duration: AnimationTime,
            useNativeDriver: false
          }),
        ])
      ),
      Animated.loop(
        Animated.parallel([
          Animated.timing(animatedValue3, {
            toValue: 1,
            duration: AnimationTime,
            useNativeDriver: false
          }),
          Animated.timing(opacityD, {
            toValue: 0,
            duration: AnimationTime,
            useNativeDriver: false
          }),
        ])
      ),
    ]).start()
  }

  useEffect(() => {
    animateWave()
  }, [])

  return (
    <>
      <View style={{ width: 400, height: 400 }}>
        <Animated.View
          style={[styles.waveStyle, {
            opacity: opacityA,
            transform: [
              { scale: animatedValue },
            ]
          }]}
        />
        <Animated.View
          style={[styles.waveStyle, {
            opacity: opacityB,
            transform: [
              { scale: animatedValue1 },
            ]
          }]}
        />
        <Animated.View
          style={[styles.waveStyle, {
            opacity: opacityC,
            transform: [
              { scale: animatedValue2 },
            ]
          }]}
        />
        <Animated.View
          style={[styles.waveStyle, {
            opacity: opacityD,
            transform: [
              { scale: animatedValue3 },
            ]
          }]}
        />
      </View>
    </>
  )
})

const styles = StyleSheet.create({
  waveStyle: { borderRadius: 200, width: 400, height: 400, backgroundColor: '#000', position: 'absolute', zIndex: 9999999, alignItems: 'center', justifyContent: 'center', }
})

Answer 1

本机仅支持某些值，例如transform，opacity等。对于不支持的值，动画由JS桥驱动，这会阻塞JS线程。因此，也许您同时运行过多的js动画，和/或同时运行其他阻塞代码。只需尝试不使动画过载，并且不要同时发送请求或其他内容即可。

使用useNativeDriver时通过错误反应本机动画：真是为什么？

1 个答案: