如何解决React Native 重生 v2 Scale + Opacity withRepeat
我正在尝试通过 React native reanimated v2 实现带有不透明度的缩放视图,但无法控制重复 ...
下面的代码只是使用重复而不是不透明度执行缩放。如何使用重复控制视图的不透明度 + 缩放...想要在循环/重复中的视图上应用缩放和不透明度。
import React,{ useState } from 'react';
import { View,TouchableWithoutFeedback } from 'react-native';
import Animated,{ withRepeat,useSharedValue,interpolate,useAnimatedStyle,useDerivedValue,withTiming }
from 'react-native-reanimated'
import Styles from './Styles';
function LoopApp() {
const [state,setState] = useState(0);
const scaleAnimation = useSharedValue(1);
const animationopacityView = useSharedValue(1);
scaleAnimation.value = withRepeat(withTiming(2.5,{ duration: 2000 }),-1,true);
//animationopacityView.value = withRepeat(0,true);
const debug = useDerivedValue(() => {
// console.log(scaleAnimation.value);
return scaleAnimation.value;
});
const growingViewStyle = useAnimatedStyle(() => {
return {
transform: [{ scale: scaleAnimation.value }],opacity: withTiming(animationopacityView.value,{
duration: 1500
},() => {
animationopacityView.value = 0.99
})
};
});
return (
<View style={Styles.container}>
<Animated.View style={[Styles.viewStyle,growingViewStyle]} />
</View>
);
}
export default LoopApp;
Style.js
import {DevSettings,Dimensions,I18nManager} from 'react-native';
import Constants from '../../common/Constants';
const Screen = {
width: Dimensions.get('window').width,height: Dimensions.get('window').height,};
export default {
container: {
flex: 1,justifyContent: "center",alignItems: "center",},viewStyle: {
backgroundColor: '#19a35c',width: Screen.width * 0.0364,height: Screen.width * 0.0364,borderRadius: 100,};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。