Delay가 있는 TweenAnimationBuilder

관련된 위젯이 없는거 같아서 직접 만들어 보았다. 패키지도 있던데 어렵지도 않은거 굳이 패키지로?

 

 

아이디어는 다음과 같다.

 

• delay + duration 만큼 애니메이션 시간을 늘린다
• delay 비율을 계산하고 그 비율만큼은 위젯의 투명도를 0으로 하여 보이지 않게 한다
• delay시간이 지나면 그때부터 애니메이션을 시작한다. 애니메이션 값에 delay비율만큼 뺀 다음 범위를 0에서 1로 노말라이즈 해 준다

 

 

 

  @override
  Widget build(BuildContext context) {
    double delayRatio = delay.inMilliseconds == 0
        ? 0
        : delay.inMilliseconds.toDouble() /
            (delay.inMilliseconds.toDouble() +
                duration.inMilliseconds.toDouble());
    return TweenAnimationBuilder(
      tween: Tween<double>(begin: 0.0, end: 1.0),
      duration: Duration(
          milliseconds: delay.inMilliseconds + duration.inMilliseconds),
      builder: (context, value, child) {
        if (value < delayRatio) {
          return Opacity(
            opacity: 0,
            child: this.child,
          );
        }
        value = (value - delayRatio) / (1 - delayRatio);
        return Transform.translate(
          offset: Offset(xOffset - xOffset * value, yOffset - yOffset * value),
          child: Opacity(
            opacity: value,
            child: this.child,
          ),
        );
      },
    );
  }