使用react-native-reanimated创建循环

Question

我正在尝试使用钩子和react导航5- No类在应用程序中创建一个闪烁的函数。"react-native-reanimated“对我来说是新的。我更熟悉动画，所以这就是为什么我需要一些帮助。谢谢!

import React, { useState, useEffect, Component, useCallback } from "react";
import {
  StyleSheet,
  Text,
  View
} from "react-native";
import Animated, { Easing } from "react-native-reanimated";
import { loop } from "react-native-redash";


function BlinkIt(props){
     const [fadeAnim] = useState(new Animated.Value(0));
      useEffect(() => {
        Animated.set(
         fadeAnim,
          loop({
            duration: 5000,
            autoStart: true,
            boomerang: true
          })
        )
      }, []);
      return (
    <Animated.View // Special animatable View
      style={{
        ...props.style,
        opacity: fadeAnim
      }}
    >
      {props.children}
    </Animated.View>
      );
}


export default function App() {
    return (
      <View style={styles.container}> <BlinkIt><Text>The text is blinking</Text></BlinkIt></View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },

});

Answer 1

我制作了一个关于如何使用react-native-reanimated https://youtu.be/W82p3WfwxrA创建循环动画的视频教程。或检查下面列出的代码

import React, {useMemo, useState, useEffect} from 'react';
import {
  TouchableWithoutFeedback,
  Image,
  StyleSheet,
  Dimensions,
} from 'react-native';
import Animated, { Easing, stopClock } from 'react-native-reanimated';

const imageSize = {
  width: 256,
  height: 256,
};

const screenWidth = Dimensions.get('window').width;
const animatedWidth = screenWidth + imageSize.width;

const {
  useCode,
  block,
  set,
  Value,
  Clock,
  eq,
  clockRunning,
  not,
  cond,
  startClock,
  timing,
  interpolate,
  and,
} = Animated;

const runTiming = (clock) => {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 5000,
    toValue: 1,
    easing: Easing.inOut(Easing.linear),
  };

  return block([
    // we run the step here that is going to update position
    cond(
      not(clockRunning(clock)),
      set(state.time, 0),
      timing(clock, state, config),
    ),
    cond(eq(state.finished, 1), [
      set(state.finished, 0),
      set(state.position, 0),
      set(state.frameTime, 0),
      set(state.time, 0),
    ]),
    state.position,
  ]);
}

export const AnimatedBackground = () => {
  const [play, setPlay] = useState(false);
  const {progress, clock, isPlaying} = useMemo(
    () => ({
      progress: new Value(0),
      isPlaying: new Value(0),
      clock: new Clock(),
    }),
    [],
  );

  useEffect(() => {
    isPlaying.setValue(play ? 1 : 0);
  }, [play, isPlaying]);

  useCode(
    () =>
      block([
        cond(and(not(clockRunning(clock)), eq(isPlaying, 1)), startClock(clock)),
        cond(and(clockRunning(clock), eq(isPlaying, 0)), stopClock(clock)),
        set(progress, runTiming(clock)),
      ]),
    [progress, clock],
  );

  return (
    <TouchableWithoutFeedback
      style={styles.container}
      onPress={() => setPlay(!play)}
    >
      <Animated.View style={[styles.image, { opacity: progress }]}>
        <Image
          style={styles.image}
          source={require('./cloud.png')}
          resizeMode="repeat"
        />
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    width: animatedWidth,
    height: '100%',
  },
});