无法在 React Native 中执行转换动画

Question

无法使 Animated 工作。我在容器中添加按钮样式和 Animated.View 。因此，当我 pressIn 我希望 Animated.View 缩小到 .5 并且在 pressOut 时希望它回到 1。我将 this.animatedValue = new Animated.Value(1) 设置为 componentWillMount 本身。我的代码如下：

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

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

我做错了什么？我希望按钮在 pressIn 时转换为 0.5 大小，在 pressOut 时变回 1 大小。

Answer 1

您需要使用 toValue 而不是最新 docs

中提到的 to

Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.

也如他们的 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()
  }

无法在 React Native 中执行转换动画

Unable to do the transform animation in React Native

reactjs

react-native

react-animated