如何从动画值中为特定范围提供曲线效果

问：

我需要将动画值的范围划分为较小的范围，例如以下简单示例：

class TextAnimation extends StatefulWidget {
  const TextAnimation({Key? key}) : super(key: key);

  @override
  State<TextAnimation> createState() => _TextAnimationState();
}

class _TextAnimationState extends State<TextAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController anController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    anController = AnimationController(
        vsync: this,
        duration: Duration(seconds: 5),
        reverseDuration: Duration(seconds: 5));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    anController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
          animation: anController,
          builder: (context, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  width: double.infinity,
                ),
                Container(
                  width: 300 *
                      Tween(begin: 0.0, end: 1.0)
                          .animate(CurvedAnimation(
                              parent: anController,
                              curve:
                                 Curves.fastOutSlowIn))
                          .value,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                    width: 300 *
                        (Tween(begin: 0.0, end: 1.0) .animate(CurvedAnimation(
                                parent: anController, curve: Curves.fastOutSlowIn))
                            .value.clamp(0.5, 1)),
                    height: 100,
                    color: Colors.blue),
                InkWell(
                    onTap: () {
                      anController.forward();
                    },
                    child: Text(
                      'Start',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                      ),
                    ))
              ],
            );
          }),
    );
  }
}

第二个容器需要从范围的一半到结束开始动画......

问题是曲线效果在这个范围内丢失了，我需要给这个范围（0.5-1.0）自己的曲线，以 0.5 快速开始，以慢动作结束。

有没有办法在不使用另一个动画控制器来驱动这个范围的情况下做到这一点？

注意：如果没有 AnimatedContainer，上面的代码只是问题的简单示例。

Flutter 飞镖动画 Curve Tween

import 'package:flutter/animation.dart';

class MyCurvedAnimation extends CurvedAnimation {
  final double min;
  final double max;

  MyCurvedAnimation(
      {required super.parent,
      required super.curve,
      super.reverseCurve,
      required this.min,
      required this.max});

  @override
  double get value {
    double valueFromParent = super.value;
    double range = max - min;

    return min + valueFromParent * range;
  }
}

要在小部件中使用它进行旋转，例如：

@override
Widget build(BuildContext context) {
    AnimationController _controller = AnimationController(
        duration: const Duration(milliseconds: 3000),
        vsync: this,
    );

    Animation<double> _rangedTween = MyCurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
        reverseCurve: Curves.easeInOut,
        min: 0.0,
        max: 0.1);

    return RotationTransition(
        turns: _rangedTween,
        child: Text("ROTATE"));
}

上一个：增加 TextDecoration 行中的距离 - flutter

下一个：调用过程 sql-tool vscode

如何从动画值中为特定范围提供曲线效果 - Flutter

how to give a curve effect to a specific range from animation value - flutter

评论