애니메이션 효과

Flutter 에서는 2가지 방법으로 애니메이션을 구현할 수 있다.

• 암묵적 애니메이션(Implicit animation) : 미리 정의된 스타일과 애니메이션을 사용하기 때문에 구현이 아주 간단하다.
• 명시적 애니메이션(explicit animation) : 애니메이션을 직접 커스터마이징 하고싶을 경우 사용한다.

---

암묵적 애니메이션

위젯 내부에서 자체적으로 애니메이션이 일어난다.
listener나 ticker를 추가할 필요가 없고 값이 변함에 따라 자동으로 애니메이션이 일어난다.

flutter.dev 에서 보고 구현하면 된다.(유투브 영상 : flutter.dev)

• 예시

double opecity = 0;

void setDeleteMode() {
    setState(() {
      if (isDelete) {
        opecity = 0;
      } else {
        opecity = 1;
      }
      isDelete = !isDelete;
    });
  }

return GestureDetector(
	onTap: setDeleteMode,
    child: AnimatedOpacity(
    	duration: const Duration(seconds: 2),
        opacity: opecity,
        child:
        Util.uint8listToImage(snapshot.data[index].image),
    ),
);

---

명시적 애니메이션

명시적 애니메이메이션을 구현하는 방식의 종류
1. 빌트인 위젯을 사용하는 방법
~~~Transition으로 끝나는 위젯을 사용
2. AnimatedBuilder를 사용하는 방법
원하는 위젯을 AnimatedBuilder로 감싸는 구조(커스터마이징을 많이할 수 있다)

빌트인 위젯 사용

명시적 애니메이션을 사용하기 위해 컨트롤러와 애니메이션 객체를 선언해준다.

1. 컨트롤러 : AnimationController

• 애니메이션을 시작/거꾸로 재생/멈춤

• value : 애니메이션의 처음 시작 지점을 표시(default는 lowerBound)
  lowerBound 와 upperBound는 애니메이션 동작의 몇 %를 진행하는지 설정
  예를들어 0% ~ 100%의 투명도 애니메이션일 경우 lowerBound가 0.1 upperBound가 0.5일 경우 애니메이션은 투명도 10%~50%로 동작한다

• vsync : TickerProvider. Ticker를 제공한다. 1프레임마다 주어진 콜백 함수를 실행한다. 위젯의 state에 TickerProviderStateMixin를 사용할 경우 자기자신(this)를 넘겨도 된다.
  Ticker 는 매 프레임마다 함수를 호출하는 객체인데, 프레임이 변화되어야 할 때를 알려준다. TickerProvider를 통해 간접적으로 사용하는 경우가 많고 TickerProviderStateMixin이나 SingleTickerProviderStateMixin을 주로 사용한다.(SingleTickerProviderStateMixin은 AnimationControler를 하나만 사용할 때 사용하면 된다_효율)

  class _DeleteAnimationState extends State<DeleteAnimation>
     with TickerProviderStateMixin {
   late final AnimationController _controller = AnimationController(
     duration: const Duration(milliseconds: 50),
     vsync: this,
     lowerBound: 0.31,
     upperBound: 0.35,
   )..repeat(reverse: true);//repeat
   ...
   
   @override
   void dispose() {//컨트롤러 dispose
     _controller.dispose();
     super.dispose();
   }

• repeat 설정을 해줬기 때문에 애니메이션이 무한반복.
  reverse : true일 경우 시작-끝-시작-끝 순서로 반복
  reverse : false일 경우 시작-시작-시작-시작 순서로 반복

  repeat을 설정해주지 않으면 애니메이션이 자동으로 시작되지않으므로 트리거를 지정해줘야한다.
  _controller.forawrd();로 정방향실행
  _controller.reverse();로 역방향 실행을 할수있다.

  onTap: () {
     _controller.forward();
   },

• 컨트롤러는 리소스를 위해 꼭 dispose해주자

  ---

2. 애니메이션 : Animation

• 컨트롤러가 애니메이션의 상태를 조절한다.(상태는 애니메이션 객체가 그 값을 컨드롤러가 변경)

• Animation 클래스는 추상클래스(abstract)이다. Tween, CurvedAnimation, TrainHoppingAnimaion등을 사용해 객체를 만들 수 있다.

• 예제는 CurvedAnimation. parent에는 controller를 curve에는 애니메이션 흐름을 넣어준다.

  curve : flutter.dev

  late final Animation<double> _animation = CurvedAnimation(
     parent: _controller,
     curve: Curves.easeInOutBack,
   );

  ---

3. 사용
   회전하는 애니메이션

    @override
    Widget build(BuildContext context) {
      return RotationTransition(
        turns: _animation,
        child: widget.child,
      );
    }
   }

AnimatedBuilder

1. 컨트롤러(AnimationController) 생성

• 빌트인 위젯 참조

2. Bulider 생성

• animation : AnimationController 지정
• child : 애니메이션을 실행할 위젯
• builder : 구현할 애니메이션(Transform class사용)

        AnimatedBuilder(
          animation: _controller,
          child: widget.child,
          builder: (context, child) {
            return Transform.rotate(
              angle: (-0.35 + _controller.value) * 2.0 * pi,
              child: child,
            );
          },
        )

참조
@broccolism
Flutter 일기