Flutter 멋 진 3D 효과 구현 예시 코드

이 글 은 3 개의 멋 진 3D 애니메이션 효 과 를 설명 한다.
다음은 실현 해 야 할 효과 입 니 다.

Flutter 에서 3D 효 과 는 Transform 구성 요 소 를 통 해 이 루어 집 니 다.변환 효과 가 없습니다.

class TransformDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('3D   Demo'),
 ),
 body: Container(
 alignment: Alignment.center,
 color: Colors.white,
 child: Text('3D   Demo'),
 ),
 );
 }
}

GestureDetector 구성 요 소 를 통 해 미끄럼 이벤트 감청 추가:

@override
Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('3D   Demo'),
 ),
 body: GestureDetector(
 onPanUpdate: (details) {
 print('$details');
 },
 child: Container(
 alignment: Alignment.center,
 color: Colors.white,
 child: Text('3D   Demo'),
 ),
 ),
 );
}

Transform 을 추가 하여 구성 요 소 를 회전 시 킵 니 다:

@override
Widget build(BuildContext context) {
 return Transform(
 transform: Matrix4.identity()
 ..setEntry(3, 2, 0.001)
 ..rotateX(pi/6)
 ..rotateY(pi/6),
 alignment: Alignment.center,
 child: Scaffold(
 appBar: AppBar(
  title: Text('3D   Demo'),
 ),
 body: GestureDetector(
  onPanUpdate: (details) {
  },
  child: Container(
  alignment: Alignment.center,
  color: Colors.white,
  child: Text('3D   Demo'),
  ),
 ),
 ));
}

미끄럼 의 오프셋 과 회전 을 연결 합 니 다:

class TransformDemo extends StatefulWidget {
 @override
 _TransformDemoState createState() => _TransformDemoState();
}

class _TransformDemoState extends State<TransformDemo> {
 double _rotateX = .0;
 double _rotateY = .0;

 @override
 Widget build(BuildContext context) {
 return Transform(
 transform: Matrix4.identity()
  ..rotateX(_rotateX)
  ..rotateY(_rotateY),
 alignment: Alignment.center,
 child: Scaffold(
  appBar: AppBar(
  title: Text('3D   Demo'),
  ),
  body: GestureDetector(
  onPanUpdate: (details) {
  setState(() {
  _rotateX += details.delta.dy * .01;
  _rotateY += details.delta.dx * -.01;
  });
  },
  child: Container(
  alignment: Alignment.center,
  color: Colors.white,
  child: Text('3D   Demo'),
  ),
  ),
 ));
 }
}

기본적으로 3D 효 과 를 실 현 했 지만 효과 가 딱딱 하 다.특히 수직 방향 으로 회전 할 때 원점 과 가 까 운 점 이 화면 에 있 는 너비 가 같다.

크 고 작은 효과 추가:

Transform(
 transform: Matrix4.identity()
 ..setEntry(3, 2, 0.001)
 ..rotateX(_rotateX)
 ..rotateY(_rotateY),
 ...

책 뒤 집기 효과

위의 효 과 는 책 을 넘 기 는 효과 와 유사 하 다.
실현 의 원리:
그림 의 좌우 부분 을 두 부분 으로 자 르 고 두 장의 그림 은 모두 4 개의 새로운 구성 요소 로 나 누 는데 다음 과 같은 그림 은 각각 1,2,3,4 이다.

코드 구현:

_child1 = ClipRect(
 child: Align(
 alignment: Alignment.centerLeft,
 widthFactor: 0.5,
 child: child1,
 ),
);
_child2 = ClipRect(
 child: Align(
 alignment: Alignment.centerRight,
 widthFactor: 0.5,
 child: child1,
 ),
);

_child3 = ClipRect(
 child: Align(
 alignment: Alignment.centerLeft,
 widthFactor: 0.5,
 child: child2,
 ),
);

_child4 = ClipRect(
 child: Align(
 alignment: Alignment.centerRight,
 widthFactor: 0.5,
 child: child2,
 ),
);

첫 번 째 그림 을 두 번 째 그림 위 에 놓 고 먼저 구성 요소 2 를 0 도 에서 90 도 까지 회전 한 다음 에 구성 요소 3 을-90 도 에서 0 도 까지 회전 시 키 고 코드 실현:

Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Stack(
 children: [
 _child1,
 Transform(
  alignment: Alignment.centerRight,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.001)
  ..rotateY(_animation1.value),
  child: _child3,
 ),
 ],
 ),
 Container(
 width: 3,
 color: Colors.white,
 ),
 Stack(
 children: [
 _child4,
 Transform(
  alignment: Alignment.centerLeft,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.001)
  ..rotateY(_animation.value),
  child: _child2,
 )
 ],
 )
 ],
)

애니메이션 컨트롤 러 설정:

@override
void initState() {
 init();
 _controller =
 AnimationController(vsync: this, duration: Duration(seconds: 5))
 ..addListener(() {
  setState(() {});
 });
 _animation = Tween(begin: .0, end: pi / 2)
 .animate(CurvedAnimation(parent: _controller, curve: Interval(.0, .5)));
 _animation1 = Tween(begin: -pi / 2, end: 0.0).animate(
 CurvedAnimation(parent: _controller, curve: Interval(.5, 1.0)));
 _controller.forward();
 super.initState();
}

그 중에서 child 1,child 2 는 두 가지 그림 이 고 코드 는 다음 과 같다.

_FlipUpDemoState(
 Container(
 width: 300,
 height: 400,
 child: Image.asset(
 'assets/images/b.jpg',
 fit: BoxFit.cover,
 ),
 ),
 Container(
 width: 300,
 height: 400,
 child: Image.asset(
 'assets/images/c.jpeg',
 fit: BoxFit.cover,
 ),
 ))

마지막 으로 생 성 되 는 효 과 는 시작 되 는 책 뒤 집기 효과 다.
위 는 좌우 로 넘 기 는 효과 입 니 다.마찬가지 로 위아래 로 넘 기 는 효과 로 바 꿉 니 다.

@override
Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(),
 body: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Stack(
  children: [
  _upperChild1,
  Transform(
  alignment: Alignment.bottomCenter,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.003)
  ..rotateX(_animation1.value),
  child: _upperChild2,
  ),
  ],
 ),
 SizedBox(
  height: 2,
 ),
 Stack(
  children: [
  _lowerChild2,
  Transform(
  alignment: Alignment.topCenter,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.003)
  ..rotateX(_animation.value),
  child: _lowerChild1,
  )
  ],
 )
 ],
 ),
 );
}

여기 서 Flutter 가 멋 진 3D 효 과 를 실현 하 는 예제 코드 에 관 한 글 을 소개 합 니 다.더 많은 Flutter 가 멋 진 3D 효 과 를 실현 하 는 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!