无法在 react.native 中将持续时间设置为 timeing() 函数

Question

我想在 react native 中制作循环计时器，但我对 timeing(( 函数有问题。这是我的代码：

App.js:
import React from "react";
import { StyleSheet, View } from "react-native";
import Animated, { Easing } from "react-native-reanimated";
import { timing } from "react-native-redash";
import CircularProgress from "./components/CircularProgress";
const { Clock } = Animated;
export default () => {
const clock = new Clock();
const config = {
duration: 10 * 1000,
toValue: 1,
easing: Easing.linear,
};
return (
<View style={styles.container}>
<View style={styles.container1}></View>
<View style={styles.container2}>
<CircularProgress progress={timing(clock, 0, config)}/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#ffba00',
alignItems: 'center',
justifyContent: 'center',
padding: 0
},
container1: {
backgroundColor: 'transparent',
flex: 1
},
container2: {
backgroundColor: '#fff',
flex: 2,
width: '100%',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
alignItems: 'center'
},

这是动画圆圈：

import * as React from "react";
import { Dimensions, StyleSheet } from "react-native";
import Svg, {
Defs, LinearGradient, Stop, Circle,
} from "react-native-svg";
import Animated from "react-native-reanimated";
const { interpolate, multiply } = Animated;
const { width } = Dimensions.get("window");
const size = width / 4 ;
const strokeWidth = 25;
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const { PI } = Math;
const r = (size - strokeWidth) / 2;
const cx = size / 2;
const cy = size / 2;
interface CircularPogressProps {
progress: Animated.Value<number>;
}
export default ({ progress }: CircularPogressProps) => {
const circumference = r * 2 * PI;
const α = interpolate(progress, {
inputRange: [0, 1],
outputRange: [0, PI * 2],
});
const strokeDashoffset = multiply(α, r);
return (
<Svg width={size} height={size} style={styles.container}>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
<Stop offset="0" stopColor="#FEC423" />
<Stop offset="1" stopColor="#ff0000" />
</LinearGradient>
</Defs>
<Circle
stroke="rgb(244, 244, 244)"
fill="none"
{...{
strokeWidth, cx, cy, r,
}}
/>
<AnimatedCircle
stroke="url(#grad)"
fill="none"
strokeDasharray={`${circumference}, ${circumference}`}
{...{
strokeDashoffset, strokeWidth, cx, cy, r,
}}
/>
</Svg>
);
};
const styles = StyleSheet.create({
container: {
transform: [{ rotateZ: "270deg" }],
marginTop: 30,
},
});

除了持续时间之外，一切看起来都很好并且工作正常，我的动画不会持续 10 秒(就像我尝试在配置中设置持续时间：10 * 1000，它只持续大约 500 毫秒。有人知道这里有什么问题吗？

Answer 1

您正在使用react-native-redash库中的函数timing而不是react-native-reanimated.根据文档，timing函数只接受一个参数，而不是三个参数(如react-native-reanimated版本(。试试这个：

<CircularProgress progress={timing({clock, to: 0, easing: Easing.linear, duration: 10000 })}/>