2023. 1. 30. 20:38ㆍ모바일어플개발/Flutter
안녕하세요~ totally 개발자입니다.
TweenAnimationBuilder, Transform
오늘은 카드를 뒤집어보는 애니메이션에 대해 살펴보겠습니다. TweenAnimation에서는 tween instance를 사용하게 되는데 begin value와 end value를 지정해서 target인 end value로 애니메이션하는 원리입니다. Transform은 어떻게 transform(변형)시킬지를 정의합니다. 바로 예제 실습으로 들어가보도록 하겠습니다.
Step 1: 카드의 앞, 뒤로 사용할 동일한 크기의 이미지 2개를 준비해서 원하시는 폴더에 넣어주시고 pubspec.yaml에 경로를 명시해줍니다.
Step 2: dart:math를 임포트해줍니다.
Step 3: 필요한 변수인 _isBack과 _angle를 선언해줍니다.
Step 4: GestureDetector를 먼저 사용합니다. 그 이유는 카드 전체 영역을 탭 했을 때, 카드를 뒤집을 것이기 때문입니다. 그리고 onTap 속성에 setState를 넣어주고 그 안에 _angle를 계산할 수 있도록 수식을 아래처럼 넣어줍니다.
Step 5: GestureDetector의 child로 TweenAnimationBuilder를 넣습니다. tween과 duration, builder가 필수 속성이며 tween에는 시작값, 끝값을 넣습니다. duration에는 지속 시간, builder에 바로 뒤집어져 있는 상태를 표시하는 _isBack를 계산값에 따라 false로 할지, true로 할지를 결정하게 해주시고, return Transform 해주셔서 아래처럼 적어주시면 됩니다. transform: Matrix4.identity()로 쓰이는 부분이 있는데 이 부분이 바로 어떻게 변형할 것인지를 표시해주는 부분이며 백터 수학이 들어가는 부분입니다. setEntry에는 row, col, value가 들어가고 rotateY를 통해서 Y축을 기준으로 회전시킬 수 있습니다. 그리고 child: Container를 사용하여 이미지를 넣어줍니다. 이 때 _isBack ? : 를 통해서 AssetImage의 이미지 경로를 카드 앞인지 뒤인지 바꿔주면 됩니다.
Step 6: 결과는 아래와 같습니다.
[전체 소스 코드]