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