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);   } } 

相关内容

热门资讯

专业讨论!德扑之星真破解套路(... 专业讨论!德扑之星真破解套路(辅助挂)软件透明挂(有挂了解)-哔哩哔哩;人气非常高,ai更新快且高清...
每日必看!智星德州菠萝外挂检测... 每日必看!智星德州菠萝外挂检测(辅助挂)软件透明挂(有挂教学)-哔哩哔哩1、玩家可以在智星德州菠萝外...
透视透明挂!轰趴十三水有后台(... 轰趴十三水有后台赢率提升策略‌;透视透明挂!轰趴十三水有后台(辅助挂)软件透明挂(有挂详情)-哔哩哔...
发现玩家!德扑ai助手软件(辅... 发现玩家!德扑ai助手软件(辅助挂)透视辅助(有挂教学)-哔哩哔哩;玩家在德扑ai助手软件中需先进行...
一分钟了解!x-poker辅助... 一分钟了解!x-poker辅助软件(辅助挂)辅助透视(有挂攻略)-哔哩哔哩1、每一步都需要思考,不同...
一分钟揭秘!德州最新辅助器(辅... 一分钟揭秘!德州最新辅助器(辅助挂)透视辅助(有挂攻略)-哔哩哔哩;德州最新辅助器最新版本免费下载安...
玩家攻略推荐!德州辅助(辅助挂... 玩家攻略推荐!德州辅助(辅助挂)辅助透视(有挂了解)-哔哩哔哩是由北京得德州辅助黑科技有限公司精心研...
揭秘真相!pokernow德州... 《揭秘真相!pokernow德州(辅助挂)辅助透视(有挂介绍)-哔哩哔哩》 pokernow德州软件...
五分钟了解!德州之星辅助器(辅... 五分钟了解!德州之星辅助器(辅助挂)辅助透视(有挂透明)-哔哩哔哩1、很好的工具软件,可以解锁游戏的...
推荐一款!pokermaste... 1、推荐一款!pokermaster有外挂(辅助挂)透视辅助(有挂教学)-哔哩哔哩;详细教程。2、p...