Flutter-16 - 라우팅 애니메이션

위 코드: 주 입구 방법: import'package:flutter/material.dart'; import 'pages.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title:'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home:FirstPage() ); } }
pages.dart 페이지의 작성: import'package:flutter/material.dart'; class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue, appBar:AppBar( title:Text('FirstPage',style: TextStyle(fontSize: 36.0)), elevation: 0.0, ), body:Center( child: MaterialButton( child: Icon( Icons.navigate_next, color:Colors.white, size:64.0, ), onPressed: (){ Navigator.of(context).push( MaterialPageRoute( builder:(BuildContext context){ return SecondPage(); })); }, ), ) ); } }
class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pinkAccent, appBar: AppBar( title: Text('SecondPage',style:TextStyle(fontSize:36.0),), backgroundColor: Colors.pinkAccent, leading:Container(), elevation: 0.0, ), body:Center( child: MaterialButton( child: Icon( Icons.navigate_before, color:Colors.white, size:64.0 ), onPressed: ()=>Navigator.of(context).pop(), ), ) ); } }
위 코드에는 다음과 같은 새로운 지식이 포함되어 있습니다.
AppBar Widger의 elevation 속성: 이 값은 AppBar가 스크롤할 때의 융합 정도입니다. 일반적으로 스크롤할 때 기본값은 4.0입니다. 현재 우리는 0.0으로 설정했는데 이것은main과 완전히 융합되었습니다.이 페이지 코드를 다 쓴 후에 가장 기본적인 내비게이션을 할 수 있지만 멋진 애니메이션은 없다.
사용자 정의CustomRoute Widget
새 customerouter.dart 파일, 이것은 사용자 정의 루트 방법입니다. 사용자 정의는 먼저 일반적인 루트를 계승하는 구조기 클래스인 PageRouter Builder입니다.상속 후 부류를 다시 쓰는 CustomRoute 구조 방법.구조 방법은 간단하게 이해할 수 있다. 이 클래스나 Widget을 호출하기만 하면 구조 방법의 모든 코드가 실행된다.
import 'package:flutter/material.dart'; class CustomRoute extends PageRouteBuilder{ final Widget widget; CustomRoute(this.widget) :super( transitionDuration:const Duration(seconds:1), pageBuilder:( BuildContext context, Animation animation1, Animation animation2){ return widget; }, transitionsBuilder:( BuildContext context, Animation animation1, Animation animation2, Widget child){ return FadeTransition( opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation( parent:animation1, curve:Curves.fastOutSlowIn )), child: child, ); }

); 

}
4

FadeTransition: 점차적인 전환 효과, 주로opactiy(투명도) 속성을 설정합니다. 값은 0.0-1.0입니다

4

animate: 애니메이션 스타일은 일반적으로 애니메이션 커브 어셈블리(Curved Animation)를 사용합니다

4

curve: 애니메이션의 리듬을 설정한다. 즉, 흔히 말하는 곡선이다. Flutter는 많은 리듬을 준비했는데 애니메이션을 바꾸어 취소하면 다양한 효과를 얻을 수 있다

4

transitionDuration: 애니메이션의 지속 시간을 설정하고 1과 2 사이를 권장합니다

라우팅 애니메이션 배율 조정
return ScaleTransition( scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation( parent:animation1, curve: Curves.fastOutSlowIn )), child:child ); 회전 + 배율 조정 라우팅 애니메이션
회전+축소의 사고방식은 하나의 루트 애니메이션의child 속성에 하나의 애니메이션을 추가하여 두 애니메이션이 동시에 실행되도록 하는 것이다.세부 코드를 보려면 다음과 같이 하십시오.
return RotationTransition( turns:Tween(begin:0.0,end:1.0) .animate(CurvedAnimation( parent: animation1, curve: Curves.fastOutSlowIn )), child:ScaleTransition( scale:Tween(begin: 0.0,end:1.0) .animate(CurvedAnimation( parent: animation1, curve:Curves.fastOutSlowIn )), child: child, ) );
좌우 슬라이딩 라우팅 애니메이션
실용적으로 많이 하는 것은 좌우 슬라이딩 루트 애니메이션인데 사실 실현도 매우 간단하기 때문에 SlideTransition을 직접 사용하면 된다.
//슬라이드 라우팅 애니메이션return SlideTransition(position: Tween(begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0)).animate(CurvedAnimation( parent: animation1, curve: Curves.fastOutSlowIn )), child: child, );