React Native Animated для масштабирования изображения
У меня 2 проблемы с API Animated.
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.
Большое спасибо.
Ответы 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
Некоторое объяснение:
После анимации ширина изображения становится
300, что на280пикселей больше, так как изображение увеличивается от центра, поэтому координата x изображения сдвинута влево140px или-140px, и мы хотим, чтобы координата x сдвигалась только влево20px, следовательно, мы должны сдвинуть его вправо120px, поэтому диапазон вывода x равен[0, 120]По той же причине, почему диапазон вывода y равен
[0, 25]ширина теперь
300по сравнению с предыдущим20, который в15раз большевысота теперь
250по сравнению с предыдущим20, который в12.5раз больше
Что мне делать в случае неопределенной ширины? Скажем, я хочу, чтобы ширина соответствовала всему экрану, и я могу найти ширину из Dimensions. Но как мне рассчитать outputRange для ScaleX? Спасибо.
Я получил, что работал, использовал ((width-150)/2)-20, где ширина => let width = Dimensions.get('window').width
Если ваш код был идентичен тому, что вы разместили здесь, то я думаю, что ваша проблема была просто синтаксической ошибкой.
style = {transform}должен был бытьstyle = {{ transform }}.