使用React Native动画缩放图像

Question

我对Animated API有两个问题。

第一个问题：我可以使用以下代码从左到右显示图像。 我想将图像从位置 X = 40（leftPadding），Y = 100（topPadding），height：20，width：20 缩放到 X = 20，Y = 10，height：250，width：300。 我该如何实现？

我的代码：

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

class MyTestComp extends Component {
  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
  }
  buttonPress(){
  this.animatedValue.setValue(0);
    Animated.timing(this.animatedValue,{
      toValue:1,
      duration:1000,
      Easing: Easing
    }).start()
  }

  render() {

    const translateX = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [-500, 1]
    })

    const transform = [{translateX}];

    return (
      <View>
        <Text>MyTestComp</Text>
        <Animated.View style={transform}>
        <Image
          source={require('./assets/17.jpg')}
          style={{width:300, height:250}}
        />
        </Animated.View>
        <View style={{marginTop:10}}>
          <Button title="Click Me" onPress={()=> this.buttonPress()} />
        </View>
      </View>
    );
  }
}


export default MyTestComp;

第二个问题：每次运行动画都会出现异常：

我找不到任何关于这方面的文档。如何使用transform属性。

非常感谢。

- Somename

---

如果你在这里发布的代码与你实际使用的完全相同，那么我认为你的问题只是一个语法错误。style={transform} 应该改为 style={{ transform }}。 - Derrick Beining

Answer 1

我想这就是你想要的：

动画实际上非常流畅，在 GIF 中看起来不太好是因为 GIF 的帧率只有每秒 4 帧。以下是代码（由于您的所有数字都是常量，我在下面的代码中将它们全部硬编码）：

import React, { Component } from 'react'
import { Animated, View, TouchableOpacity, Easing,Text} from 'react-native'

const backgroundImage = require('....')

class App extends Component {
    constructor(props) {
        super(props)
        this.animatedValue = new Animated.Value(0)
    }

    handleAnimation = () => {
        Animated.timing(this.animatedValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.ease
        }).start()
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <TouchableOpacity onPress={this.handleAnimation}>
                    <Text>
                       Transform Image
                    </Text>
                </TouchableOpacity>
                <Animated.Image
                    source={backgroundImage}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: 40,
                        top: 100,
                        height: 20,
                        width: 20,
                        transform: [
                            {
                                translateX: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 120]
                                })
                            },
                            {
                                translateY: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 25]
                                })
                            },
                            {
                                scaleX: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [1, 15]
                                })
                            },
                            {
                                scaleY: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [1, 12.5]
                                })
                            }
                        ]
                    }}
                />
            </View>
        )
    }
}

export default App

一些解释：

1. 动画结束后，图像的宽度变为 300，增加了 280 像素，因为图像从中心缩放，所以图像的 x 坐标向左移动了 140px，即 -140 px，我们希望 x 坐标只向左移动 20 px，因此我们应该将其向右移动 120 px，这就是为什么 x 的输出范围是 [0, 120]

2. y 的输出范围也是 [0, 25]，原因与上述相同

3. 与之前相比，宽度现在是 20 的 15 倍

4. 与之前相比，高度现在是 20 的 12.5 倍

- K.Wu

---

如果宽度未定义，我该怎么办？比如说我想让宽度适应整个屏幕，而且我可以从“Dimensions”中找到宽度。但是我该如何计算“ScaleX”的“outputRange”呢？谢谢。 - Somename

我已经让它工作了，使用 ((width-150)/2)-20，其中 width => let width = Dimensions.get('window').width。 - Somename