🚪 Closed

🙆‍♀️ 파도 애니메이션이 튕겨보이는 문제

• 파도 물결 애니메이션이 끝나면 반복되기 전에 튕기는 듯한 모양새라 어색하다.
• 파도 물결의 속도가 빨라서 급해보인다.

✔️ Solved

_controller =
    AnimationController(duration: Duration(seconds: 10), vsync: this);
_controller.repeat(reverse: true);
animation = Tween<double>(begin: -255, end: 0).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
    reverseCurve: Curves.linear));

• repeat()의 매개 변수로 reverse: true를 설정해서 좌우로 흔들리도록 하여 튕기는 현상이 일어나지 않게 했다.
• Duration의 seconds 값을 올려주어 더욱 안정된 속도로 움직인다.
• 기존 코드에서 파도의 높이를 수정하여서 기획 단계의 UI과 좀 더 비슷해보이도록 하였다. 또, 물결의 속도도 적당히 조절했다. (코드는 생략)

🙆‍♀️ controller 변수가 여러 개로 선언 및 사용 문제

다음은 @override void initState() 내부 코드이다.

AnimationController _controller;
AnimationController _controller2;
AnimationController _controller3;
AnimationController _controller4;

_controller =
    AnimationController(duration: Duration(seconds: 7), vsync: this);
_controller.repeat();

_controller2 =
    AnimationController(duration: Duration(seconds: 8), vsync: this);
_controller2.repeat();

_controller3 =
    AnimationController(duration: Duration(seconds: 9), vsync: this);
_controller3.repeat();

_controller4 =
    AnimationController(duration: Duration(seconds: 3), vsync: this);
_controller4.repeat();

animation = Tween<double>(begin: -400, end: 0).animate(_controller);
animation2 = Tween<double>(begin: -400, end: 0).animate(_controller2);
animation3 = Tween<double>(begin: -400, end: 0).animate(_controller3);
animation4 = Tween<double>(begin: -400, end: 0).animate(_controller4);

총 4개의 물결 애니메이션인데 AnimationController가 그만큼 많은 상태이며 반복되는 작업을 수행한다.

AnimationController에서 duration 차이를 두어 물결마다 움직이는 속도를 달리할 수 있다.

AnimationController를 하나로 줄여서 같이 쓸 수 있다면 성능에 더 긍정적인 영향이 있지 않을까 추측했다.

✔️ Solved

animation = Tween<double>(begin: -255, end: 0).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
    reverseCurve: Curves.linear));
animation2 = Tween<double>(begin: -200, end: 0).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
    reverseCurve: Curves.linear));
animation3 = Tween<double>(begin: -300, end: 0).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
    reverseCurve: Curves.linear));
animation4 = Tween<double>(begin: -400, end: 0).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
    reverseCurve: Curves.linear));

CurvedAnimation 함수를 사용하여 동일한 controller로 parent를 설정하였다.

하나의 AnimationController(_controller)를 사용하면 물결의 속도를 duration으로 조정할 수 없다는 단점이 있는데, Tween<double> 함수의 begin 값을 조정하여 이부분을 해소하였다.

🙅‍♀️ 애니메이션 관련 코드 분리

return Stack(
  children: [
    ...,
    Positioned(...),
    Positioned(...),
    Positioned(...),
    Positioned(...),
    Positioned(...),
    Positioned(...),
  ]
);

Positioned가 모두 물결 애니메이션인데 코드에서 너무 많이 차지한다고 생각해서 물결 자체를 한 위젯으로 묶고 싶었다.

⚠️ Failed

파일을 분리하고 호출하는 형태로 해보았으나 물결의 위치가 아래에 붙어있지 않고 공중이 떠다녔다.

이유는 다른 파일로 분리할 때 class으로 만들었는데, Widget의 크기를 내부적으로 잡을 때 화면 전체로 잡히지 않아서로 추측하고 있다.

하지만 해결 방법은 찾으려면 오래 걸릴 듯 하여 우선 순위를 미루기로...

도움이 된 링크

• Curves class - Flutter
• repeat method - Flutter
• Flutter different duration for different Animation - stack overflow