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;

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

我做错了什么？我希望按钮在pressIn上转换为.5，在pressOut上转换为1。

Answer 1

您需要使用最新docs

中提到的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()
  }

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

1 个答案: