反应本地脉搏图像作为Instagram

时间:2018-12-29 11:39:05

标签: javascript react-native animation instagram

这就是我要创建的图像动画的实际脉冲。

20181229_010048

这是我设法创建的。

只有它并不能说服我取得成功的结果。

我想在图像上制作动画。

我不明白是什么让我无法相信图片的结果。

enter image description here

代码:

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一样知道如何改善我的脉搏吗?

0 个答案:

没有答案