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 (将#修改为@）