如何使用 React Native 制作心跳动画? [英] How to have a heart beat animation with React native?

问题描述

我正在学习 React Native，我想要心跳动画

I'm learning React native and I would like to have heart beat animation

我做到了，但结果不是很好，我想要心跳.

I did that but it's not the good result, I would like to have heart beat.

如果有人可以帮助我，那就太好了，非常感谢

If someone can help me it's would be very nice thanks a lot

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

推荐答案

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

A bit late but here is my own heartbeat animation made with React Native's Animated module:

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 来获得您最喜欢的动画！

Try playing with the minValue and maxValue to get your favorite animation !

这篇关于如何使用 React Native 制作心跳动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！