SNS 애니메이션 만들기(2) - 좋아요 모션

SNS 애니메이션 만들기(1) - 좋아요 아이콘

이번 글에서는 이전 글에서 다뤄봤던 좋아요 아이콘 내용과 거의 같은 내용이지만, 이미지 부분을 더블 클릭 했을 때 좋아요 아이콘이 튀어나오는 UI처리에 대해서 작성하도록 하겠다.

Flutter

UI

이전 글에 이이서 여기서도 Provider를 사용하여 만들어 보았고 공통 UI 위젯은 같다고 보면된다.

 return ChangeNotifierProvider<SnsUIHeartProvider>(
      create: (_) => SnsUIHeartProvider(),
      child: Consumer<SnsUIHeartProvider>(builder: (context, state, child) {
        return Scaffold(
            appBar: appBar(title: 'SNS Heart Motion'),
            body: snsUIHeartComponent(
                context: context,
                isHeart: state.isHeart,
                isShowHeart: state.isShowHeart,
                imageIndex: 26,
                onHeartTap: () => state.onDoubleTap()));
      }),
    );

이미지를 보여주는 부분인데 해당 부분을 Stack으로 쌓고 이전 글에서 사용 하였던 AnimatedSwitcher를 똑같이 사용하면 되는데, 여기서는 애니메이션이 나오고 들어가는 In <-> Out의 모션을 처리하기 위해 switchInCurve/switchOutCurve를 이용하여 빠르게 노출 되었다가 천천히 사라지는 애니메이션 처리를 하였다.

GestureDetector로 위젯을 감싸 자식 영역을 전부 터치가 감지되는 영역으로 만들어주고 두번 클릭할 때 처리하는 onDoubleTap 기능을 사용하면 된다.

      GestureDetector(
        onDoubleTap: onHeartTap,
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.width,
          child: Stack(
            children: [
              Image.network(
                'https://picsum.photos/id/$imageIndex/400/400',
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width,
              ),
              SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width,
                child: AnimatedSwitcher(
                    switchInCurve: Curves.fastLinearToSlowEaseIn,
                    switchOutCurve: Curves.fastLinearToSlowEaseIn,
                    duration: const Duration(milliseconds: 500),
                    transitionBuilder: (child, animation) => ScaleTransition(
                          scale: animation,
                          child: child,
                        ),
                    child: isShowHeart
                        ? const Icon(
                            Icons.favorite_rounded,
                            key: ValueKey('SHOW_HEART'),
                            size: 80,
                          )
                        : const Icon(
                            Icons.favorite_rounded,
                            size: 0,
                          )),
              )
            ],
          ),
        ),
      ),

Provider

isShowHeart 불리언 변수를 선언하고 무조건 좋아요가 눌린 상태로만 있으면 되기에 onDoubleTap()의 이벤트가 호출될 때 isShowHeart를 true로 변경하고 UI 부분에서 설정한 애니메이션 처리 시간인 0.5초 후에 다시 false로 되돌려 주면 된다.

bool isShowHeart = false;

 void onDoubleTap() {
    isShowHeart = true;
    isHeart = true;
    notifyListeners();
    Future.delayed(const Duration(milliseconds: 500), () {
      isShowHeart = false;
      notifyListeners();
    });
  }

Result

Git

https://github.com/boglbbogl/flutter_velog_sample/tree/main/lib/ui/heart_motion

마무리

이렇게 간단하게 애니메이션 처리를 도와주는 AnimatedSwitcher 위젯에 대해서 다뤄보았다. 사실 많은 기능이 있는 위젯인데 너무 간단하게만 만든 예제라 다음번에 AnimatedSwitcher에 대해서 따로 작성을 하도록 하겠다.

다음 글부터는 Tab View에 대해서 작성하도록 하겠다.