我用react-native的animated API创建了一个加载动画，并在其他页面上导航，这些页面是从第三个库执行完成的。
现在，当逻辑代码运行时加载动画停止，逻辑代码完成后加载重新启动，因为我注解了一段从一个页面导航到另一个页面的代码。
如何优化动画的性能？
1.我不能编辑来自第三库的块代码。
1.我使用useNativeDriver来支持原生驱动程序。
1.没有lottie动画支持，它似乎工作得很好。
1.块逻辑代码和动画同时执行。

import EStyleSheet from "react-native-extended-stylesheet";
import LoadingStyles from '../../styles/loading.component'
import { View, Animated } from 'react-native'
import { useState, useRef, useEffect } from 'react'
import Svg, { Circle } from 'react-native-svg'
const CircleAnimateClip = Animated.createAnimatedComponent(Circle)
export default function Loading() {
  const animationRef = useRef({
    strokeDashoffset: new Animated.Value(240),
    rotateZ: new Animated.Value(1)
  })
  useEffect(() => {
    const animationDef = () => {
      Animated.loop(
        Animated.sequence([
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 240,
                useNativeDriver: true,
                isInteraction: false,
                duration: 900
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 2,
                useNativeDriver: true,
                isInteraction: false,
                duration: 900
              }
            ),
          ]),
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 200,
                useNativeDriver: true,
                isInteraction: false,
                duration: 100
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 3,
                useNativeDriver: true,
                isInteraction: false,
                duration: 100
              }
            ),
          ]),
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 200,
                useNativeDriver: true,
                isInteraction: false,
                duration: 900
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 4,
                useNativeDriver: true,
                isInteraction: false,
                duration: 900
              }
            ),
          ]),
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 240,
                useNativeDriver: true,
                isInteraction: false,
                duration: 100
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 5,
                useNativeDriver: true,
                isInteraction: false,
                duration: 100
              }
            ),
          ])
        ])
      ).start()
    }
    animationDef()
  }, [animationRef])
  const rotateZ = animationRef.current.rotateZ.interpolate({
    inputRange: [1, 2, 3, 4, 5],
    outputRange: ['-100deg', '-424deg', '-500deg', '-784deg', '-820deg'],
  })
  return (
    <Animated.View style={[LoadingStyles.wrap, { transform: [{ rotate: rotateZ }] }]}>
      <Svg style={LoadingStyles.circleBox}>
        <Circle
          cx="50%"
          cy="50%"
          r="45%"
          strokeWidth="5"
          stroke="#f3f3f3"
          fill="none"
        ></Circle>
        <CircleAnimateClip
          cx="50%"
          cy="50%"
          r="45%"
          strokeWidth="5"
          strokeDasharray={2 * Math.PI * 60}
          strokeDashoffset={animationRef.current.strokeDashoffset as unknown as string}
          stroke={EStyleSheet.value('$primaryColor')}
          fill="none"
        ></CircleAnimateClip>
      </Svg>
    </Animated.View>
  )
}

字符串