3

我正在尝试通过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,
  },
};
4

0 回答 0