[ Flutter ] 애니메이션

Hero

💬  화면 전환시 자연스럽게 연결되는 애니메이션을 지원

💬  이전 화면으로 돌아갈 때도 자연스럽게 애니메이션이 동작한다.

💬  애니메이션 효과의 대상이 되는 양쪽 화면의 위젯을 Hero 위젯으로 감싸고, tag 프로퍼티를 반드시 동일하게 지정해야 한다.

// 첫 번째 페이지
class HeroPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => HeroDetailPage()),
            );
          },
          child: Hero(
            tag: 'image',  // 여기서 작성한 태그와 두 번째 태그가 동일해야 함
            child: Image.asset(
              'assets/sample.jpg',
              width: 100,
              height: 100,
            ),
          ),
        ),
      ),
    );
  }
}

// 두 번째 페이지
class HeroDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero Detail'),
      ),
      body: Hero(
        tag: 'image',  // 여기서 작성한 태그와 첫 번째 태그가 동일해야 함
        child: Image.asset('assets/sample.jpg'),
      ),
    );
  }
}

 

AnimatedContainer

💬  한 화면 내에서 setState() 함수를 호출하여 화면을 새로 그릴 때 변경된 프로퍼티에 의해 애니메이션된다.

💬  상태를 변경시키면서 애니메이션이 적용되므로 StatefulWidget으로 작성한다.

AnimatedContainer(
  duration: Duration(seconds: 1),  // 1초 동안 애니메이션 적용
  width: 100.0,                    // 가로 길이
  height: 150.0,                   // 세로 길이
  child: [위젯],
  curve: Curves.fastoutSlowIn,     // 미리 정의된 애니메이션 효과
),

💬  100 x 100 크기의 이미지를 탭하면 100 ~ 299 크기로 랜덤하게 크기가 변경되어 애니메이션 되는 예시

import 'dart:math';  // Random 클래스 사용에 필요

...

class _AnimatedContainerPageState extends State<AnimatedContainerPage> {
  var _size = 100.0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            final random = Random();  // Random 클래스 사용 준비
            setState(() {
              // 클릭할 때마다 100.0~299.0 사이의 실수를 랜덤하게 얻기
              _size = random.nextInt(200).toDouble() + 100;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _size,   // 랜덤한 값을 적용
            height: _size,  // 랜덤한 값을 적용
            child: Image.asset('assets/sample.jpg'),
            curve: Curves.fastOutSlowIn,
          ),
        ),
      ),
    );
  }
}

  ▫  setState() 함수에 의해 다시 그려질 때 AnimatedContainer 위젯은 이전 _size 값에서 새로 갱신된 _size 값까지 1초 동안 fastOutSlowIn에 정의된 효과가 적용되며 애니메이션된다.

 

SliverAppBar와 SliverFillRemaining

💬  SliverAppBar와 SliverFillRemaining은 화면 헤더를 동적으로 표현하는 위젯이다.

💬  헤더를 위로 스크롤하면 헤더 부분이 작아지면서 헤더 하단에 있던 정적인 내용만 보이는 AppBar 형태로 애니메이션되며, 이러한 효과를 Sliver 효과라고 한다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(                       // 헤더 영역
          pinned: true,                     // 축소시 상단에 AppBar가 고정되는지 설정
          expandedHeight: 180.0,            // 헤더의 최대 높이
          flexibleSpace: FlexibleSpaceBar(  // 늘어나는 영역의 UI 정의
            title: Text('Sliver'),
            background: Image.asset(
              'assets/sample.jpg',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverFillRemaining(                // 내용 영역
          child: Center(
            child: Text('center'),
          ),
        ),
      ],
    ),
  );
}

▫  Scaffold의 appBar를 지정하지 않고 body에 CustomScrollView의 인스턴스를 지정했다.

▫  CustomScrollView의 slivers 프로퍼티에 SliverAppBar와 SliverFillRemaining 위젯을 설정한다.

▫  SliverAppBar 위젯의 Sliver 효과를 위한 최소한의 프로퍼티

  ▫  pinned : 축소될 때 상단에 AppBar가 고정될지 사라질지 설정한다.

  ▫  expandedHeight : 확대될 때의 최대 높이를 정한다.

  ▫  flexibleSpace : 확대/축소되는 영역의 UI를 작성한다.

▫  flexibleSpace 위젯은 title과 background 프로퍼티를 활용하여 적절히 AppBar 영역이 확장되었을 때의 UI를 작성한다.

▫  SliverFillRemaining 위젯에는 스크롤 영역에 표시될 화면을 정의한다.

  ▫  child에 작성한 내용의 크기가 작아도 SliverAppBar 부분이 축소될 때 딱 하나의 크기가 알아서 결정된다.

 

SliverAppBar와 SliverList

💬  ListView를 사용하여 Sliver 효과를 주고 싶다면, ListView 대신 SliverList를 사용해야 한다.

// 'No.0'에서 'No.49'까지 표시하는 ListTile을 담은 리스트
final _items = List.generate(50, (i) => ListTile(title: Text('No.$i')));

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true,
          expandedHeight: 180.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Sliver'),
            background: Image.asset(
              'assets/sample.jpg',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverList(
          // 생성자에 표시할 위젯 리스트(_items)를 인수로 전달
          delegate: SliverChildListDelegate(_items),
        ),
      ],
    ),
  );
}

 

Staggered Animations

💬  위젯의 Opacity, Width, Height, Padding, BorderRadius, Color 등을 이전 값과 이후 값으로 interval에 맞춰서 변경하는 애니메이션

https://youtu.be/0fFvnZemmh8

구현부

import 'package:flutter/material.dart';

class StaggerAnimation extends StatelessWidget {
  StaggerAnimation({Key? key, required this.controller})
      :      
        opacity = Tween<double>(
          begin: 0.0,  // 애니메이션 시작
          end: 1.0,    // 애니메이션 끝
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(  // 0에서 1까지 애니메이션 적용 시점
              0.0,
              0.100,
              curve: Curves.ease,
            ),
          ),
        ),
        width = Tween<double>(
          begin: 50.0,
          end: 150.0,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.125,
              0.250,
              curve: Curves.ease,
            ),
          ),
        ),
        height = Tween<double>(begin: 50.0, end: 150.0).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.250,
              0.375,
              curve: Curves.ease,
            ),
          ),
        ),
        padding = EdgeInsetsTween(
          begin: const EdgeInsets.only(bottom: 16.0),
          end: const EdgeInsets.only(bottom: 75.0),
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.250,
              0.375,
              curve: Curves.ease,
            ),
          ),
        ),
        borderRadius = BorderRadiusTween(
          begin: BorderRadius.circular(4.0),
          end: BorderRadius.circular(75.0),
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.375,
              0.500,
              curve: Curves.ease,
            ),
          ),
        ),
        color = ColorTween(
          begin: Colors.indigo[100],
          end: Colors.orange[400],
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.500,
              0.750,
              curve: Curves.ease,
            ),
          ),
        ),
        super(key: key);

  final Animation<double> controller;
  final Animation<double> opacity;
  final Animation<double> width;
  final Animation<double> height;
  final Animation<EdgeInsets> padding;
  final Animation<BorderRadius?> borderRadius;
  final Animation<Color?> color;

  Widget _buildAnimation(BuildContext context, Widget? child) {
    return Container(
      padding: padding.value,                  // 애니메이션 적용
      alignment: Alignment.bottomCenter,
      child: Opacity(
        opacity: opacity.value,                // 애니메이션 적용
        child: Container(
          width: width.value,                  // 애니메이션 적용
          height: height.value,                // 애니메이션 적용
          decoration: BoxDecoration(
            color: color.value,                // 애니메이션 적용
            border: Border.all(
              color: Colors.indigo[300]!,
              width: 3.0,
            ),
            borderRadius: borderRadius.value,  // 애니메이션 적용
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}

실행부

import 'dart:async';

import 'package:flutter/scheduler.dart' show timeDilation;

class StaggerDemo extends StatefulWidget {
  const StaggerDemo({Key? key}) : super(key: key);

  @override
  _StaggerDemoState createState() => _StaggerDemoState();
}

class _StaggerDemoState extends State<StaggerDemo>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
  }

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

  Future<void> _playAnimation() async {
    try {
      await _controller.forward().orCancel;  // 애니메이션 정방향 실행
      await _controller.reverse().orCancel;  // 애니메이션 역방향 실행
    } on TickerCanceled {
      // the animation got canceled, probably because we were disposed
    }
  }

  @override
  Widget build(BuildContext context) {
    timeDilation = 10.0;  // 1.0 is normal animation speed.
    return Scaffold(
      appBar: AppBar(
        title: const Text('Staggered Animation'),
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          _playAnimation();
        },
        child: Center(
          child: Container(
            width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.1),
              border: Border.all(
                color: Colors.black.withOpacity(0.5),
              ),
            ),
            // 애니메이션 적용 : 애니메이션 + 위젯
            child: StaggerAnimation(controller: _controller.view),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      home: StaggerDemo(),
    ),
  );
}