reactjs - 无法在 React Native 中进行变换动画

Question

无法Animated上班。我正在添加一个按钮样式并Animated.View在容器中。所以当我pressIn想要Animated.View缩小到 0.5 并且pressOut想要它回到 1 时。我设置了this.animatedValue = new Animated.Value(1)oncomponentWillMount本身。我的代码如下：

'use strict';

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

class MyAnim extends Component {
    constructor(props) {
      super(props);
      this.state = {};
      this.handlePressIn = this.handlePressIn.bind(this);
      this.handlePressOut = this.handlePressOut.bind(this);
    }

  componentWillMount() {
    this.animatedValue = new Animated.Value(1);
  }

  handlePressIn() {
    Animated.spring(this.animatedValue,{
        to: .5
    }).start()
  }
  handlePressOut() {
    Animated.spring(this.animatedValue,{
        to: 1,
        friction: 3,
        tension: 40
    }).start()
  }

  render() {
    const animatedStyle = {
        transform: [{ scale: this.animatedValue }]
    }
    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback
          onPressIn={this.handlePressIn}
          onPressOut={this.handlePressOut}
        >
          <Animated.View style={[styles.button, animatedStyle]}>
            <Text style={styles.buttonText}>Press Me</Text>
          </Animated.View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1, justifyContent:'center', alignItems:'center'
  },
  button:{
    backgroundColor:'#333', width:100, height:50, marginBottom:10,
    justifyContent:'center', alignItems:'center'
  },
  buttonText:{
    color:'#fff'
  },
});

export default MyAnim;

我正在尝试一个简单的弹簧动画。错误是：

我究竟做错了什么？我希望按钮在 pressIn 上转换为 0.5，在 pressOut 上转换回 1。

Answer 1

您需要使用toValue而不是最新文档to中提到的

跟踪速度状态以在toValue更新时创建流体运动，并且可以链接在一起。

也如他们的SpringAnimation.js配置中所述

 toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,

handlePressIn() {
        Animated.spring(this.animatedValue,{
            toValue: .5
        }).start()
    }

handlePressOut() {
    Animated.spring(this.animatedValue,{
        toValue: 1,
        friction: 3,
        tension: 40
    }).start()
  }