# smart_home_animated_app_flutter **Repository Path**: ggbhack/smart_home_animated_app_flutter ## Basic Information - **Project Name**: smart_home_animated_app_flutter - **Description**: smart_home_animated_app_flutter - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2023-11-12 - **Last Updated**: 2024-03-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # smart_home_animated_app_flutter A new Flutter project. [项目初始化代码](https://gitee.com/ggbhack/smart_home_animated_app_flutter) ## P03 卡片动画交互 1. 定义 roomSelectorNotifier = -1 2. Background information card ```dart Transform.scale( scale: lerpDouble(0.85, 1.2, value), child: Padding( padding: const EdgeInsets.only(bottom: 180), child: BackgroundRoomCard(room: room, translation: value), ), ) ``` 3. 滑动的处理+展开 ```dart expand: selected != -1, onSwipeUp: () => roomSelectorNotifier.value = index, onSwipeDown: () => roomSelectorNotifier.value = -1, ``` 4. 卡片上移动 ```dart Padding( padding: const EdgeInsets.only(bottom: 200), child: Transform( transform: Matrix4.translationValues(0, -90 * value, 0), child: GestureDetector( onTap: onTap, onVerticalDragUpdate: (details) { if (details.primaryDelta! < -10) onSwipeUp(); if (details.primaryDelta! > 10) onSwipeDown(); }, child: Stack( fit: StackFit.expand, clipBehavior: Clip.none, children: [ ParallaxImageCard( imageUrl: room.imageUrl, parallaxValue: percent, ), VerticalRoomTitle(room: room), const CameraIconButton(), const AnimatedUpwardArrows() ], ), ), ), ), ``` 5. 隐藏 indicator + 指示器处理 ```dart AnimatedOpacity( duration: const Duration(microseconds: 100), opacity: selecteRoom == -1 ? 1 : 0, child: Center( child: PageViewIndicators( length: SmartRoom.fakeValues.length, pageIndex: page, ), ), ``` 6. 隐藏 bottom_navigation_bar ```dart AnimatedOpacity( duration: const Duration(milliseconds: 200), opacity: selecedRoom == -1 ? 1 : 0, child: AnimatedContainer( duration: const Duration(milliseconds: 200), transform: Matrix4.translationValues(0, selecedRoom == -1 ? 0 : -30, 0), child: Padding( padding: const EdgeInsets.all(20), child: ... ), ), ), ); ``` 6. pageView的偏倚 ```dart //值是否为负数 double _getOffsetX(double percent) => percent.isNegative ? 30 : -30; Matrix4 _getOutTranslate( {required double percent, required int selectedRoom, required int index}) { final double x = selectedRoom != index && selectedRoom != -1 ? _getOffsetX(percent) : 0; return Matrix4.translationValues(x, 0, 0); } ``` ## p04 step ### 控制台报警告 (ticker active) was disposed with an active Ticker. 处理 [shimmer_arrows.dart](lib/core/shared/presentation/widgets/shimmer_arrows.dart) ### pageIndex [page_indicators.dart](lib/features/home/presentation/widgets/page_indicators.dart) ### PageRouteBuilder+FadeTransition [smart_room_page_view.dart](lib/features/home/presentation/widgets/smart_room_page_view.dart) ### Hero动画 Hero小部件有一个名为flightShuttleBuilder的可选参数，它是一个回调函数，用于构建在共享元素飞行期间显示的小部件。它的作用是为共享元素转场动画期间的临时小部件提供自定义构建过程。 [room_card.dart](lib/core/shared/presentation/widgets/room_card.dart) ### flightShuttleBuilder [room_card.dart](lib/core/shared/presentation/widgets/room_card.dart) ```dart // 共享元素小部件的动画自定义 flightShuttleBuilder: (_, animation, __, ___, ____) { // 构建自定义Hero动画 return AnimatedBuilder( animation: animation, builder: (context, _) => Material( type: MaterialType.transparency, child: RoomDetailItems( animation: animation, topPadding: context.mediaQuery.padding.top, room: room, ), ), ); }, ``` 知识点： AlwaysStoppedAnimation用于创建静态的、不发生变化的动画对象，用于满足需要接受动画对象的属性的要求，但不需要实际动画效果的情况。 [room_details_screen](lib/features/smart_room/screens/room_details_screen.dart) ### 详情页面动画 #### 背景虚拟化动画 [room_detail_screen.dart](lib/features/smart_room/screens/room_details_screen.dart) final sigma = animation.value * 10; #### BACK动画 [room_details_page_view.dart](lib/features/smart_room/widgets/room_details_page_view.dart) ```dart SlideTransition( position: Tween( begin: const Offset(-1, 1), end: Offset.zero, ).animate(animation), child:xxx ) ``` ### 卡片 曲线动画 知识点： 在Flutter中，CurvedAnimation是一个用于创建动画曲线的类。它可以与其他动画类（如TweenAnimation）结合使用，以改变动画的速度和进度。 使用CurvedAnimation，您可以通过应用不同的曲线函数来调整动画的速度和进度。Flutter提供了一些内置的曲线函数，如Curves.linear（线性）、Curves.easeIn（加速）、Curves.easeOut（减速）等。您还可以自定义曲线函数来实现更复杂的动画效果。 知识点： Interval(0.4, 1, curve: Curves.easeIn)表示在动画的时间范围为0.4到1之间使用Curves.easeIn曲线函数。这意味着在动画的前40%时间内，动画将以较慢的速度开始，然后在接下来的60%时间内加速。 ```dart Animation get _interval1 => CurvedAnimation( parent: animation, curve: const Interval(0.4, 1, curve: Curves.easeIn), ); Animation get _interval2 => CurvedAnimation( parent: animation, curve: const Interval(0.6, 1, curve: Curves.easeIn), ); Animation get _interval3 => CurvedAnimation( parent: animation, curve: const Interval(0.8, 1, curve: Curves.easeIn), ); SlideTransition( position: Tween( begin: const Offset(0, 2), end: Offset.zero, ).animate(_interval3), child: FadeTransition( opacity: _interval3, child: AirConditionerControlsCard( room: room, )), ), ``` #### title FadeTransion Animated output elements [room_details_screen.dart](lib/features/smart_room/screens/room_details_screen.dart) ```dart final outDx = 200 * animation.value; final outDy = 100 * animation.value; FadeTransition( opacity: Tween(begin: 1, end: 0).animate(animation), child: Stack( children: [ // make it better //VerticalRoomTitle(room: room), // const CameraIconButton(), //const AnimatedUpwardArrows(), // make it better Transform.translate( offset: Offset(-outDx, 0), child: VerticalRoomTitle( room: room, ), ), Transform.translate( offset: Offset(outDx, outDy), child: const CameraIconButton(), ), Transform.translate( offset: Offset(0, outDy), child: const AnimatedUpwardArrows(), ), ], ), ) ``` ### R‚oom controls 从上到下动画 [room_details_screen.dart](lib/features/smart_room/screens/room_details_screen.dart) ```dart FadeTransition( opacity: animation, child: Container( padding: EdgeInsets.only(top: topPadding + 12), transform: Matrix4.translationValues( 0, -200 * (1 - animation.value), 0), child:[], ) ) ```