使用`useNativeDriver`在React-native中将圆形动画化为带有圆形边缘的正方形

Question

我想要从圆形到带有圆形边缘的正方形进行动画处理。

            <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没有提供类似的属性。

Answer 1

似乎适用于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;