reactjs - React Native reanimated v2 Scale + Opacity withRepeat
问题描述
我正在尝试通过React native reanimated v2实现缩放 View with Opacity togather ,但无法控制 withRepeat ...
下面的代码只是使用重复而不是不透明度执行缩放。如何使用Repeat控制视图的不透明度+缩放...想要在循环/重复视图中应用缩放和不透明度。
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, -1, 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;
样式.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,
},
};
解决方案
推荐阅读
- ios - Firebase DynamicLinks handleUniversalLink 始终返回 false
- javascript - R Shiny – 使用 CSS 滚动时让 wellPanel 弹出窗口跟随
- macos - Catalyst - 如何为电子邮件设置 BccRecipients?
- cookies - MalformedCookieException:无效的“过期”属性
- php - Symfony 仅在 Amazon Web Service 中无法找到模板“”错误
- swagger - 如何在 swagger nestjs 中手动添加摘要和正文
- encryption - 使用 Arduino 加密文件
- python - 为什么 .loc() 函数返回一个空系列?
- ios - 如何反转 UIView 或图层下方的所有视图颜色?
- python - 大熊猫的不同天数