J'apprends des API d'animation et de panrage dans Reageler Natif. Suivant Glisser et goutte d'animation avec réact de natif et de source
Je veux prolonger l'exemple de sorte que vous puissiez faire glisser le cercle sans avoir à le réinitialiser. Actuellement, le code anime le cercle de retour au centre de l'écran et repose sur les valeurs de Panrespables DX / DY.
Mes meilleures devines est que je dois changer quelque chose dans Qu'est-ce que je dois changer dans la source, donc si je commencez le OnpanresponderMove OnpanresponderRelease logique Le cercle passe correctement autour de l'écran? < p> gettranslatetransform () ?
3 Réponses :
En réalité, la seule chose que vous devez modifier est la fonction OnpanresponderRelease. Ce que vous faites actuellement est d'appliquer le delta du mouvement de geste à la position initiale du composant. Ce que vous voulez faire, c'est l'appliquer à la position à la fin du dernier geste. Donc, vous devez en quelque sorte sauver le décalage. Animatedvaluexy.setoffset à la rescousse! J'utilise la variable interne _Offset ici parce que je pouvais trouver un moyen d'y accéder via l'API. Vous pouvez également bien sûr garder une trace du décalage manuellement. Je n'ai pas encore testé ce code, mais vous avez l'idée.
Il y a quelques bugs dans ce code, le principal étant que setingoffset attend un objet avec x / y: {x: numéro, y: numéro} . De plus, comme vous l'avez dit, vous devez suivre les valeurs et utiliser ceux-ci. Voir ma réponse.
Merci pour l'indice signature. Mal interprété les docs. Je ne pense pas qu'il y ait un auditeur sur l'animationvalue cependant. Vous avez toutes les informations dont vous avez besoin sur la libération. La seule chose est d'écrire le décalage quelque part au lieu de s'appuyer sur une variable interne.
Ce code ne fonctionne pas. Cela conduit à un comportement étrange, par exemple. Après la déplaçage une fois qu'il saute au centre, puis l'application se gène. Notamment e.dx et e.dy est zéro et après chaque glisser ceci.state.pan.x._offset et ceci. state.pan.y._offset est 0 . Cependant, je suppose également qu'il devrait y avoir une solution sans ajouter un auditeur. Si vous auriez plusieurs cercles de déplacement librement, cela pourrait devenir un problème de performance.
La logique dans Supprimer que La logique seule n'est pas tout ce que vous devriez faire. Vous devez définir le décalage et réinitialiser la valeur de in alors, dans OnpanresponderRelease CODE> est de sorte que si la dragage ne soit pas dans la dropzone lorsqu'elle est relâchée, elle est réinitialisée à 0,0 code> ( Ce sont les lignes qui le causent ). ceci.state.pan code> dans OnpanresponderRelease code>. Pour ce faire, vous devez suivre la valeur. P> ComposantDidMount code>, ajoutez ceci: p> Composantwillunmount Code>: P> onPanResponderRelease: (e, gestureState) => {
this.state.pan.setOffset({x: this.currentPanValue.x, y: this.currentPanValue.y});
this.state.pan.setValue({x: 0, y: 0});
},
Pourriez-vous élaborer sur ce que setoffset fait et pourquoi il est nécessaire?
La ligne ceci.state.pan.setvalue ({x: 0, y: 0}); in OnpanresponderRelease n'est pas nécessaire. J'ai le même résultat avec ou sans cette ligne. Je ne vois aucun effet de cette ligne. Devrait-il y en avoir un?
Aussi: Dans le code Documents de AnimateDimplementation.js Ils écrivent à l'aide de animé.value.addlistener peut causer des problèmes de performance. Comment résoudriez-vous ce problème avec un plus grand nombre de cercles? - Un auditeur pour chaque cercle?
Une autre manière serait de suivre le décalage courant et de continuer à l'ajouter à la casserole. Donc, déclarez ceci dans le constructeur et éditez l'ONPANRESPonderRelase sur les éléments suivants: p> CoururalValue: {x: 0, y: 0}, code> onPanResponderRelease : (e, gesture) => {
this.state.currentPanValue.x += this.state.pan.x._value;
this.state.currentPanValue.y += this.state.pan.y._value;
this.state.pan.setOffset({x: this.state.currentPanValue.x, y: this.state.currentPanValue.y});
this.state.pan.setValue({x: 0, y: 0});
}