0
C'est la première fois que j'anime avec la bibliothèque animée de Réaction native. Est-il possible d'animer au centre de l'écran? Si oui, comment puis-je faire cela?Expansion de la boîte de dialogue Animate au centre de l'écran (React Native Animated)
Ceci est mon code ci-dessous: J'ai essentiellement eu une boîte de 60x60 sur le coin supérieur gauche de mon écran pour descendre 1/2 de l'écran et plus de la moitié de la largeur. Je veux qu'il s'étende horizontalement d'environ 150 px. Le problème est que la boîte ne se développe pas au centre de l'écran
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
View,
Animated,
Dimensions,
Easing
} from 'react-native';
const {width,height} = Dimensions.get('window')
export default class App extends Component {
constructor(){
super()
this.state = {
width: new Animated.Value(60),//Animated.Value/ValueXY used to hook up animation attributes, also for single values
height: new Animated.Value(60),
animateXY : new Animated.ValueXY({x:0,y:0})//for vectors
}
}
componentWillMount(){
//called when an instance of a component is being created and inserted into the DOM
Animated.sequence([
//function where we add the ending results
Animated.timing(
this.state.animateXY,
{
toValue: {x:0, y:height/2},
duration: 2000
}),
Animated.timing(
this.state.animateXY,
{
toValue: {x:width/2, y:height/2},
duration: 2000,
}),
Animated.timing(
this.state.width,
{
toValue: 150,
duration: 3000
}),
]).start()
}
render() {
return (
<View>
<Animated.View
style={
{
width: this.state.width,
height:this.state.height,
backgroundColor:"teal",
position:'absolute',
top: this.state.animateXY.y,
left: this.state.animateXY.x,
}
}
/>
</View>
);
}
}
Tout conseil fera! Je vous remercie! Jemma