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

你可以像这样使用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,
  },
});

Answer 3

使用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 4

正如您所说的，您是本机反应的新手，我建议您使用 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 5

您可以尝试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 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

您可以尝试使用此react native模块。

npm install react-native-animatable --save

Refer Here

希望有帮助！

如何使用React native制作心跳动画？

7 个答案: