Question

我是React-native的新手，但它似乎很酷！我正在尝试创建这样的动画：屏幕中间有一个居中的点，1点后点开始向外伸展（朝向屏幕边界），创建一条线。我在Animatable和Animated中寻找这样的动画但是找不到类似的东西。有人能帮助我吗？

干杯，克里斯

Answer 1

这不完全符合规范，但应该让你开始：

import React, { Component } from 'react';
import { View, StyleSheet, Animated, Easing } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    width: new Animated.Value(5),
  }

  componentWillMount() {
    Animated.timing(
      this.state.width,
      {
        toValue: 500,
        duration: 1000,
        easing: Easing.linear,
      }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View style={{backgroundColor: 'red', width:     this.state.width, height: 5}}>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

在React Native中创建自定义动画

1 个答案: