Flutter---设备搜索动画效果（2）

详细介绍：优化成双色渐变版本

效果图：

关键点

把通用圆形设置为双色渐变，把动画值设置给透明度

代码实例

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class DemoPage extends StatefulWidget{ const DemoPage({super.key}); @override State<StatefulWidget> createState() => _DemoPageState(); } class _DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin{ late AnimationController _controller; //动画控制器 late Animation<double> _sizeAnimation; late Animation<double> _colorAnimation; late Animation<double> _size1Animation; late Animation<double> _color1Animation; late Animation<double> _size2Animation; late Animation<double> _color2Animation; late Animation<double> _size3Animation; late Animation<double> _color3Animation; @override void initState(){ super.initState(); //初始化动画控制器 _controller = AnimationController( vsync: this, duration: Duration(seconds: 4) ); //TweenSequence - 动画序列 ；TweenSequenceItem - 序列项 _sizeAnimation = TweenSequence<double>([ TweenSequenceItem(tween:Tween<double>(begin: 50,end:130), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 130,end:210), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 210,end:290), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 290,end:50), weight: 1.0 ), ]).animate( CurvedAnimation(parent: _controller, curve: Curves.linear), ); _colorAnimation = TweenSequence<double>([ TweenSequenceItem( tween: Tween<double>(begin: 1.0,end: 0.7), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.7,end: 0.4), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.4,end: 0.1), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.0,end: 0.0), weight: 1.0, ), ]).animate(CurvedAnimation(parent: _controller, curve: Curves.linear)); _size1Animation = TweenSequence<double>([ TweenSequenceItem(tween:Tween<double>(begin: 130,end:210), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 210,end:290), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 290,end:50), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 50,end:130), weight: 1.0 ), ]).animate( CurvedAnimation(parent: _controller, curve: Curves.linear), ); _color1Animation = TweenSequence<double>([ TweenSequenceItem( tween: Tween<double>(begin: 0.7,end: 0.4), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.4,end: 0.1), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.0,end: 0.0), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 1.0,end: 0.7), weight: 1.0, ), ]).animate(CurvedAnimation(parent: _controller, curve: Curves.linear)); _size2Animation = TweenSequence<double>([ TweenSequenceItem(tween:Tween<double>(begin: 210,end:290), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 290,end:50), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 50,end:130), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 130,end:210), weight: 1.0 ), ]).animate( CurvedAnimation(parent: _controller, curve: Curves.linear), ); _color2Animation = TweenSequence<double>([ TweenSequenceItem( tween: Tween<double>(begin: 0.4,end: 0.1), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.0,end: 0.0), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 1.0,end: 0.7), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.7,end: 0.4), weight: 1.0, ), ]).animate(CurvedAnimation(parent: _controller, curve: Curves.linear)); _size3Animation = TweenSequence<double>([ TweenSequenceItem(tween:Tween<double>(begin: 290,end:50), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 50,end:130), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 130,end:210), weight: 1.0 ), TweenSequenceItem(tween:Tween<double>(begin: 210,end:290), weight: 1.0 ), ]).animate( CurvedAnimation(parent: _controller, curve: Curves.linear), ); _color3Animation = TweenSequence<double>([ TweenSequenceItem( tween: Tween<double>(begin: 0.0,end: 0.0), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 1.0,end: 0.7), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.7,end: 0.4), weight: 1.0, ), TweenSequenceItem( tween: Tween<double>(begin: 0.4,end: 0.1), weight: 1.0, ), ]).animate(CurvedAnimation(parent: _controller, curve: Curves.linear)); _controller.repeat(); //动画重复 } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Stack( children: [ // 动画部分 Center( child: AnimatedBuilder( animation: _controller, builder: (context, child) { return Stack( alignment: Alignment.center, children: [ _buildAnimatedCircle( size: _size3Animation.value, colorValue: _color3Animation.value, ), _buildAnimatedCircle( size: _size2Animation.value, colorValue: _color2Animation.value, ), _buildAnimatedCircle( size: _size1Animation.value, colorValue: _color1Animation.value, ), _buildAnimatedCircle( size: _sizeAnimation.value, colorValue: _colorAnimation.value, ), ], ); }, ), ), ], ), ), ); } // ============================构建动画圆形的通用方法========================== Widget _buildAnimatedCircle({ required double size, required double colorValue, Widget? child, }) { return Container( width: size, height: size, decoration: BoxDecoration( gradient: LinearGradient( begin: AlignmentGeometry.topCenter, end: AlignmentGeometry.bottomCenter, colors: [ Color(0xFF00E1FF).withOpacity(colorValue), Color(0xFF248EFF).withOpacity(colorValue), ] ), shape: BoxShape.circle, ), child: child != null ? Center(child: child) : null, ); } }