How to transform and image using animated in react native

reactjs react-native

1157 просмотра

1 ответ

113 Репутация автора

My app has a splashpage that shows an image in the center of the screen. I'm using animated so i can move my screen to the top of the screen. For some reason i can't manage to get it working. For now i managed to make a bounce animation with the image. Here is the code i used:

'use strict';

import React, { Component } from 'react';
import {
	View,
	Text,
	Image,
	StyleSheet,
	Animated
} from 'react-native';


class SplashPage extends Component {
	
  constructor(props) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }	
	
  componentWillMount() {
    var navigator = this.props.navigator;
    setTimeout(() => {
      navigator.replace({
        id: 'LoginPage',
      });
    }, 1000);
  }
  
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#FFFFFF', alignItems: 'center', justifyContent: 'center'}}>
		<Animated.Image
			source={require('./img/logo.png')}
			style={[styles.thumbnail,{transform: [{scale: this.state.bounceValue}]}]}
		/>
      </View>
    );
  }
  
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // Start large
    Animated.spring(                          // Base: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0.8,                         // Animate to smaller size
        friction: 1,                          // Bouncier spring
      }
    ).start();                                // Start the animation
  }  
  
}

const styles = StyleSheet.create({
  thumbnail: {
    width: 270,
    height: 59,
  },
});

module.exports = SplashPage;

If someone knows what i have to change to move the image from an x,y to a newX,newY instead of the bounce animation i will be so gratefull. Thanks.

Автор: user2849167 Источник Размещён: 19.07.2016 08:42

Ответы (1)


0 плюса

421 Репутация автора

You should use this:

this.state = {
   moveAnim: newAnimated.ValueXY()
}

in the constructor. And use this:

 transform: [{
    translateX: moveAnim.x
 }, {
    translateY: moveAnim.y
 }]

in style property. And then change your moveAnim with Animated (spring, decay, timing) or moveAnim.setValue(x: value_x, y: value_y), for example, from panResponder callbacks.

Автор: elf2707 Размещён: 24.08.2016 03:24
Вопросы из категории :
32x32