React-Native оживляет один предмет и отдыхает одновременно - PullRequest
Новая
       14

React-Native оживляет один предмет и отдыхает одновременно

0 голосов
/ 20 сентября 2018

Я получаю предметы с плоским списком и рендеринг каждого из них для анимации.Я хочу анимировать один, и я хочу, чтобы все остальные элементы исчезли .. Но я не могу этого сделать, кто-нибудь может показать мне пример об этом? 

 <FlatList
    numColumns={2}
    initialNumToRender={20}
    contentContainerStyle={{
    justifyContent: 'space-between',
    margin: SCREEN_WIDTH/40,
    width: '100%'}}
    data={this.state.news}
    renderItem={({item, index}) => <VideoAnimation item={item} index={index}/>}
    keyExtractor={this._keyExtractor}/>

В VideoAnimation: 

const pic = {
            margin: SCREEN_WIDTH/35,
            width: this.state.width,
            height: this.state.height,
            opacity: this.state.opacity
        };

        const show ={
            opacity: this.state.opacity
        };

  return (
      <Animated.View style={show}>
       <TouchableOpacity onPress={this.captureAnimation.bind(this)}>
       <Text style={{textAlign: 'center', fontSize: SCREEN_WIDTH / 30}}> {item.title} </Text>
       <AnimatedImage source={{uri: 'http://' + item.picture_path}} style={pic} resizeMode="contain"/>
        </TouchableOpacity>
      </Animated.View>
            );

Функция захвата анимации: 

captureAnimation(){

        Animated.parallel([
            Animated.timing(this.state.width,{
                toValue: SCREEN_WIDTH/1.2,
                duration: 750
            }),
            Animated.timing(this.state.height,{
                toValue: SCREEN_HEIGHT/1.2,
                duration: 750
            }),
            Animated.timing(this.state.opacity,{
                toValue: 0,
                duration: 750
            }),
        ]).start(() => this.showVideo());


    };

showVideo(){
        this.setState({
            video: 1,
            show: false,
            width: new Animated.Value(SCREEN_WIDTH/3),
            height: new Animated.Value(SCREEN_WIDTH/3),
            opacity: new Animated.Value(1)
        })
    }

после вызова showVideo анимируется только нажатый элемент. Как можно также анимировать все остальные элементы?

1 Ответ

0 голосов
/ 20 сентября 2018

Редактировать: вам также нужно убедиться, что у вас есть анимируемый FlatList.

В React Native 0.57.0 вы можете просто использовать Animated.FlatList.Ниже RN 0,57 вы можете сделать это: 

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

В вашем конструкторе: 

constructor(props) {
  super(props)
  this.state = {
    //you only need this one
    scale: new Animated.Value(0),

  }
}

изменить свой стиль pic: 

const pic = {
  margin: SCREEN_WIDTH/35,
  width: SCREEN_WIDTH/3,
  height: SCREEN_HEIGHT/3,
  transform: [{ scale: this.state.scale }],
  opacity: this.state.scale
};

и ваш show style: 

const show ={
  opacity: this.state.scale
};

Так как масштаб начинается с 0, у элемента будет высота 0. Если вы анимируете scale к 1, то он будет иметь ширину SCREEN_WIDTH/3 и высотуSCREEN_HEIGHT/3

Теперь ваша анимация просто: 

Animated.timing(
  this.state.scale,
  { toValue: 1, duration: 750 }
).start()

Теперь любые компоненты с этими стилями будут анимированы.Если вы хотите, чтобы они анимировались в поле зрения, вам, вероятно, следует вызвать анимацию в componentDidMount

. Вы также можете изменить значения this.state.scale, чтобы подогнать другие анимации через interpolation.Например, если вы хотите скрыть компонент во время анимации, вы можете создать стиль: 

const hide = {
  opacity: this.state.scale.interpolate({ inputRange: [0,1], outputRange: [1,0]})
}
...