字体放大效果-补间动画
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
title: "字体放大动画",
home: FontAnimation(),
));
class FontAnimation extends StatefulWidget {
_FontAnimation createState() => _FontAnimation();
}
class _FontAnimation extends State<FontAnimation>
with SingleTickerProviderStateMixin {
@override
//补间动画
Animation<double> tween;
//动画控制对象
AnimationController controller;
/*初始化状态*/
initState() {
super.initState();
/*
* Duration 动画时间
* vsync:防止动画离屏之后继续消耗资源
* */
controller = AnimationController(
duration: const Duration(microseconds: 9000000), vsync: this);
tween = Tween(begin: 0.0, end: 1.0).animate(controller)
..addListener(() {
setState(() {
print(tween.value);
});
});
controller.forward(); //执行动画
}
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('字体放大动画'),
),
//添加手势组件
body: GestureDetector(
onTap: () {},
child: Center(
child: Text(
'字体放大特效',
style: TextStyle(fontSize: 60 * controller.value),
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
startAnimation();
},
backgroundColor: Colors.red,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
startAnimation() {
setState(() {
controller.forward(from: 0.0);
});
}
@override
void dispose() {
// TODO: implement dispose
//控制器销毁对象
controller.dispose();
super.dispose();
}
}
缓动动画
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MaterialApp(
title: "缓动动画",
home: EasingAnimation(),
));
class EasingAnimation extends StatefulWidget {
_EasingAnimation createState() => _EasingAnimation();
}
class _EasingAnimation extends State<EasingAnimation>
with TickerProviderStateMixin {
@override
//补间动画
Animation _animation;
//动画控制对象
AnimationController _controller;
/*初始化状态*/
initState() {
super.initState();
/*
* Duration 动画时间
* vsync:防止动画离屏之后继续消耗资源
* */
_controller =
AnimationController(duration: const Duration(seconds: 10), vsync: this);
_animation = Tween(begin: 0.0, end: 0.5).animate(
//非线性动画
CurvedAnimation(
parent: _controller,
//缓动动画,决定了运动的轨迹,快出慢进
curve: Curves.fastOutSlowIn,
))
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
//移除状态监听
_animation.removeStatusListener((status) {});
//动画重置
_controller.reset();
//再次创建补间对象,从0-到1进行估值
_animation = Tween(begin: 0.0, end: 0.5).animate(
CurvedAnimation(parent: _controller, curve: Curves.fastLinearToSlowEaseIn))
..addStatusListener((status) {
if (status == AnimationStatus.completed) {}
});
//执行动画
_controller.forward();
}
});
//执行动画
_controller.forward();
}
Widget build(BuildContext context) {
//计算当前页面宽度
final double width = MediaQuery.of(context).size.width;
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('缓动动画'),
),
//添加手势组件
body: AnimatedBuilder(
//动画控制器
animation: _controller,
builder: (context, child) {
return Transform(
transform:
Matrix4.translationValues(_animation.value * width, 0.0, 0.0),
child: Center(
child: Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
),
);
},
));
}
@override
void dispose() {
// TODO: implement dispose
//控制器销毁对象
_controller.dispose();
super.dispose();
}
}
3.遮罩动画
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MaterialApp(
title: "遮罩动画",
home: MaskAnimation(),
));
//遮罩动画
class MaskAnimation extends StatefulWidget {
@override
_MaskAnimation createState() => _MaskAnimation();
}
class _MaskAnimation extends State<MaskAnimation>
with TickerProviderStateMixin {
AnimationController _controller;
//容器宽高值补间对象
Animation<double> transitionTween;
//容器边框弧度补间对象
Animation<BorderRadius> borderRadius;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller =
AnimationController(duration: Duration(seconds: 10), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
print("动画完成喽");
}
});
//补间对象
transitionTween = Tween<double>(begin: 50.0, end: 200.0)
.animate(CurvedAnimation(parent: _controller, curve: Curves.ease));
borderRadius = BorderRadiusTween(
begin: BorderRadius.circular(75.0),
end: BorderRadius.circular(0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.ease,
));
//执行动画
// _controller.forward();
}
@override
void dispose() {
// TODO: implement dispose
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return Scaffold(
appBar: AppBar(
title: Text('遮罩动画'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_controller.forward();
},
),
body: Center(
//使用组件
child: Stack(
children: <Widget>[
Center(
child: Container(
width: 200,
height: 200,
color: Colors.lightGreen,
),
),
Center(
child: Container(
// alignment: Alignment.bottomCenter,
width: transitionTween.value,
height: transitionTween.value,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: borderRadius.value,
),
),
)
],
),
),
);
},
);
}
}
4.数字动画
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MaterialApp(
title: "数字动画",
home: ValueAnimation(),
));
//遮罩动画
class ValueAnimation extends StatefulWidget {
@override
_ValueAnimation createState() => _ValueAnimation();
}
class _ValueAnimation extends State<ValueAnimation>
with TickerProviderStateMixin {
AnimationController _controller;
//容器宽高值补间对象
Animation _animation;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller =
AnimationController(duration: Duration(seconds: 10), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
print("动画完成喽");
}
});
//补间动画-IntTween
final Animation curve =
CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
_animation = IntTween(begin: 0, end: 30).animate(curve)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
//当动画完成后,执行翻转动画,如0-10,10-1
_controller.reverse();
}
});
//执行动画
// _controller.forward();
}
@override
void dispose() {
// TODO: implement dispose
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return Scaffold(
appBar: AppBar(
title: Text('数字变化'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_controller.forward();
},
),
body: Center(
child: Text(
_animation.value.toString(),
style: TextStyle(fontSize: 30),
),
),
);
},
);
}
}
5.图表动画
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
title: "图标动画",
home: ChartsAnimation(),
));
class ChartsAnimation extends StatefulWidget {
@override
_ChartsAnimation createState() => _ChartsAnimation();
}
class _ChartsAnimation extends State<ChartsAnimation> {
//定义图标高度
var height = 100.0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('图标动画'),
),
body: Center(
child: Container(
height: 400,
alignment: AlignmentDirectional.bottomStart,
child: InkWell(
onTap: () {
setState(() {
height = 320;
});
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedContainer(
//动画时长
duration: Duration(seconds: 1),
width: 40,
height: height - 40,
color: Colors.red,
),
AnimatedContainer(
//动画时长
margin: EdgeInsets.only(left: 10),
duration: Duration(seconds: 1),
width: 40,
height: height - 10,
color: Colors.orange,
),
AnimatedContainer(
//动画时长
margin: EdgeInsets.only(left: 10),
duration: Duration(seconds: 1),
width: 40,
height: height - 50,
color: Colors.greenAccent,
),
AnimatedContainer(
//动画时长
margin: EdgeInsets.only(left: 10),
duration: Duration(seconds: 1),
width: 40,
height: height - 20,
color: Colors.yellow,
),
],
),
),
),
),
);
}
}
网友评论