\ud50c\ub7ec\ud130\ub294 \ub2e4\uc591\ud55c \uba40\ud2f0\ubbf8\ub514\uc5b4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI) \uc560\ub2c8\uba54\uc774\uc158\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uace0, \uc571\uc758 \uc804\ubc18\uc801\uc778 \ud488\uc9c8\uc744 \ub192\uc774\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \uc6b0\uc120, \uadf8 \ud6c4, \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud55c \ud6c4, \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ud1b5\ud574 \uc544\ub798 \uc608\uc81c \ucf54\ub4dc\ub294 \uac04\ub2e8\ud55c Fade-In \uc560\ub2c8\uba54\uc774\uc158\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n \uc704 \ucf54\ub4dc\ub294 \ud14d\uc2a4\ud2b8\uac00 1\ucd08 \ub3d9\uc548 \uc11c\uc11c\ud788 \ub098\ud0c0\ub098\ub294 \ud6a8\uacfc\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. flutter_animate \ud328\ud0a4\uc9c0\ub294 \ub2e4\uc591\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uba87 \uac00\uc9c0 \uc560\ub2c8\uba54\uc774\uc158 \uae30\ubc95\uc785\ub2c8\ub2e4:<\/p>\n \ub2e4\uc74c\uc740 \uc5ec\ub7ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n flutter_animate\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc18d\uc131\ub4e4\uc744 \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc9c0\uc18d \uc2dc\uac04, \uc2dc\uc791 \uc9c0\uc810, \ub05d \uc9c0\uc810\uc744 \uc9c0\uc815\ud558\uc5ec \ub354\uc6b1 \uc138\ubc00\ud55c \uc870\uc815\uc744 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n \uc704\uc758 \uc608\uc81c\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc5d0 \ub300\ud55c \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574, \ubc84\ud2bc\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\uc5ec \ub354\uc6b1 \ub9e4\ub825\uc801\uc778 UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \ubc84\ud2bc \ud074\ub9ad \uc2dc \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \ucd94\uac00\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n \ub9ac\uc2a4\ud2b8 \uc544\uc774\ud15c\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\uba74, \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354\uc6b1 \uc0dd\ub3d9\uac10 \uc788\ub294 UI\ub97c \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub9ac\uc2a4\ud2b8\uc758 \uac01 \uc544\uc774\ud15c\uc774 \uc0c8\ub85c \ucd94\uac00\ub420 \ub54c\ub9c8\ub2e4 \ud398\uc774\ub4dc \uc778 \ud6a8\uacfc\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc560\ub2c8\uba54\uc774\uc158\uc740 UI\ub97c \ub354\uc6b1 \ub9e4\ub825\uc801\uc73c\ub85c \ub9cc\ub4e4\uc9c0\ub9cc, \uc9c0\ub098\uce58\uac8c \ub9ce\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\uba74 \uc131\ub2a5 \uc800\ud558\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ub2e4\uc74c\uacfc \uac19\uc740 \ucd5c\uc801\ud654 \uc9c0\uce68\uc744 \ub530\ub974\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub354\uc6b1 \uc790\uc138\ud55c \uc815\ubcf4\ub97c \uc6d0\ud55c\ub2e4\uba74 \uc5ec\uae30<\/a>\ub97c \ubc29\ubb38\ud574 \uc8fc\uc138\uc694. \uc9c8\ubb38\uc774\ub098 \ud544\uc694\ud558\uc2e0 \uc0ac\ud56d\uc740 \uc5b8\uc81c\ub4e0\uc9c0 \ub313\uae00\ub85c \ub0a8\uaca8\uc8fc\uc2dc\uba74 \ub429\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"flutter_animate<\/code> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uc5ec Flutter \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n1. flutter_animate\ub780?<\/h2>\n
flutter_animate<\/code>\ub294 Flutter\uc5d0\uc11c \uac04\ud3b8\ud558\uac8c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \ud328\ud0a4\uc9c0\uc785\ub2c8\ub2e4. \uc774 \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uba74 \ub2e4\uc591\ud55c \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \uc190\uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\uc73c\uba70, \uc560\ub2c8\uba54\uc774\uc158\uc758 \ubcf5\uc7a1\ub3c4\ub97c \uc904\uc5ec\uc8fc\ub294 \uae30\ub2a5\ub4e4\uc744 \uc81c\uacf5\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \ub354\uc6b1 \ud6a8\uc728\uc801\uc73c\ub85c \uc791\uc5c5\ud560 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/p>\n2. flutter_animate \ud328\ud0a4\uc9c0 \uc124\uce58\ud558\uae30<\/h2>\n
flutter_animate<\/code> \ud328\ud0a4\uc9c0\ub97c \ud504\ub85c\uc81d\ud2b8\uc5d0 \ud3ec\ud568\uc2dc\ucf1c\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c\ub294 pubspec.yaml<\/code> \ud30c\uc77c\uc5d0\uc11c \ud574\ub2f9 \ud328\ud0a4\uc9c0\ub97c \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\ndependencies:\n flutter:\n sdk: flutter\n flutter_animate: ^2.0.0 # \uc5ec\uae30\uc11c \ud544\uc694\ud55c \ubc84\uc804\uc744 \uc785\ub825\ud558\uc138\uc694.\n<\/code><\/pre>\nflutter pub get<\/code><\/pre>\n3. \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n
flutter_animate<\/code>\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n3.1 \uae30\ubcf8 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc<\/h3>\n
import 'package:flutter\/material.dart';\nimport 'package:flutter_animate\/flutter_animate.dart';\n\nclass MyHomePage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Flutter Animate Example'),\n ),\n body: Center(\n child: Container(\n child: Text('\uc774 \ud14d\uc2a4\ud2b8\ub294 \ud398\uc774\ub4dc \uc778 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.')\n .animate()\n .fadeIn(duration: 1.seconds),\n ),\n ),\n );\n }\n}\n<\/code><\/pre>\n.animate()<\/code> \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud55c \ud6c4, \uc6d0\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uccb4\uc774\ub2dd\ud558\uc5ec \uc801\uc6a9\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n3.2 \ub2e4\uc591\ud55c \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9\ud558\uae30<\/h3>\n
\n
.fadeIn()<\/code> – \uc694\uc18c\uac00 \uc11c\uc11c\ud788 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.<\/li>\n.fadeOut()<\/code> – \uc694\uc18c\uac00 \uc11c\uc11c\ud788 \uc0ac\ub77c\uc9d1\ub2c8\ub2e4.<\/li>\n.scale()<\/code> – \uc694\uc18c\uc758 \ud06c\uae30\ub97c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/li>\n.slide()<\/code> – \uc694\uc18c\ub97c \ud654\uba74\uc758 \ud55c \ucabd\uc5d0\uc11c \ub2e4\ub978 \ucabd\uc73c\ub85c \uc774\ub3d9\uc2dc\ud0b5\ub2c8\ub2e4.<\/li>\n.rotate()<\/code> – \uc694\uc18c\ub97c \ud68c\uc804\uc2dc\ud0b5\ub2c8\ub2e4.<\/li>\n<\/ul>\nclass AnimatedMultiEffect extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Multiple Animation Effects'),\n ),\n body: Center(\n child: Container(\n child: Text('\uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\uac00 \uc5ec\ub7ec \uac1c \uc801\uc6a9\ub429\ub2c8\ub2e4!')\n .animate()\n .fadeIn(duration: 1.seconds)\n .scale(begin: 0.5, end: 1.0)\n .slideX(begin: -1.0, end: 0.0)\n .rotate(begin: 0.0, end: 1.0)\n .start(delay: 300.milliseconds),\n ),\n ),\n );\n }\n}\n<\/code><\/pre>\n4. \uc560\ub2c8\uba54\uc774\uc158 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5<\/h2>\n
class CustomAnimationExample extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Custom Animation Example'),\n ),\n body: Center(\n child: Container(\n child: Text('\uc560\ub2c8\uba54\uc774\uc158\uc758 \uc18d\uc131\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4!')\n .animate()\n .fadeIn(duration: 2.seconds, curve: Curves.easeIn)\n .scale(begin: 0.0, end: 1.5, duration: 2.seconds)\n .start(),\n ),\n ),\n );\n }\n}\n<\/code><\/pre>\nfadeIn<\/code> \uc560\ub2c8\uba54\uc774\uc158\uc5d0 Curves.easeIn<\/code> \ucee4\ube0c\ub97c \ucd94\uac00\ud558\uc5ec \ubd80\ub4dc\ub7fd\uac8c \ub098\ud0c0\ub098\ub3c4\ub85d \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \ub610\ud55c \uc2a4\ucf00\uc77c \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc9c0\uc18d \uc2dc\uac04\uc744 \uc124\uc815\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc758 \ud750\ub984\uc744 \uc870\uc808\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n5. \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud65c\uc6a9\ud55c \uc2e4\uc81c \uc608\uc81c<\/h2>\n
5.1 \ubc84\ud2bc\uc5d0 \uc560\ub2c8\uba54\uc774\uc158 \ucd94\uac00\ud558\uae30<\/h3>\n
class AnimatedButton extends StatefulWidget {\n @override\n _AnimatedButtonState createState() => _AnimatedButtonState();\n}\n\nclass _AnimatedButtonState extends State5.2 \ub9ac\uc2a4\ud2b8 \uc544\uc774\ud15c\uc5d0 \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9\ud558\uae30<\/h3>\n
class AnimatedListExample extends StatelessWidget {\n final List6. \ucd5c\uc801\ud654 \ubc0f \uc131\ub2a5<\/h2>\n
\n
7. \uacb0\ub860<\/h2>\n
flutter_animate<\/code> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uc5ec Flutter \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uace0, \ub354\uc6b1 \ub9e4\ub825\uc801\uc778 UI\ub97c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc55e\uc73c\ub85c\uc758 \ud504\ub85c\uc81d\ud2b8\ub4e4\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uadf9 \ud65c\uc6a9\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4!<\/p>\n