闪烁浮动效果:
import 'package:flutter/material.dart';
class FlickerAnimation extends StatefulWidget {
final String iconPath;
FlickerAnimation({this.iconPath});
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _FlickerAnimation();
}
}
class _FlickerAnimation extends State<FlickerAnimation> with TickerProviderStateMixin{
/*height = Tween<double>(
begin:.0 ,
end: 300.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.0, 0.6, //间隔,前60%的动画时间
curve: Curves.ease,
),
),
);*/
/*color = ColorTween(
begin:Colors.green ,
end:Colors.red,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.0, 0.6,//间隔,前60%的动画时间
curve: Curves.ease,
),
),
);*/
/*padding = Tween<EdgeInsets>(
begin:EdgeInsets.only(left: .0),
end:EdgeInsets.only(left: 100.0),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.6, 1.0, //间隔,后40%的动画时间
curve: Curves.ease,
),
),
);*/
AnimationController animationController;
Animation<double> opacity;
Animation<EdgeInsets> padding;
@override
void initState() {
// TODO: implement initState
super.initState();
animationController = new AnimationController(
duration: Duration(milliseconds: 630),
vsync: this);
opacity = Tween<double>(
begin: 0.0 ,
end: 1.0,
).animate(
CurvedAnimation(
parent: animationController,
curve: Interval(
0.0, 1.0, //间隔,前60%的动画时间
curve: Curves.ease,
),
),
);
padding = Tween<EdgeInsets>(
begin:EdgeInsets.only(bottom: .0),
end:EdgeInsets.only(bottom: 20.0),
).animate(
CurvedAnimation(
parent: animationController,
curve: Interval(
0.0, 1.0, //间隔,后40%的动画时间
curve: Curves.ease,
),
),
);
animationController.addStatusListener((status) {
if(status == AnimationStatus.completed){
animationController.reverse();
}else if(status == AnimationStatus.dismissed){
animationController.forward();
}
});
animationController.forward();
}
@override
void dispose() {
// TODO: implement dispose
animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return onActivityCreate(context);
}
@override
onActivityCreate(BuildContext context) {
// TODO: implement onActivityCreate
return AnimatedBuilder(
builder: _buildAnimation,
animation: animationController
);
}
Widget _buildAnimation(BuildContext context, Widget child) {
return Container(
padding: padding.value,
alignment: Alignment.bottomCenter,
height: 80.0,
width: 80.0,
//color: Colors.red,
child: Opacity(
child: ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.black, Colors.transparent],
).createShader(Rect.fromLTRB(0.0, 0.0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: Image.asset(widget.iconPath,width: 50.0,height: 50.0),
),
opacity: opacity.value,
)
);
}
}
引用:
Container(
color: Colors.white,
width: 200.0,
height: 200.0,
child: FlickerAnimation(iconPath: 'assets/image/f_image.webp',),)