Как сделать анимацию сердцебиения с React native?

Question

Я изучаю React native, и мне хотелось бы, чтобы анимация сердцебиения

Я так и сделал, но это не очень хороший результат, я бы хотел, чтобы сердце билось.

Если кто-то может мне помочь, было бы очень хорошо, спасибо большое

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

Answer 1

Вы можете дать React Native Lottie для более гибкой и привлекательной анимации.

Для начала установите его через:

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

Шаг 3 : Перейдите к Lottie Files , который представляет собой коллекцию удивительных анимаций, сделанных сообществом. Найдите и выберите анимацию heart, которая подходит вам, и загрузите файл .json, связанный с ней. Затем перейдите к визуализации, как показано ниже:

    import LottieView from 'lottie-react-native';

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

PS: я думаю Эта анимация сердцебиения может соответствовать вашим потребностям. Вы можете отредактировать его цвет и скорость, а затем приступить к загрузке и использованию в своем приложении.

Answer 2

Использование реагирует на нативную анимацию :

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

или ...

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

Answer 3

Поскольку вы говорите, что вы новичок в реагировании на натив, я хотел бы предложить вам использовать реагирующую-нативную анимацию библиотеку, которая очень полезна для некоторых встроенных анимаций и пользовательских анимаций.

Вот ссылка на GitHub https://github.com/oblador/react-native-animatable для вашего решения, о котором я упоминал ниже.

На этой странице вы можете найти различные методы использования анимируемой библиотеки для анимации в реагирующем нативе..

Теперь, в соответствии с вашим вопросом, вот решение, которое вы должны установить реактивно-нативно-анимируемым с помощью

$ npm install react-native-animatable --save

Шаг 1:

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

Шаг 2: Используйте этот код

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

Answer 4

Вы можете попробовать этот собственный модуль реагирования.

npm install react-native-animatable --save

См. Здесь

Надеюсь, это поможет!