颤动变换。将动画从小部件的中心移动到

时间:2019-08-16 08:27:08

标签: flutter flutter-animation

在下面的此动画中实现了中心位置,以使翻译动画同时使用elasticInelasticOut

不幸的是,我实现的不是小部件的中心,我无法设置它

import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: App(),));

class App extends StatefulWidget {
  @override
  State<StatefulWidget> createState() =>_App();
}

class _App extends State<App> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animationRadiusIn;
  Animation<double> animationRadiusOut;

  final double initialRadius = 55.0;
  double radius = 0.0;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, duration: Duration(seconds: 5));

    animationRadiusIn =
        Tween<double>(begin: 1.0, end: 0.5).animate(CurvedAnimation(parent: controller, curve: Interval(0.75, 1.0, curve: Curves.elasticIn)));
    animationRadiusOut =
        Tween<double>(begin: 0.5, end: 1.0).animate(CurvedAnimation(parent: controller, curve: Interval(0.0, 0.25, curve: Curves.elasticOut)));

    controller.addListener(() {
      setState(() {
        if (controller.value >= 0.75 && controller.value <= 1.0) {
          radius = animationRadiusIn.value * initialRadius;
        } else if (controller.value >= 0.0 && controller.value <= 0.25) {
          radius = animationRadiusOut.value * initialRadius;
        }
      });
    });

    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Center(
            child: Transform.translate(
              offset: Offset(radius,radius),
              child:FlutterLogo(),
            ),
          ),
        ],
      ),
    );
  }
}

从窗口小部件的中心制作动画,用于elasticInelasticOut动画

这意味着从Curves.elasticInCurves.elasticOut动画开始到结束

0 个答案:

没有答案