4
votes

Comment avoir une animation de rythme cardiaque avec React native?

J'apprends React native et j'aimerais avoir une animation de battements de cœur

J'ai fait ça mais ce n'est pas le bon résultat, j'aimerais avoir des battements de cœur.

Si quelqu'un peut aider moi ce serait très gentil merci beaucoup

import React, { PureComponent } from "react";
import { Animated, StyleSheet, Text, View } from "react-native";

export class Loading extends PureComponent {
  constructor(props: any) {
    super(props);
    this.state = {
      opacity: new Animated.Value(0),
    };
  }
  public componentDidMount() {
    Animated.timing(
      this.state.opacity,
      {
        toValue: 100,
        duration: 5000,
      },
    ).start(); 
  }

  public render() {
    return (
      <View>
        <View>
          <Animated.View
        style={[styles.animation, {
        opacity: this.state.opacity,
        transform: [
        {
          scale: this.state.opacity.interpolate({ 
            inputRange: [0.5, 1],
            outputRange: [1, 0.95],
          }),
        }]},
        ]}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  animation: {
    backgroundColor: "red,
    width: 100,
    height: 100,
    borderRadius: 50,
  },
});

react-native animation

2 commentaires

avez-vous essayé l'animation lottiefiles .. ces animations sont très professionnelles et faciles à utiliser

Merci pour la réponse mais je ne veux pas vraiment que je n'ai besoin que de l'animation

6 Réponses :

-1
votes

vous pouvez essayer ce module natif de réaction.

npm install react-native-animatable --save

Référez-vous ici

J'espère que cela vous aidera!

0 commentaires

0
votes

Utilisez react-native-animatable :

<Animatable.View
    animation="pulse" 
    easing="ease-out" 
    iterationCount="infinite" 
    style={{ ... }}>{children}</Animatable.View>

ou...

<Animatable.Text 
    animation="pulse" 
    easing="ease-out" 
    iterationCount="infinite" 
    style={{ ... }}>â¤ï¸</Animatable.Text>

0 commentaires

6
votes

Comme vous dites que vous êtes nouveau dans le domaine de la réaction native, je voudrais vous suggérer d'utiliser une bibliothèque animable de réaction native qui est très utile avec des animations intégrées et des animations personnalisées. > Voici un lien de GitHub https://github.com/oblador/react-native-animatable pour votre solution que j'ai mentionnée ci-dessous.

Dans cette page, vous pouvez trouver différentes méthodes pour utiliser la bibliothèque animable pour l'animation en react-native.

Maintenant, selon votre question ici est une solution vous devez installer react-native-animatable par

$ npm install react-native-animatable --save

Étape 1: strong>

<Animatable.Text 
  animation="pulse" 
  easing="ease-out" 
  iterationCount="infinite" 
  style={{ textAlign: 'center' }}>
 â¤ï¸
</Animatable.Text>

Étape 2: Utilisez ce code

import * as Animatable from 'react-native-animatable';

3 commentaires

Bonjour, merci pour votre réponse, j'essaye ceci mais je recherche quelque chose avec l'impulsion est plus grosse, celle-ci est très petite impulsion: /

@askmeline vous pouvez augmenter la taille de l'impulsion en ajoutant le style fontSize dans le composant Animatable.Text comme ceci style = {{textAlign: 'center', fontSize: 100}}. Comme il s'agit d'un texte, vous pouvez augmenter la taille du texte par fontSize.

Je recherche le pouls plus gros pas l'image plus grande mais l'animation comme celle-ci: popmotion.io/pose mais avec Animated : |

1
votes

Vous pouvez essayer React Native Lottie pour en savoir plus animation flexible et attrayante.

Pour commencer, installez-la via:

    import LottieView from 'lottie-react-native';

    render() {
        return (
          <LottieView
            ref={animation => {
              this.animation = animation;
            }}
            source={require('../path/to/animation.json')}
          />
        );
      }

Étape 3 : accédez à Lottie Files , qui est une collection d'animations impressionnantes réalisées par la communauté. Recherchez et choisissez une animation coeur qui vous convient et téléchargez le fichier .json qui lui est associé. Ensuite, procédez au rendu comme indiqué ci-dessous:

Step 1: > npm i --save lottie-react-native@2.5.11
Step 2: > react-native link lottie-react-native

PS: Je pense que Cette animation de rythme cardiaque peut répondre à vos besoins. Vous pouvez modifier sa couleur et sa vitesse, puis procéder au téléchargement et l'utiliser dans votre application.

2 commentaires

Merci pour votre réponse mais je recherche l'animation pas l'icône: /

Ce sont des animations et non des icônes

5
votes

Un peu en retard mais voici ma propre animation de battement de cœur réalisée avec le module Animated de React Native:

export const HeartbeatAnimation = (
    value: Animated.Value,
    minValue: number,
    maxValue: number
) =>
Animated.loop(
    Animated.sequence([
        Animated.timing(value, {
            toValue: maxValue,
            duration: 100
        }),
        Animated.timing(value, {
            toValue: minValue,
            duration: 100
        }),
        Animated.timing(value, {
            toValue: maxValue,
            duration: 100
        }),
        Animated.timing(value, {
            toValue: minValue,
            duration: 2000
        })
    ])
);

Essayez de jouer avec minValue et maxValue code> pour obtenir votre animation préférée!

0 commentaires

0
votes

Vous pouvez y parvenir avec react-native-animatable en créant votre animation d'impulsion personnalisée:

<Animatable.View
      animation={pulse}
      easing="ease-out"
      iterationCount="infinite"
    >
     <Text>PULSE ME</Text>
</Animatable.View>

Ensuite, dans votre Animatable.View code>

const pulse = {
  0: {
    scale: 1,
  },
  0.5: {
    scale: 1.5
  },
  1: {
    scale: 1
  }
}

0 commentaires