本文介绍了如何使用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制作心跳动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-26 17:25
查看更多