这就是我要创建的图像动画的实际脉冲。
这是我设法创建的。
只有它并不能说服我取得成功的结果。
我想在图像上制作动画。
我不明白是什么让我无法相信图片的结果。
代码:
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import { Constants } from 'expo';
import { LinearGradient } from 'expo';
import PulseAnim from 'react-native-pulse-anim';
var size = 60;
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image
style={{
width: 70,
height: 70,
borderRadius: 35,
marginBottom: 20,
}}
source={{
uri:
'https://vignette.wikia.nocookie.net/spooks/images/8/83/Lara_Pulve.jpg/revision/latest?cb=20111224003538',
}}
/>
<LinearGradient
height={size}
width={size}
colors={['#8a49a1', '#8a49a1']}
rotation={0}
style={{
justifyContent: 'center',
alignItems: 'center',
borderRadius: 40,
}}>
<LinearGradient
height={size - 4}
width={size - 4}
colors={['#fff', '#fff']}
rotation={0}
style={{
justifyContent: 'center',
alignItems: 'center',
borderRadius: 45,
}}>
<LinearGradient
height={size - 8}
width={size - 8}
colors={['#000', '#000']}
rotation={0}
style={{
justifyContent: 'center',
alignItems: 'center',
borderRadius: 45,
}}>
<PulseAnim
size={size - 20}
pulseMaxSize={size}
avatar={
'https://vignette.wikia.nocookie.net/spooks/images/8/83/Lara_Pulve.jpg/revision/latest?cb=20111224003538'
}
/>
</LinearGradient>
</LinearGradient>
</LinearGradient>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#000',
padding: 8,
alignItems: 'center',
},
});
链接:Here
有人像Instagram一样知道如何改善我的脉搏吗?