React Native 单击后将重新动画的值设置回原始值

bjp0bcyl  于 2023-08-07  发布在  React
关注(0)|答案(1)|浏览(133)

我做了一些可重用的动画代码。它工作得很好,但我不确定是否有可能让动画回到原来的值后,一个按钮很容易按下。
我能想到的唯一方法是使用useShared Values来存储所有的前后值,并根据需要设置它们,但这将涉及很多值,但因为动画已经运行,必须有一种方法,只是把它们带回到原来的开始?
我用于动画的代码是:-
EntryAnimation.js

import React, { useEffect } from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  useDerivedValue,
  interpolate,
  withDelay,
  withTiming,
  withSpring,  
  Easing,
} from 'react-native-reanimated';

export const EntryAnimation = ({
  children,
  index,  
  rotateV, 
  scaleV,
  offsetXV, 
  offsetYX,
}) => { 
  const play = useSharedValue(play);
  const progress = useDerivedValue(() => {
    return play.value 
      ? withDelay(50 * (index ?? 0), withSpring(1, { duration: 350 }))  
      : 0; 
  });
  
  useEffect(() => { 
    play.value = play;
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    // const opacity = interpolate(progress.value, [0, 1], [0, 1]);
    const translateY = interpolate(progress.value, [0, 1], [0, offsetYX]);
    const translateX = interpolate(progress.value, [0, 1], [0, offsetXV]);
    const rotate = interpolate(progress.value, [0, 1], [0, rotateV]);
    const scale = interpolate(progress.value, [0, 1], [1, scaleV]);

    return {
      transform: [{ translateY }, { translateX }, { rotate }, { scale }],
    };
  });

  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
};

字符串
为了在主代码中使用元素,我用途:

<EntryAnimation
                  index={1}
                  rotateV={0}
                  scaleV={0.8}
                  offsetXV={0}
                  offsetYX={-270}>
                  <Animated.Image
                    source={{ uri: item.poster }}
                    style={[styles.posterImage, { zIndex: 6 }]}
                  />
                </EntryAnimation>


我试过使用下面的代码,但因为它在三元语句中,我得到了错误?

{animStarted ? (
      <EntryAnimation
                      index={1}
                      rotateV={0}
                      scaleV={0.8}
                      offsetXV={0}
                      offsetYX={-270}
                      >
      ) : (
        <EntryAnimation
                      index={1}
                      rotateV={0}
                      scaleV={1}
                      offsetXV={0}
                      offsetYX={0}
                      >
      )}


有什么想法吗

twh00eeo

twh00eeo1#

您可以使用withSequence简单地处理此行为,这样您就可以重置样式。
考虑到您的代码,它可能是这样的:

const translateX = useDerivedValue(() =>  {
      return withSequence(
       withTiming(-offsetXV, { duration: 350 }), // here the animation will start translating the view negatively
       withRepeat(withTiming(offsetXV, { duration: 350 }), 4, true), // here translateX will be reset to offsetXV and then it will be back to -offsetXV 4 times
       withTiming(0 ,{duration: 0 }) // and this is the function that will reset translateX to 0
     );
    });

字符串
基本上,此功能的工作原理如下:* 考虑offsetXV值为50*
第一个序列withTiming(-offsetXV, { duration: 350 })translateX在350 ms之后将是**-50**
第二序列withRepeat(withTiming(offsetXV, { duration: 350 }), 4, true)x 1 m4n1x将从**-50递增到50**,然后递减到**-50四次
最后一个序列withTiming(0 ,{duration: 0 }),该序列将translateX重置为
0**
而这一点也适用于其他任何风格

相关问题