当用户按下容器时,我想同时使用动画来旋转渐变,我想增加容器的尺寸。
[当我使用容器而不是AnimatedContainer渐变动画按预期方式工作,但是当我用AnimatedContainer替换Container时,渐变动画无法正常工作(意思是:将0旋转到2 * math.pi之后,它会再次重置,然后开始动画,我希望它不断旋转。)
import 'package:flutter/material.dart';
import 'dart:math' as math;
class Delete extends StatefulWidget {
Delete({Key key}) : super(key: key);
@override
_DeleteState createState() => _DeleteState();
}
class _DeleteState extends State<Delete> with SingleTickerProviderStateMixin {
Animation<double> _animation;
AnimationController _controller;
double _playButtonSize = 170;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 10));
_animation = Tween<double>(begin: 0, end: 2 * math.pi).animate(_controller)
..addListener(() {
setState(() {});
});
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: Container(
child: GestureDetector(
onLongPress: () {
setState(() {
_playButtonSize = 185;
});
},
onLongPressEnd: (end) {
setState(() {
_playButtonSize = 170;
});
},
child: AnimatedContainer(
duration: Duration(milliseconds: 100),
width: _playButtonSize,
height: _playButtonSize,
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: SweepGradient(
colors: [
Colors.blue,
Colors.pink,
Colors.orange,
Colors.yellow,
Colors.blue
],
center: Alignment(-0.50, -0.0),
endAngle: _animation.value + (2 * math.pi),
startAngle: _animation.value,
tileMode: TileMode.repeated,
),
boxShadow: [
BoxShadow(
color: Colors.white,
blurRadius: 4.0,
),
],
),
child: Icon(
Icons.email,
size: 50,
)),
),
));
}
}
如果将AnimatedContainer
与另一个父级Container
交换,则两个动画都将起作用:
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: AnimatedContainer(
duration: Duration(milliseconds: 100),
width: _playButtonSize,
height: _playButtonSize,
child: GestureDetector(
onLongPress: () {
setState(() {
_playButtonSize = 185;
});
},
onLongPressEnd: (end) {
setState(() {
_playButtonSize = 170;
});
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: SweepGradient(
colors: [
Colors.blue,
Colors.pink,
Colors.orange,
Colors.yellow,
Colors.blue
],
center: Alignment(-0.50, -0.0),
endAngle: _animation.value + (2 * math.pi),
startAngle: _animation.value,
tileMode: TileMode.repeated,
),
boxShadow: [
BoxShadow(
color: Colors.white,
blurRadius: 4.0,
),
],
),
child: Icon(
Icons.email,
size: 50,
)
),
),
)
);