怎么在网站上建设投票统计,河南新乡做网站公司,做网站卖彩票,网站搭建服务平台前言#xff1a; 之前一直看到 有手机充电的时候 有气泡从Type-C 的位置冒泡上来 慢慢上移#xff0c; 然后和上面的圆圈 会和#xff0c;感觉还是挺好看的。今天试了下用 Flutter 实现了一版本。大致效果如下#xff0c;而且气泡 和 气泡直接还可以粘黏 实现原理#xff… 前言 之前一直看到 有手机充电的时候 有气泡从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);overrideStatePageBubble createState() _PageBubbleState();
}class _PageBubbleState extends StatePageBubblewith SingleTickerProviderStateMixin {late AnimationController _animationController;final Random random Random();overridevoid initState() {_animationController AnimationController(vsync: this,duration: const Duration(milliseconds: 2500),);_animationController.repeat();super.initState();}overridevoid dispose() {_animationController.dispose();// TODO: implement disposesuper.dispose();}overrideWidget 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);}ListWidget buildAnimatedPositioned() {ListWidget _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});overrideStateBubbleDot createState() _BubbleDotState();
}class _BubbleDotState extends StateBubbleDotwith SingleTickerProviderStateMixin {late AnimationController _animationController;late Animationdouble _animation;final Random random Random();late double _leftPos 0;late double _dotWidth 0;overridevoid initState() {_animationController AnimationController(vsync: this,duration: Duration(milliseconds: widget.time),);_animation _animationController.drive(Tweendouble(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 initStatesuper.initState();}overridevoid dispose() {// TODO: implement dispose_animationController.dispose();super.dispose();}overrideWidget 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);}
}
