如何创建具有不同持续时间和延迟的 animationController

问题描述

我正在尝试使用随机定位的星星创建一种简单的天空动画，其中一些星星具有缩放动画（在给定的示例中 %10 星星具有动画）。

问题是；一旦天空建成，所有动画星星都同时动画，因为它们由具有恒定持续时间的相同动画控制器。 如何制作具有不同持续时间和延迟的不同星星的动画？

见下面的代码（我没有包含非常简单的 Star Object 类）

class _RandomStaRSState extends State<RandomStars>
    with SingleTickerProviderStateMixin {
  Random _random = Random();
  AnimationController _animationController;
  Animation<double> _animation;

  List<Widget> _starsList = [];
  List<Star> _stars = [];
  TweenSequence<double> _sequence;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,duration: Duration(seconds: 3),);

    _sequence = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: Tween<double>(begin: 0.0,end: 1.0),weight: 50.0,),TweenSequenceItem<double>(
          tween: Tween<double>(begin: 1.0,end: 0.0),],);
    _animation = _sequence.animate(
        CurvedAnimation(parent: _animationController,curve: Curves.easeInOut));

    _addStars();
    _animationController.repeat();
  }

  void _addStars() {
    for (var i = 0; i < 50; i++) {
      _stars.add(
        Star(
          height: _random.nextDouble() * 15,locationX: _random.nextDouble() * widget.screenWidth,locationY: _random.nextDouble() * widget.screenHeight * 1,isAnimated: i.remainder(10) == 0 ? true : false,);
    }
    _stars.forEach((star) {
      star.isAnimated
          ? _starsList.add(_buildStarsAnimated(star))
          : _starsList.add(_buildStars(star));
    });
    _starsList.add(Align(
      alignment: Alignment.bottomCenter,child: RaisedButton(
        onpressed: () {
          _starsList = [];
          _stars = [];
          _addStars();
          setState(() {});
        },child: Text('Refresh'),));
  }

  Widget _buildStars(Star star) {
    return Positioned(
      top: star.locationY.todouble(),left: star.locationX.todouble(),child: Container(
        width: star.height.todouble(),height: star.width.todouble(),child: Image.asset('assets/images/star.png'),);
  }

  Widget _buildStarsAnimated(Star star) {
    return Positioned(
      top: star.locationY.todouble(),child: AnimatedBuilder(
          child: Container(
            width: star.height.todouble(),animation: _animation,builder: (context,child) {
            return Transform.scale(
              scale: _animation.value * 2,child: child,);
          }),);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: _starsList,);
  }
}

以及当前的屏幕视图；

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）