如何使用 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 的 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 2

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

这是我在下面提到的解决方案的 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 3

使用react-native-animable：

\n\n

<Animatable.Text \n    animation="pulse" \n    easing="ease-out" \n    iterationCount="infinite" \n    style={{ ... }}>\xe2\x9d\xa4\xef\xb8\x8f</Animatable.Text>\n

\n\n

或者...

\n\n

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

\n