flutter 充电气泡
创始人
2025-01-08 05:36:02
0

前言:

之前一直看到 有手机充电的时候 有气泡从Type-C 的位置冒泡上来 慢慢上移, 然后和上面的圆圈 会和,感觉还是挺好看的。今天试了下用 Flutter 实现了一版本。大致效果如下,而且气泡 和 气泡直接还可以粘黏

 实现原理:

大致的布局就是这样的: Stack 包裹住所有的元素,需要位置移动的是 AnimatedBuilder,这里是把他们独立出来,方便随机的时候打散处理。

代码实现:

  • PageBubble.dart 整个页面 气泡的粘连效果 有点吃性能
    import 'dart:math'; import 'dart:ui';  import 'package:flutter/material.dart'; import 'package:untitled1a/pages/example1/bubble_dot.dart';  class PageBubble extends StatefulWidget {   const PageBubble({Key? key}) : super(key: key);    @override   State createState() => _PageBubbleState(); }  class _PageBubbleState extends State     with SingleTickerProviderStateMixin {   late AnimationController _animationController;   final Random random = Random();   @override   void initState() {     _animationController = AnimationController(       vsync: this,       duration: const Duration(milliseconds: 2500),     );     _animationController.repeat();     super.initState();   }    @override   void dispose() {     _animationController.dispose();      // TODO: implement dispose     super.dispose();   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         backgroundColor: Theme.of(context).colorScheme.inversePrimary,         title: Text('充电气泡'),       ),       body: Align(         alignment: Alignment(0.0, 1),         child: Container(           height: MediaQuery.of(context).size.height / 3 * 2,           width: 250,           // color: Colors.blue,           child: Stack(             alignment: Alignment.topCenter,             children: [               ...buildAnimatedPositioned(),               Padding(                 padding: const EdgeInsets.only(                   top: 40,                   left: 0,                 ),                 child: RotationTransition(                   alignment: Alignment.center,                   turns: _animationController,                   child: Container(                     width: 200,                     height: 200,                     decoration: const BoxDecoration(                       color: Colors.deepPurple,                       borderRadius: BorderRadius.only(                         topRight: Radius.circular(70),                         topLeft: Radius.circular(90),                         bottomRight: Radius.circular(60),                         bottomLeft: Radius.circular(80),                       ),                     ),                   ),                 ),               ),               //这个效果很有意思 就是有费性能  不需要可以移除掉               BackdropFilter(                 filter: ImageFilter.dilate(radiusX: 3.0, radiusY: 3.0),                 child: Container(),               ),               Positioned(                 left: 35,                 top: 45,                 child: Container(                   width: 180,                   height: 180,                   decoration: BoxDecoration(                     color: Colors.black,                     borderRadius: BorderRadius.circular(90),                   ),                   child: const Center(                     child: Text(                       '89%',                       style: TextStyle(                         fontSize: 40,                         color: Colors.white,                       ),                     ),                   ),                 ),               ),             ],           ),         ),       ),     );   }    int getRandomNumber(int min, int max) {     var random = Random();     return min + random.nextInt(max - min + 1);   }    List buildAnimatedPositioned() {     List _list = [];     List.generate(         9,         (index) => {               _list.add(BubbleDot(time: getRandomNumber(2000, 3500))),             });      return _list;   } } 

  • BubbleDot.dart    气泡效果    之所以把气泡单独出来是为了后面的随机打散操作
    import 'dart:math'; import 'package:flutter/material.dart';  class BubbleDot extends StatefulWidget {   final int time;   const BubbleDot({super.key, required this.time});    @override   State createState() => _BubbleDotState(); }  class _BubbleDotState extends State     with SingleTickerProviderStateMixin {   late AnimationController _animationController;   late Animation _animation;   final Random random = Random();   late double _leftPos = 0;   late double _dotWidth = 0;   @override   void initState() {     _animationController = AnimationController(       vsync: this,       duration: Duration(milliseconds: widget.time),     );     _animation = _animationController.drive(         Tween(begin: getRandomNumber(660, 800).toDouble(), end: 100));     //_leftPos = random.nextDouble() * 200;     _leftPos = getRandomNumber(35, 180).toDouble();     _dotWidth = getRandomNumber(30, 66).toDouble();      _animationController.addStatusListener(         (AnimationStatus status) => {print('status  $status')});     _animationController.repeat();     // TODO: implement initState     super.initState();   }    @override   void dispose() {     // TODO: implement dispose     _animationController.dispose();     super.dispose();   }    @override   Widget build(BuildContext context) {     return AnimatedBuilder(       animation: _animation,       builder: (BuildContext context, Widget? child) {         return Positioned(           top: _animation.value,           //top: 240,           left: _leftPos,           child: ClipOval(             child: Container(               width: _dotWidth,               height: _dotWidth,               decoration: BoxDecoration(                 color: Colors.deepPurple,                 boxShadow: [                   BoxShadow(                     color: Colors.deepPurple.withOpacity(0.5),                     spreadRadius: 6,                     blurRadius: 8,                     offset: Offset(4, 4), // changes position of shadow                   ),                 ],               ),             ),           ),         );       },     );   }    int getRandomNumber(int min, int max) {     return min + random.nextInt(max - min + 1);   } } 

相关内容

热门资讯

2024新版教程!wpk辅助透... 2024新版教程!wpk辅助透视(德扑数据软件)其实真的有挂(详细透明挂教程)1、德扑数据软件系统规...
AI辅助!德扑之星刷数据(透视... AI辅助!德扑之星刷数据(透视)外挂透明挂辅助器安装(有挂存在)-哔哩哔哩1、让任何用户在无需AI插...
教你攻略!德州ai辅助器(德扑... 教你攻略!德州ai辅助器(德扑ai助手)其实真的是有挂(详细透视辅助教程)教你攻略!德州ai辅助器(...
教你攻略辅助!德扑数据分析软件... 教你攻略辅助!德扑数据分析软件(透明)外挂透明挂辅助app(有挂工具)-哔哩哔哩1、德扑数据分析软件...
wpk教程!wpk微扑克有辅助... wpk教程!wpk微扑克有辅助吗(wepoke模拟器)原来确实真的有挂(详细透视辅助教程)1、这是跨...
2024新版总结辅助!德州辅助... 2024新版总结辅助!德州辅助软件线上(透视)外挂透明挂辅助插件(真的有挂)-哔哩哔哩1、下载好德州...
透明挂教程!wepoke软件收... 透明挂教程!wepoke软件收费是真的吗(德州之星辅助)原来真的是有挂(详细辅助挂教程)1)wepo...
2024新版技巧辅助!wepo... 2024新版技巧辅助!wepoke游戏数据有说法吗(透视)外挂透明挂辅助器安装(有挂详情)-哔哩哔哩...
技巧教程!pokerworld... 技巧教程!pokerworld下载(WPK透视辅助)原来真的有挂(详细透明挂教程);1分钟了解详细教...
德州论坛辅助!wpk外挂被实锤... 德州论坛辅助!wpk外挂被实锤(透明)外挂透明挂辅助app(有挂分析)-哔哩哔哩是一款可以让一直输的...