본문 바로가기

Language/Dart

Flutter Animation

Flutter Animation

Source Structor

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'src/app.dart';

void main() {
  // debugPaintSizeEnabled = true;

  runApp(App());
}

src/app.dart

import 'package:flutter/material.dart';
import 'screens/home.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Home(),
    );
  }
}

Flutter Animation

  • Animation
    • Records the current 'value' of the property being animated.
      애니메이션되는 속성의 현재 '값'을 기록합니다.
    • Records the status of the animation (currently running, stoppend, etc).
      애니메이션 상태 (현재 실행 중, 중지 등)를 기록합니다.
    • status: 'stopped', status: '중지됨'
      yPosition: 110px.
  • AnimationController
    • Starts, stops, restars the animation.
      애니메이션 상태 (현재 실행 중, 중지 등)를 기록합니다.
    • Records the duration of the animation.
      애니메이션의 지속 시간을 기록합니다.
    • duration: 1 second, start(), stop().
  • Tween
    • Describes the rang that the value being animated spans.
      애니메이션되는 값이 확장되는 범위를 설명합니다.
    • start with a value of 0px
      end with a value of 200px.
  • AnimatedBuilder
    • Takes an animation and a 'builder' function.
      애니메이션 및 '빌더'기능을 수행합니다.
    • Every time the animation ticks (changes value), builder reruns.
      애니메이션이 틱 (값 변경) 할 때마다 빌더가 다시 실행됩니다.

Cat Position
Rotate with Transform.rotate
Transform.rotate Roation measured in radians

src/screens/home.dart

import 'package:flutter/material.dart';
import '../widgets/cat.dart';
import 'dart:math';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  Animation<double> catAnimation;
  AnimationController catController;
  Animation<double> boxAnimation;
  AnimationController boxController;

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

    boxController = AnimationController(
      duration: Duration(milliseconds: 200),
      vsync: this,
    );

    boxAnimation = Tween(
      begin: pi * 0.6,
      end: pi * 0.65,
    ).animate(
      CurvedAnimation(
        parent: boxController,
        curve: Curves.easeInOut,
      ),
    );

    boxAnimation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        boxController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        boxController.forward();
      }
    });

    catController = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this, // requried with TickerProviderStateMixin
    );

    catAnimation = Tween(
      begin: -35.0,
      end: -80.0,
    ).animate(
      CurvedAnimation(
        parent: catController,
        curve: Curves.easeIn,
      ),
    );
  }

  void onTap() {
    if (catController.status == AnimationStatus.completed) {
      catController.reverse();
      boxController.forward();
    } else if (catController.status == AnimationStatus.dismissed) {
      catController.forward();
      boxController.stop();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation!'),
      ),
      body: GestureDetector(
        child: Center(
          child: Stack(
            overflow: Overflow.visible,
            children: [
              buildCatAnimation(),
              buildBox(),
              buildLeftFlap(),
              buildRightFlap(),
            ],
          ),
        ),
        onTap: onTap,
      ),
    );
  }

  Widget buildCatAnimation() {
    return AnimatedBuilder(
      animation: catAnimation,
      builder: (context, child) {
        return Positioned(
          child: child,
          top: catAnimation.value,
          right: 0.0,
          left: 0.0,
        );
      },
      child: Cat(),
    );
  }

  Widget buildBox() {
    return Container(
      height: 200.0,
      width: 200.0,
      color: Colors.brown,
    );
  }

  buildLeftFlap() {
    return Positioned(
      left: 3.0,
      child: AnimatedBuilder(
        animation: boxAnimation,
        child: Container(
          height: 10.0,
          width: 125.0,
          color: Colors.brown,
        ),
        builder: (context, child) {
          return Transform.rotate(
            child: child,
            alignment: Alignment.topLeft,
            angle: boxAnimation.value,
          );
        },
      ),
    );
  }

  buildRightFlap() {
    return Positioned(
      right: 3.0,
      child: AnimatedBuilder(
        animation: boxAnimation,
        child: Container(
          height: 10.0,
          width: 125.0,
          color: Colors.brown,
        ),
        builder: (context, child) {
          return Transform.rotate(
            child: child,
            alignment: Alignment.topRight,
            angle: -boxAnimation.value,
          );
        },
      ),
    );
  }
}

src/widgets/cat.dart

import 'package:flutter/material.dart';

class Cat extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network('https://i.imgur.com/QwhZRyL.png');
  }
}

'Language > Dart' 카테고리의 다른 글

Flutter - FutureBuilder  (0) 2020.09.22
Flutter Animation  (0) 2020.09.21
Flutter BLoC, RxDart combineLatestStream BehaviorSubject On Submit  (0) 2020.09.18
Flutter BLoC, RxDart combineLatestStream  (0) 2020.09.17
Flutter BLoC, Scoped Instances  (0) 2020.09.16
Flutter BLoC, Single Global Instance  (0) 2020.09.15