Анимация окружности на квадрат со скругленными краями в React-native с использованием `useNativeDriver`

Question

Анимация окружности на квадрат со скругленными краями в React-native с использованием `useNativeDriver`

1

У меня есть форма, которую я хотел бы анимировать от круглой до квадратной с закругленными краями.

            <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 так как оно не поддерживается собственным драйвером, и на этой странице описание ссылки здесь не предоставляет аналогичного свойства.

chibro2 01 янв. 2019, в 18:16

Источник

Теги:

javascript

react-native

expo

1 ответ

Ещё вопросы

10101010 · Answer 1 · 2019-01-12T06-09-00.000Z

Кажется, работает на 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;