Как провести рефакторинг ImageBackground с помощью createAnimatedComponent - PullRequest
Новая
       97

Как провести рефакторинг ImageBackground с помощью createAnimatedComponent

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

Я делаю фоновую анимацию на своей главной странице, но мне трудно реорганизовать мой код для использования стилевых компонентов из-за imageStyle, стиля и параметров анимации.

Background/index.js

export default function BackgroundAnimation() {
  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,
          },
        ],
      }}
    />
  );
}

Background/style.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

Я хочу передать эти параметры стилевым компонентам , у кого-то есть идея, как мне это сделать?

Спасибо.

...