3
votes

L'animation Lottie a un grand rembourrage. Comment redimensionner l'animation à la vue, en supprimant le remplissage

J'ai un fichier d'animation Lottie et quand je le mets dans une vue, il devient trop petit à cause du remplissage interne du fichier. J'ai donc utilisé l'attribut lottie_scale en xml, et aussi LottieComposition comme mentionné dans certaines ressources comme ceci mais aucun ne l'était réussi.

Y a-t-il une solution?


1 commentaires

Je passe beaucoup de temps à chercher une telle chose, tout ce que j'ai eu c'est d'obtenir une autre animation ou d'en créer une vous-même.


3 Réponses :


-1
votes

J'ai eu le même problème et je n'ai pas trouvé de bonne réponse, mais pour le faire fonctionner, j'ai utilisé des marges négatives. C'est moche, mais cela pourrait être une solution rapide.

  <LottieView
    style={styles.checkAnimation}
    source={require('<path to json>')}
    autoPlay
    loop={false}
    speed={2}
    autoSize
    resizeMode="cover"
  />

const styles = {
  checkAnimation: {
    position: 'absolute',
    width: '150%',
    height: '115%',
    marginLeft: '-17%',
    marginTop: '-7%',
  },
}


1 commentaires

L'OP utilise le développement natif d'Android, pas React Native.



0
votes

J'ai récemment eu le même problème et j'ai eu recours à un remplissage négatif qui augmentait la taille de l'élément animé à l'intérieur de la vue

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/my_animation"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="-10dp"
            app:lottie_fileName="animation.json"
            app:lottie_autoPlay="false"/>

Augmentez ou diminuez la valeur du remplissage pour obtenir le souhait taille de l'animation.


0 commentaires

0
votes

Je pense qu'il existe actuellement deux solutions "semi":

  1. installez Bodymovin sur Adobe After Effects, puis importez l'animation et définissez son échelle sur par ex. 500%.
  2. Mettez à l'échelle la vue de l'animation Lottie non pas à l'échelle de Lottie, mais en utilisant ScaleX, ScaleY:

XML:

view.setScaleX(5f);
view.setScaleY(5f);

Programmatiquement:

android:scaleX="5"
android:scaleY="5"


0 commentaires