🚪 Closed
🙆♀️ Exception caught by animation library
Failed assertion: line xxxx pos xx: '_lifecycleState != _ElementLifecycle.defunct': is not true.작동은 정상적으로 하는데 저 에러가 미친듯이 내려와서 스크롤을 엄청 잡아먹었다. 그래서 console로 로그를 보는 데에도 불편했다.
에러가 난 코드 부분은 아래다.
animation.addListener(() {
setState(() {}); //update UI on every animation value update
});setState()는 반응을 느리게하는 안 좋은 사용 예시라고 한다.
이걸 애니메이션 4개에다 달고 실질적으로 쓰이는 데는 6개나 되니 스크롤을 잡아먹을 수 밖에.
✔️ Solved
AnimatedWidget는 addListener()와 setState를 대신해 애니메이션 움직이는 걸 도와준다.
이전 코드는 아래와 같은 Positioned()가 6개다.
Positioned(
bottom: 10,
right: animation.value,
child: ClipPath(
clipper: MyWaveClipper(),
child: Opacity(
opacity: 0.35,
child: Container(
color: EmotionColor
.getDarkColorFor(
randomEmotion),
width: 900,
height: 200,
),
),
),),아래와 같이 물결마다 다른 부분과 애니메이션을 매개변수로 받는 AnimatedWidget을 만들어 위의 Positioned()를 반환해준다.
class AnimatedWave extends AnimatedWidget {
final Color color;
final double opacity;
final double bottom;
/// 0: left
/// 1: right
final int direction;
const AnimatedWave({
Key key,
Animation<double> animation,
this.bottom,
this.opacity,
this.color,
this.direction,
}): super(key: key, listenable: animation);
@override
Widget build(BuildContext context) {
final animation = listenable as Animation<double>;
double left, right;
if (direction == 1) {
right = animation.value;
} else {
left = animation.value;
}
return Positioned(
bottom: bottom,
left : left,
right: right,
child: ClipPath(
clipper: MyWaveClipper(),
child: Opacity(
opacity: opacity,
child: Container(
color: color,
width: 900,
height: 200,
),
),
),
);
}
}그리고 호출하는 부분에서는 아래와 같이 변경되는 부분만 코드가 보이도록 간결하게 바뀐다.
AnimatedWave(
animation: animation,
bottom: 10,
opacity: 0.35,
color: EmotionColor.getDarkColorFor(randomEmotion),
direction: 1,
),이제 콘솔창이 정적으로 변했다 ㅎㅎ
(내가 이걸하려고 저번에 애니메이션 고치는 걸 빌드업 한 것... 나의 빅픽쳐 성공 뿌듯)
도움이 된 링크
🐣 behance.net/5c533018