[Flutter] Animation

플루터는 Animation을 값의 변화와 시간을 통해 표현함.

ex) opacity 1.0->0.0으로 변할때 2초가 걸린다 하면,

2초라는 정해진 시간 값(duration)동안 duration 변화(animation)을 구현하는 것.

1. package 추가

import package:flutter/animation.dart

2. Animation class

Flutter의 Animation 시스템은 Animation 클래스를 기반으로 구성되어있음.

• value: animation의 현재 값, Animation<T>라고 선언하는데 이 value의 타입이 T이다.
• status: AnimationStatus(animation의 상태를 나타내는 enum 타입) 타입으로 진행 방향(forward, reverse)과 상태(completed, dismissed)를 표현할 수 있음.
• addListener, addStatusListener: 이 method 들을 통해 value와 status의 값의 변화를 알려주는 listener를 등록함.

3. Animation 적용해보기

Animated[Style]

간단한 애니매이션을 구현할 때 사용하는것. 종류 => AnimatedScale, AnimatedSize, AnimatedOpacity, AnimatedPadding,...

ex) AnimatedOpacity: opacityValue의 값을 변경해서 애니메이션 효과를 줌.

AnimatedOpacity(
  opacity: opacityValue,
  duration: Duration(seconds: 1),
  child: FlutterLogo(
    size: 100.0,
  ),
),

AnimationController

조금 더 복잡한 애니메이션을 설정할 때 사용함.

설정할 수 있는 속성들 => value, duration, reverseDuration, lowerBound(default: 0.0), upperBound(default: 1.0) 등.

class _AnimationControllerPageState 
	extends State<AnimationControllerPage> 
	with SingleTickerProviderStateMixin {
  Animation<double> _animation;
  AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );
    _animation.addListener(() {
      setState(() {
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return scafford(
      appBar: AppBar(...),
      body: <Widget> [
        Text(
        'AnimationController value:${_animation.value.toStringAsFixed(2)}',
        ),
        Container(
          height: _animation.value*100,
          width: _animation.value*100,
          child: FlutterLogo(),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            RaisedButton(
              child: Text("forward"),
              onPressed: () => _controller.forward(),
            ),
            RaisedButton(
              child: Text("stop"),
              onPressed: () => _controller.stop(),
            ),
            RaisedButton(
              child: Text("reverse"),
              onPressed: () => _controller.reverse(),
            ), 
          ],
        )
      ]
    )
  }
}

 

AnimatedWidget

AnimatedWidget({Key key, @required Listenable listenable})

key에 들어가는 것들

 

• RotationTransition, which animates the rotation of a widget.
• ScaleTransition, which animates the scale of a widget.
• SizeTransition, which animates its own size.
• FadeTransition, which is an animated version of Opacity.
• SlideTransition, which animates the position of a widget relative to its normal position.
• AlignTransition, which is an animated version of Align.
• DecoratedBoxTransition, which is an animated version of DecoratedBox.
• DefaultTextStyleTransition, which is an animated version of DefaultTextStyle.
• PositionedTransition, which is an animated version of Positioned.
• RelativePositionedTransition, which is an animated version of Positioned.
• AnimatedBuilder, which is useful for complex animation use cases and a notable exception to the naming scheme of AnimatedWidget subclasses.
• AnimatedModalBarrier, which is an animated version of ModalBarrier.

RotationTransition

회전 애니메이션 이거와 비슷한 Transition 시리즈도 많다..

RotationTransition({
    Key key, @required Animation<double> turns, 
    Alignment alignment: Alignment.center, Widget child})

 

일단 기본적인 것만 정리하고 다양한 종류는 https://api.flutter.dev/flutter/widgets/ImplicitlyAnimatedWidget-class.html  여기를 참고하면 된다.