二階貝茲曲線動畫

259 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

二階貝茲曲線動畫


貝茲原理與公式

需要設置三個點

創建動畫與動畫控制器

    animationController = AnimationController(
        duration: const Duration(milliseconds: 5000), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(parent: animationController, curve: Curves.easeInCirc));

AnimatedBuilder setstate會整體刷新,AnimatedBuilder會根據參數animation局部刷新。

AnimatedBuilder(
        child: Image.asset(
          widget.imageAsset,
          width: 50,
        ),
        animation: animation,
        builder: (context, child) {
          double x0 = 100.0;
          double y0 = 100.0;

          double x2 = 1000.0;
          double y2 = 800.0;

          double x1 = (x0 + x2) * 0.7;
          double y1 = y0 - 80;

          return Transform.translate(
            offset: Offset(
                pow(1 - animation.value, 2) * x0 +
                    2 * animation.value * (1 - animation.value) * x1 +
                    pow(animation.value, 2) * x2,
                pow(1 - animation.value, 2) * y0 +
                    2 * animation.value * (1 - animation.value) * y1 +
                    pow(animation.value, 2) * y2),
            child: child,
          );
        })