Flutter ListView 확장 및 뒤집기 애니메이션
이 애니메이션은 주로 이 훌륭한 강연에서 영감을 받았습니다Marcin Szałek | Flutter Europe.
뒤집기 및 확장 애니메이션
코드는 expand_with_flip 분기의 동일한 GitHub 프로젝트에서 사용할 수 있습니다.
편의상 메인 클래스는 다음과 같습니다.
ExpandListTile
import 'package:flutter/material.dart';
import 'dart:math' as math;
class ExpandListTile extends StatefulWidget {
const ExpandListTile(
{Key key,
this.expandedChild,
this.collapsedChild,
this.expandedHeight = 300.0,
this.collapsedHeight = 70.0,
this.duration = const Duration(milliseconds: 500),
this.curve = Curves.ease})
: super(key: key);
final Widget expandedChild;
final Widget collapsedChild;
final double expandedHeight;
final double collapsedHeight;
final Duration duration;
final Curve curve;
@override
_ExpandListTileState createState() => _ExpandListTileState();
}
class _ExpandListTileState extends State<ExpandListTile>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _flipAnimation;
Animation _expandAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: widget.duration);
_flipAnimation = CurvedAnimation(
parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.ease));
_expandAnimation = CurvedAnimation(
parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.ease));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior
.translucent, //IMPORTANT: allows "empty" spaces to respond to events
onTap: (() => setState(() {
_toggle();
// _isExpanded = !_isExpanded;
})),
child: AnimatedBuilder(
animation: _flipAnimation,
builder: (context, child) {
var currentHeight = widget.collapsedHeight +
(widget.expandedHeight - widget.collapsedHeight) *
_expandAnimation.value;
return SizedBox(
// height: widget.expandedHeight,
height: currentHeight,
child: Stack(
children: [
Transform.translate(
offset: Offset(
0, -widget.collapsedHeight * (_flipAnimation.value)),
child: Transform(
alignment: Alignment.bottomCenter,
transform: Matrix4.identity()
..setEntry(2, 3, 0.001)
..rotateX(-math.pi / 2 * _flipAnimation.value),
child: widget.collapsedChild,
),
),
Transform.translate(
offset: Offset(
0, -widget.collapsedHeight * (_flipAnimation.value - 1)),
child: Transform(
alignment: Alignment.topCenter,
transform: Matrix4.identity()
..setEntry(2, 3, 0.001)
..rotateX(math.pi * (1 - _flipAnimation.value) / 2),
child: OverflowBox(
maxHeight: widget.expandedHeight,
child: widget.expandedChild,
),
),
)
],
),
);
},
),
);
}
void _toggle() {
if (_controller.status == AnimationStatus.completed ||
_controller.status == AnimationStatus.forward) {
_controller.reverse();
} else {
_controller.forward();
}
}
}
나는 이 게시물을 짧게 유지하고 있지만 이것이 사람들의 관심을 불러일으키면 구현에 대한 자세한 내용을 추가할 수 있습니다.
Reference
이 문제에 관하여(Flutter ListView 확장 및 뒤집기 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devjourney/flutter-listview-expand-and-flip-animation-5295텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)