Question

我的应用有一个启动页面，可在屏幕中央显示图像。我正在使用动画，所以我可以将屏幕移动到屏幕顶部。出于某种原因，我无法让它发挥作用。现在我设法用图像制作一个反弹动画。这是我使用的代码：

＆＃13;

'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;

＆＃13;

如果有人知道我要改变什么来将图像从x，y移动到newX，newY而不是反弹动画我会非常感激。感谢。

Answer 1

你应该用这个：

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

在构造函数中。并使用此：

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

在style属性中。然后使用Animated（spring，decay，timing）或moveAnim.setValue（x：value_x，y：value_y）更改moveAnim，例如，从panResponder回调中更改。

如何使用动画进行转换和图像反应原生

1 个答案: