当我用 animatedbuilder 点击它时,我如何让我的动画重复? flutter/dart
How I do make my animation repeat when I click on it with animatedbuilder? flutter/dart
我正在制作自定义动画按钮。每次用户点击它时,我都想重复动画。所以当用户点击它时,容器会变大。并且 returns 到正常大小。当用户再次点击它时,它会再次点击。现在动画只是按比例放大到定义的大小并停止。之后它什么都不做。
class CustomAnimation extends StatefulWidget {
@override
_CustomAnimationState createState() => _CustomAnimationState();
}
class _CustomAnimationState extends State<CustomAnimation> with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
// TODO: implement initState
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_controller.addListener(() {
setState(() {
//do something
});
});
_controller.forward();
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: _controller.view,
builder: (context,child){
return Transform.scale(scale: _controller.value *.9,
child: Container(
width: 200,
height: 200,
color: Colors.lightGreen[200],
child: Center(
child: Text('Animation test'),
),
),
);
},
),
)
);
}
}
您可以复制粘贴 运行 下面的完整代码
您可以收听 AnimationStatus.completed
并拨打 _controller.reverse()
并使用 InkWell
调用 _controller.forward();
animation = Tween<double>(begin: 1.0, end: 1.2).animate(_controller)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
}
});
...
return Transform.scale(
scale: animation.value,
child: InkWell(
onTap: () {
_controller.forward();
},
工作演示
完整代码
import 'package:flutter/material.dart';
class CustomAnimation extends StatefulWidget {
@override
_CustomAnimationState createState() => _CustomAnimationState();
}
class _CustomAnimationState extends State<CustomAnimation>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> animation;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
_controller.addListener(() {
setState(() {
//do something
});
});
_controller.forward();
animation = Tween<double>(begin: 1.0, end: 1.2).animate(_controller)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
}
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: animation,
builder: (context, child) {
return Transform.scale(
scale: animation.value,
child: InkWell(
onTap: () {
_controller.forward();
},
child: Container(
width: 200,
height: 200,
color: Colors.lightGreen[200],
child: Center(
child: Text('Animation test'),
),
),
),
);
},
),
));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: CustomAnimation(),
);
}
}
我正在制作自定义动画按钮。每次用户点击它时,我都想重复动画。所以当用户点击它时,容器会变大。并且 returns 到正常大小。当用户再次点击它时,它会再次点击。现在动画只是按比例放大到定义的大小并停止。之后它什么都不做。
class CustomAnimation extends StatefulWidget {
@override
_CustomAnimationState createState() => _CustomAnimationState();
}
class _CustomAnimationState extends State<CustomAnimation> with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
// TODO: implement initState
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_controller.addListener(() {
setState(() {
//do something
});
});
_controller.forward();
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: _controller.view,
builder: (context,child){
return Transform.scale(scale: _controller.value *.9,
child: Container(
width: 200,
height: 200,
color: Colors.lightGreen[200],
child: Center(
child: Text('Animation test'),
),
),
);
},
),
)
);
}
}
您可以复制粘贴 运行 下面的完整代码
您可以收听 AnimationStatus.completed
并拨打 _controller.reverse()
并使用 InkWell
调用 _controller.forward();
animation = Tween<double>(begin: 1.0, end: 1.2).animate(_controller)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
}
});
...
return Transform.scale(
scale: animation.value,
child: InkWell(
onTap: () {
_controller.forward();
},
工作演示
完整代码
import 'package:flutter/material.dart';
class CustomAnimation extends StatefulWidget {
@override
_CustomAnimationState createState() => _CustomAnimationState();
}
class _CustomAnimationState extends State<CustomAnimation>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> animation;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
_controller.addListener(() {
setState(() {
//do something
});
});
_controller.forward();
animation = Tween<double>(begin: 1.0, end: 1.2).animate(_controller)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
}
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: animation,
builder: (context, child) {
return Transform.scale(
scale: animation.value,
child: InkWell(
onTap: () {
_controller.forward();
},
child: Container(
width: 200,
height: 200,
color: Colors.lightGreen[200],
child: Center(
child: Text('Animation test'),
),
),
),
);
},
),
));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: CustomAnimation(),
);
}
}