react native中的上下滑动动画答案

【问题标题】：Slide up down animation in the react nativereact native中的上下滑动动画
【发布时间】：2021-01-07 07:17:22
【问题描述】：

我在 react native 中使用上下动画，但是动画只是从上到下滑动然后停在底部我想连续上下移动它。我也使用了动画循环，所以请检查并为我提供解决方案

import React, { useEffect, useState } from 'react'
import { Text, View, Animated, Easing, StyleSheet } from 'react-native'
import LoaderLogo from '../../icons/commonicons/LoaderLogo'
import { Loadericon } from '../../constants/Image';
import LinearGradient from 'react-native-linear-gradient';
import { dynamicSize } from '../sizechoose';

const amimationScreen = () => {
    const startValue = new Animated.Value(0);
    const endValue = dynamicSize(225);

    const startValue2 = new Animated.Value(225);
    const endValue2 = dynamicSize(0);
    const duration = 5000;

    useEffect(() => {

        Animated.sequence([
            Animated.timing(startValue, {
                toValue: endValue,
                duration: duration,
                useNativeDriver: true,
            }),
            Animated.timing(startValue2, {
                toValue: endValue2,
                duration: duration,
                useNativeDriver: true,
            })
        ]).start()

    }, [startValue, endValue, duration]);

    return (
        <Animated.View style={[{ transform: [{ translateY: startValue }] }]}>
       <View style={{backgroundColor:'red',height:10,width:100}}>
            </View>
        </Animated.View>
    )
}


export default amimationScreen

我也尝试使用 react-native-animatable 包，但它不适合我，因为它从屏幕顶部开始动画。

【问题讨论】：

标签： react-native animation react-animated react-native-animatable

【解决方案1】：

这对我有用：

const App = () => {
  const animated = new Animated.Value(0);
  const duration = 5000;

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(animated, {
          toValue: 255,
          duration: duration,
          useNativeDriver: true,
        }),
        Animated.timing(animated, {
          toValue: 0,
          duration: duration,
          useNativeDriver: true,
        }),
      ]),
    ).start();
  }, []);

  return (
    <Animated.View style={[{transform: [{translateY: animated}]}]}>
      <View style={{backgroundColor: 'red', height: 10, width: 100}}></View>
    </Animated.View>
  );
};

因此，不要让两个Animated.Value 实例进行翻译，而是创建一个并让它依次从0 转换为255 并从255 转换回0。并在序列完成后使其循环。

我认为您原始方法的主要问题是startValue 决定视图的转换方式，因为这是您作为translateY 的值传递的。因此，向下动画在您的示例中正确发生。然而，向上的动画不会发生，因为 startValue2 被传递给 Animated.timing 并且 startValue 在您的示例中的任何视图的翻译中都没有使用。

【讨论】：

太好了，非常感谢。

【解决方案2】：

import React, { useEffect, useRef, useState } from 'react';
import { Animated, Dimensions, Easing, StyleSheet, View } from 'react-native';


export const App = () => {
    const animatedValue = useRef(new Animated.Value(0)).current;
    const [isTop, setIsTop] = useState(true);

    const startAnimation = toValue => {
        Animated.timing(animatedValue, {
            toValue,
            duration: 1000,
            easing: Easing.linear,
            useNativeDriver: true
        }).start(() => {
            setIsTop(!isTop);
        })
    }

    useEffect(() => {
        startAnimation(isTop ? 1 : 0);
    }, [isTop]);

    const translateY = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, Dimensions.get('window').height - 70],
        extrapolate: 'clamp'
    })

    return (
        <View style={styles.container}>
            <Animated.View style={[styles.square, { transform: [{ translateY }] }]}>

            </Animated.View>
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    square: {
        width: 70,
        height: 70,
        backgroundColor: 'red'
    }
});

【讨论】：