如何使用 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 模块。

npm install react-native-animatable --save

Refer Here

希望对你有帮助！

Answer 2

使用react-native-animatable:

<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

正如您所说，您是 react native 的新手，我建议您使用 react-native-animatable 库，该库对一些内置动画和自定义动画非常有用。 p>

这是我在下面提到的解决方案的 GitHub https://github.com/oblador/react-native-animatable 链接。

在这个页面中，您可以找到不同的方法来了解如何在 react-native 中使用动画库进行动画。

现在根据您的问题，这是一个解决方案 你必须通过

安装 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

您可以为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：我认为This heart beat animation 可以满足您的需求。您可以编辑它的颜色和速度，然后继续下载并在您的应用中使用它。

Answer 5

有点晚了，这是我自己用 React Native 的 Animated 模块制作的心跳动画：

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

尝试使用minValue 和maxValue 来获得您最喜欢的动画！

Answer 6

您可以使用react-native-animatable 创建您的自定义脉冲动画来实现：

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

那么，在你的Animatable.View

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

Answer 7

你可以像这样使用Animated.loop

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

查看下面的完整代码和 Snack 中的Live preview。

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