如何解决同一属性上的颤动交错动画
我想为小部件的比例设置动画。 点击时,它应按比例缩小;点击时,应按比例放大。
问题是如何在同一属性上使用staggered animations?
SO(Chaining seperate animations that work on the same properties)上还有一个较旧的问题,但没有有效的答案。
我已经尝试调整其解决方案,但是问题是,即使未达到指定的Interval
,每个动画侦听器也会被调用。
我添加了一个条件来检查是否设置了_animationFuture
,但是使用这种模式,您必须为小部件中正在运行的任何动画保留一个值,这有点麻烦。
是否有不需要解决的“本机”解决方案,或者只是不支持具有相同值的多个动画?
我不想reverse()
动画。每个补间必须能够具有自定义曲线,开始和结束值。
在这里放置我的小部件:
class AnimatedIconButton extends StatefulWidget {
final Widget child;
final Function onPress;
AnimatedIconButton({@required this.child,this.onPress}): assert(child != null);
@override
_AnimatedIconButtonState createState() => _AnimatedIconButtonState();
}
class _AnimatedIconButtonState extends State<AnimatedIconButton> with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation<double> _animationIn;
Animation<double> _animationOut;
double _scale = 1;
TickerFuture _animationFuture;
Function get onPress => widget.onPress ?? () => null;
_tapDown(TapDownDetails details) {
print("_tapDown progress=${_animationController.value} scale=$_scale");
_animationFuture = _animationController.animateTo(0.5);
}
_tapUp(TapUpDetails details) {
assert(_animationFuture != null);
print("_tapUp progress=${_animationController.value} scale=$_scale");
_animationFuture.then((_) {
_animationFuture = null;
_animationController.animateTo(1);
});
}
@override
void initState() {
super.initState();
_animationController = AnimationController(value: 0,vsync: this,duration: const Duration(milliseconds: 1500),animationBehavior: AnimationBehavior.preserve);
_animationIn = Tween<double>(begin: 1.0,end: 0.9).animate(CurvedAnimation(
parent: _animationController,curve: Interval(
0,0.5,curve: Curves.easeOut,),))..addListener(() {
if (_animationFuture == null) return;
print("_animationIn.value ${_animationOut.value}");
_scale = _animationIn.value;
});
_animationOut = Tween<double>(begin: 0.9,end: 1).animate(CurvedAnimation(
parent: _animationController,curve: Interval(
0.5,1,curve: Curves.elasticOut,))..addListener(() {
if (_animationFuture != null) return;
print("_animationOut.value ${_animationOut.value}");
_scale = _animationOut.value;
});
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapUp: _tapUp,onTapDown: _tapDown,child: AnimatedBuilder(
animation: _animationController,child: widget.child,builder: (_,child) {
return Transform.scale(
scale: _scale,transformHitTests: false,child: child,);
},);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。