[译] 在 Flutter 中实现微光闪烁效果
import 'package:flutter/material.dart';
class TwinklingLight extends StatefulWidget {
@override
_TwinklingLightState createState() => _TwinklingLightState();
}
class _TwinklingLightState extends State<TwinklingLight> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
width: 100.0,
height: 100.0,
color: Colors.transparent,
child: AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return Opacity(
opacity: _animation.value,
child: Container(
width: 100.0,
height: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
);
},
),
);
}
}
这段代码定义了一个名为TwinklingLight
的微光闪烁效果的Widget,它使用了AnimationController
和AnimatedBuilder
来创建一个持续进行闪烁的圆形容器。代码简洁,注重教学,值得学习和借鉴。
评论已关闭