How to have a heart beat animation with React native?

问题

I'm learning React native and I would like to have heart beat animation

I did that but it's not the good result, I would like to have heart beat.

If someone can help me it's would be very nice thanks a lot

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,
  },
});

回答1:

As you say you are new to react native, I would like to suggest you use a react-native-animatable library which is very helpful with some built-in animation and custom animation.

Here is a link of GitHub https://github.com/oblador/react-native-animatable for your solution which I mentioned below.

In this page, you can find different methods for how to use animatable library for animation in react-native.

Now as per your question here is a solution you have to install react-native-animatable by

$ npm install react-native-animatable --save

Step 1:

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

Step 2: Use this code

<Animatable.Text 
  animation="pulse" 
  easing="ease-out" 
  iterationCount="infinite" 
  style={{ textAlign: 'center' }}>
 ❤️
</Animatable.Text>

回答2:

A bit late but here is my own heartbeat animation made with React Native's Animated module:

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
        })
    ])
);

Try playing with the minValue and maxValue to get your favorite animation !

回答3:

You can give React Native Lottie a go for a more flexible and appealing animation.

To get started, install it via:

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

Step 3 : Go to Lottie Files, which is a collection of awesome animations done by the community. Search and choose a heartanimation that suits you and download the .jsonfile associated with it. Then proceed to render it as shown below:

    import LottieView from 'lottie-react-native';

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

PS: I think This heart beat animation can fit your need. You can edit it's color and speed and then proceed to download it and use it in your app.

回答4:

Use react-native-animatable:

<Animatable.Text 
    animation="pulse" 
    easing="ease-out" 
    iterationCount="infinite" 
    style={{ ... }}>❤️</Animatable.Text>

or...

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

回答5:

You can achieve that with react-native-animatable by creating your custom pulse animation:

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

Then, in your Animatable.View

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

回答6:

you can use Animated.loop like this

  useEffect(() => {
    // makes the sequence loop
    Animated.loop(
      // runs given animations in a sequence
      Animated.sequence([
        // increase size
        Animated.timing(anim.current, {
          toValue: 10, 
          duration: 2000,
        }),
        // decrease size
        Animated.timing(anim.current, {
          toValue: 1, 
          duration: 2000,
        }),
      ])
    ).start();
  }, []);

Check below the full code and Live preview in Snack.

import React, { useRef, useEffect } from 'react';
import { Text, View, StyleSheet, Animated } from 'react-native';
import { Ionicons } from '@expo/vector-icons';


export default function App() {
  const anim = useRef(new Animated.Value(1));

  useEffect(() => {
    // makes the sequence loop
    Animated.loop(
      // runs given animations in a sequence
      Animated.sequence([
        // increase size
        Animated.timing(anim.current, {
          toValue: 10, 
          duration: 2000,
        }),
        // decrease size
        Animated.timing(anim.current, {
          toValue: 1, 
          duration: 2000,
        }),
      ])
    ).start();
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={{ transform: [{ scale: anim.current }] }}>
        <Ionicons name="md-heart" size={32} color="red" />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgb(254, 254, 254)',
    padding: 8,
  },
});

回答7:

you can try this react native module.

npm install react-native-animatable --save

Refer Here

Hope it helps !

来源：https://stackoverflow.com/questions/55339044/how-to-have-a-heart-beat-animation-with-react-native