Question

使用React-native复活的包。我对动画的想法采用SVG路径，并在完全重复相同的操作后从0位置获取其长度并设置动画长度。当应用重新打开或重新启动时，它可以正常工作。但是当我刷新代码时，它会减慢动画的速度并且在经过如此多的刷新后不进行动画处理。我不知道我在哪里错了。

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Animated,{useAnimatedProps,useSharedValue,withTiming, Easing, repeat} 
  from 'react-native-reanimated';
import Svg,{Path} from 'react-native-svg';


const InfinityLoader = (props) => {

  const AnimatedPath = Animated.createAnimatedComponent(Path);
  const aniRef = React.useRef(null);
  const time = useSharedValue(0);
  const animatedProps = useAnimatedProps(()=>({
    strokeDashoffset: repeat(withTiming(time.value, { duration: 1500, easing: Easing.linear }),-5,false),
  }))
  React.useEffect(()=>{
    time.value = aniRef.current.getTotalLength();
    return () => {
      time.value = 0;
    }
  });
  return (
    <View style={styles.container}>
      <Svg height="50" width="100" viewBox="0 0 100 100">
      <AnimatedPath
        animatedProps={animatedProps}
        ref={aniRef}
        fill="none"
        stroke="#e90c59"
        strokeWidth="10"
          strokeDasharray="189.87580688476564 66.71312133789061"
        d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 
20C56.4 70 43.6 30 24.3 30z"
        strokeLinecap="round"
        strokeDashoffset="400"
      />
      </Svg>
    </View>
  )
}

export default InfinityLoader

const styles = StyleSheet.create({
  container: { 
    backgroundColor: '#1234' ,
    width: 'auto',
    height: 40,
    alignItems: "center",
    justifyContent: "center"
  }
})

在以下链接中查看我的屏幕录制GIF图片 screen after app restarts

after refreshing the code

使用本机复活动画制作动画无法正常工作

0 个答案: