React Native Анимированный для масштабирования изображения

Question

У меня 2 проблемы с Animated API.

1-й: Я могу показать изображение слева направо со следующим кодом. Я хочу масштабировать изображение с позиции 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;

2-й: Каждый раз, когда я запускаю анимацию, я получаю исключение:

Я не могу найти никакой документации по этому вопросу. Как использовать transform prop.

Большое спасибо.

Answer 1

Я думаю, это то, что вы хотите:

Анимация на самом деле очень плавная, не выглядит так в GIF, потому что GIF равен 4 кадрам в секунду. Вот код (поскольку все ваши числа являются константами, я просто жестко запрограммировал их все в следующем коде):

import React, { Component } from 'react'
import { Animated, View, TouchableOpacity, Easing } 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</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 изображения смещена влево 140 px или -140 px, и мы хотим, чтобы координата x смещалась влево только 20 px, следовательно, мы должны сместить вправо 120 px, поэтому выходной диапазон x равен [0, 120]

2. Та же причина, по которой выходной диапазон у равен [0, 25]

3. ширина теперь 300 по сравнению с предыдущим 20, что в 15 раз больше

4. высота теперь 250 по сравнению с предыдущим 20, что в 1040 * раз больше