代码之家 › 专栏 › 技术社区 › xiaolingxiao

在react native中使用'usenativedriver'将圆设置为带圆角的正方形`

expo react-native javascript

xiaolingxiao · 技术社区 · 7 年前

我有一个形状,我想动画从圆形,到一个正方形的圆形边缘。

            <Animated.View
                style={[{
                      width       : this.state.innerWidth
                    , height      : this.state.innerWidth
                    , borderRadius: this.state.innerRadius
                    , transform   : [{scale:this.state.scale}]
                    , backgroundColor: this.state.color
                    , opacity     : this.state.opacityInner
                }]}
            />

我正在使用 useNativeDriver 因为它更平滑。但是,我不能动画 borderRadius 属性,因为本机驱动程序不支持它,并且此页 enter link description here 不提供类似的属性。

1 回复 | 直到 7 年前

10101010 7 年前

似乎是为了 borderRadius . 对于高度等属性,可能不支持本机动画。

import React, { Component } from "react";

import { View, Animated } from "react-native";

class App extends Component {
  state = {
    borderRadius: new Animated.Value(100)
  };

  componentDidMount() {
    Animated.timing(this.state.borderRadius, {
      toValue: 16,
      duration: 1200,
      useNativeDriver: true
    }).start();
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Animated.View
          style={{
            height: 200,
            width: 200,
            borderRadius: this.state.borderRadius,
            backgroundColor: "red"
          }}
        />
      </View>
    );
  }
}

export default App;