logo标签列表

如何使用React Native实现心跳动画？

react-nativeanimation
5

我正在学习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,
  },
});
你尝试过LottieFiles动画吗？那些动画非常专业且易于使用。 - Muhammad Iqbal
谢谢您的回答，但我并不需要那个，我只需要动画。 - askemeline
6个回答
8

有点晚了，但是这里有我用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以获得您喜爱的动画效果！
5

由于您说您是React Native的新手，我想建议您使用一个名为 react-native-animatable 的库，它具有内置动画和自定义动画，非常有帮助。

下面是GitHub的链接https://github.com/oblador/react-native-animatable，可以找到您需要的解决方案。

在这个页面中，您可以找到不同的方法来使用React Native Animatable库进行动画。

现在根据您的问题，以下是解决方案，您需要通过以下命令安装react-native-animatable库：

$ npm install react-native-animatable --save

步骤1：

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

步骤二：使用以下代码

<Animatable.Text 
  animation="pulse" 
  easing="ease-out" 
  iterationCount="infinite" 
  style={{ textAlign: 'center' }}>
 ❤️
</Animatable.Text>
你好，感谢您的回复。我尝试了这个方法，但是我想要一个更大的脉冲幅度的方案，这个方法的脉冲幅度太小了 :/ - askemeline
@askmeline，你可以通过在Animatable.Text组件中添加fontSize样式来增加脉冲的大小，像这样style={{textAlign: 'center'，fontSize:100}}。由于它是文本，你可以通过fontSize来增加文本的大小。 - Paras Korat
我搜索的是脉冲更大而不是图像更大，但是动画效果类似于：https://popmotion.io/pose，但使用Animated：| - askemeline
3

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

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

我需要使用 Animated.View 吗？还是我可以在任何元素上使用 anim.current？ - theonlygusti
1
您可以尝试使用React Native Lottie进行更灵活和吸引人的动画效果。
要开始使用，请通过以下方式安装：
Step 1: > npm i --save lottie-react-native@2.5.11
Step 2: > react-native link lottie-react-native

第三步：前往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：我认为这个心跳动画可以满足你的需求。你可以编辑它的颜色和速度，然后下载并在你的应用程序中使用它。

谢谢您的回答，但我在寻找动画而不是图标 :/ - askemeline
1
它们是动画，而不是图标。 - Felix Too
0

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

你可以通过使用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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接