Question

我想知道如何从Android到Flutter实现圆形显示动画。还有关于Flutter动画的例子的资源吗？

Answer 1

对于显示效果，您必须使用class Detail extends Component { . . . static navigationOptions = ({ navigation }) => { const {state} = navigation; return { headerTitle: "title", headerStyle: { borderBottomColor: 'transparent', borderBottomWidth: 0, backgroundColor: 'transparent', elevation: 0 , shadowOpacity: 0, shadowColor: 'transparent', shadowRadius: 0, shadowOffset: { width: 0, height: 0 } }, headerTitleStyle: { color: 'white', width: width-72, }, headerBackTitleStyle: { color: 'white', }, headerTintColor: 'white', headerBackground: ( <LinearGradient colors={[MyConstants.colorNavbarStart, MyConstants.colorNavbarEnd]} style={{ flex: 1 ,padding: 0}} start={{x: 0, y: 0.5}} end={{x: 1, y: 0.5}} /> ), headerRight: ( <TouchableOpacity> <View style={{padding: 8}}> <Image source={MyConstants.imgShareArrow} style={{height:20, width: 20}} /> </View> </TouchableOpacity> ), headerLeft: ( <TouchableOpacity onPress={ () => {navigation.pop()}}> <View style={{padding: 8}}> <Image source={MyConstants.imgBackArrow} style={MyStyle.backButton} /> </View> </TouchableOpacity> ) }; }; }类。

CustomPainter

您可以阅读此awesome tutorial for Circular reveal effect.以获得详细信息。

Github Code

在显示效果时，您必须平滑打开第二个屏幕。为此，请使用Fluro库进行路由和导航。这将为您提供过渡类型。

class RevealProgressButtonPainter extends CustomPainter {
  double _fraction = 0.0;
  Size _screenSize;

  RevealProgressButtonPainter(this._fraction, this._screenSize);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

    var finalRadius =
        sqrt(pow(_screenSize.width / 2, 2) + pow(_screenSize.height / 2, 2));
    var radius = 24.0 + finalRadius * _fraction;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paint);
  }

  @override
  bool shouldRepaint(RevealProgressButtonPainter oldDelegate) {
    return oldDelegate._fraction != _fraction;
  }
}

Flutter中圆形揭示动画的等价物是什么？

1 个答案: