2021.10.09.토요일 개발 일지
🚪 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
Author And Source
이 문제에 관하여(2021.10.09.토요일 개발 일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@alphachip/2021.10.09.토요일-개발-일지
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여(2021.10.09.토요일 개발 일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alphachip/2021.10.09.토요일-개발-일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)