페이지 이동 에니메이션
애니메이션을 세밀하게 조정하기
secondPage2.dart
더보기
import 'package:flutter/material.dart';
import 'dart:math';
class SecondPage2 extends StatefulWidget {
const SecondPage2({Key? key}) : super(key: key);
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage2>
with SingleTickerProviderStateMixin {
// 애니메이션 컨트롤러, 애니메이션 객체 만들기
// ↱ AnimationController -> 프레임마다 새로운 값을 생성하는 애니메이션
// (지정된 시간 동안 선형보간법을 이용해 시작점부터 끝점 사이의 숫자를 -> 초당 60개씩 생성)
late AnimationController _animationController;
late Animation _rotateAnimation;
late Animation _scaleAnimation;
late Animation _transAnimation;
@override
void initState(){
super.initState();
// ↱ 애니메이션 재생시간 ↱애니메이션 표현할 대상
_animationController = AnimationController(duration: Duration(seconds: 5), vsync: this);
// ↱ 기본적으로 생성해주는 애니메이션 컨트롤러 숫자의 범위는 0.0 ~ 1.0 임 -> 다른 범위, 데이터 유형이 필요한 경우 사용
_rotateAnimation = Tween<double>(begin: 0, end: pi * 10).animate(_animationController); // 화전
_scaleAnimation = Tween<double>(begin: 1, end: 0).animate(_animationController); // 크기
_transAnimation = Tween<Offset>(begin: Offset(0,0), end: Offset(200,200)).animate(_animationController); //위젯의 방향
}
@override
void dispose() {
super.dispose();
_animationController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('애니메이션 예제2'),
),
body: Container(
child: Center(
child: Column(
children: [
AnimatedBuilder(
animation: _rotateAnimation,
// ↱ 애니메이션 어떻게 보여줄지 정의하기
builder: (context, widget){
return Transform.translate( // 위젯의 방향 설정
offset: _transAnimation.value,
child: Transform.rotate( // 위젯의 회전
angle: _rotateAnimation.value,
child: Transform.scale( // 위젯의 크기를 조절
scale: _scaleAnimation.value,
child: widget,
),
),
);
},
child: Hero(
tag: 'detail1',
child: Icon(Icons.cake, size: 300,)
),
),
// ignore: deprecated_member_use
RaisedButton(
onPressed: (){
_animationController.forward();
},
child: Text('로테이션 시작하기'),
),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
);
}
}
나만의 인트로 화면 만들기
인트로 화면의 애니매이션 만들기 saturnLoading.dart
더보기
import 'package:flutter/material.dart';
import 'dart:math';
class SaturnLoading extends StatefulWidget {
const SaturnLoading({Key? key}) : super(key: key);
@override
_SaturnLoadingState createState() => _SaturnLoadingState();
void start(){
_SaturnLoadingState().start();
}
void stop(){
_SaturnLoadingState().stop();
}
}
class _SaturnLoadingState extends State<SaturnLoading>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation _animation;
@override
void initState(){
super.initState();
// 3초동안 동작하는 애니메이션
_animationController = AnimationController(vsync :this, duration: Duration(seconds: 3));
// 애니메이션 시작점과 끝점 정의하기
_animation = Tween<double>(begin: 0, end: pi * 2).animate(_animationController);
_animationController.repeat();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
void start(){
_animationController.repeat();
}
void stop(){
_animationController.stop(canceled: true);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, child){
return SizedBox(
width: 100,
height: 100,
child: Stack(
children: [
Image.asset(
'repo/images/circle.png',
width: 100,
height: 100,
),
Center(
child: Image.asset(
'repo/images/sunny.png',
width: 30,
height: 30,
),
),
Padding(
padding: EdgeInsets.all(5),
child: Transform.rotate(
angle: _animation.value,
origin: Offset(35, 35), // 회전의 기준점 지정
child: Image.asset(
'repo/images/saturn.png',
width: 20,
height: 20,
),
),
),
],
),
);
});
}
}
애니메이션 보여줄 인트로 화면 (애니메이션 보여주다가 5초 후 메인으로 이동) animation_intro.dart
더보기
import 'package:flutter/material.dart';
import 'package:psw1/animation/saturnLoading.dart';
import 'dart:async';
import 'package:psw1/main_animation.dart';
class AnimationIntroPage extends StatefulWidget {
const AnimationIntroPage({Key? key}) : super(key: key);
@override
_AnimationIntroPageState createState() => _AnimationIntroPageState();
}
class _AnimationIntroPageState extends State<AnimationIntroPage> {
@override
void initState(){
super.initState();
loadData();
}
// 5초후 메인 화면으로 이동하기
Future<Timer> loadData() async {
return Timer(Duration(seconds: 5), onDoneLoading);
}
onDoneLoading() async{
Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context)=> AnimationApp()));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: Column(
children: [
Text('애니메이션 앱!~'),
SizedBox(
height: 20,
),
SaturnLoading() // 애니메이션 페이지 풀러오기
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
);
}
}
'Flutter > 기본2' 카테고리의 다른 글
| 애니메이션1 - Curvers 사용해 구현 (AnimatedContainer, AnimatedOpacity) (0) | 2021.07.07 |
|---|---|
| 파일에 데이터 저장하기 (path_provider, (0) | 2021.07.01 |
| 공유 환경설정에 데이터 저장하기 (SharedPreferences, (0) | 2021.07.01 |
| 할일 기록 앱 만들기 (pushNamed, pushReplacementNamed, ModalRoute, (0) | 2021.07.01 |
| 라우트로 페이지 이동하기 (initialRoute, routes, (0) | 2021.07.01 |
