Бесконечная анимация в React Native - параметры диапазона - PullRequest
Новая
       69

Бесконечная анимация в React Native - параметры диапазона

0 голосов
/ 01 мая 2020

Я делаю анимацию внизу главной страницы с изображением png. Для этого я создал новый выделенный компонент:

BackgroundAnimation/index.js

  const inicialValue = 0;
  const translateValue = new Animated.Value(inicialValue);

  const translate = () => {
    translateValue.setValue(inicialValue);
    Animated.timing(translateValue, {
      toValue: ANIMATION_TO_VALUE,
      duration: ANIMATION_DURATION,
      easing: Easing.linear,
    }).start(() => translate());
  };

  useEffect(() => {
    translate();
  }, []);

  const translateAnimation = translateValue.interpolate({
    inputRange: [INPUT_RANGE_START, INPUT_RANGE_END],
    outputRange: [OUTPUT_RANGE_START, OUTPUT_RANGE_END],
  });

  const AnimetedImage = Animated.createAnimatedComponent(BackgoundImage);

  return (
    <AnimetedImage
      source={backgroundImage}
      imageStyle={{
        width: '400%',
        height: '400%',
        transform: [
          {
            translateX: -300,
          },
          {
            translateY: -300,
          },
          {
            rotate: '-45deg',
          },
        ],
      }}
      resizeMode="repeat"
      style={{
        zIndex: 10,
        transform: [
          {
            translateX: translateAnimation,
          },
          {
            translateY: translateAnimation,
          },
        ],
      }}
    />
  );

BackgroundAnimation/styles.js

import styled from 'styled-components/native';

export const BackgoundImage = styled.ImageBackground`
  position: absolute;
  top: -100%;
  left: 0;
  flex: 1;
  width: 100%;
  height: 100%;
  opacity: 0.1;
`;

Фоновое изображение

Фоновая анимация - youtube

Мне удалось достичь своей цели, но в коде так много «магических» 1022 * чисел », и теперь я хочу сделать это лучше, но У меня был небольшой опыт в React Native, и это моя первая анимация, у кого-нибудь есть какие-либо советы, чтобы сделать лучше? Как я могу рассчитать начало и конец диапазона анимации ??

Спасибо.

...