Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

关于flutter动画的一个问题

假设要实现一个这样的动画:
image

看网上的很多教程都是不同属性动画值的例子,要是这种一个值在一个动画中发生了一种以上变化的情况应该怎么写?

opacity = Tween(begin: 0.0, end: 1.0)
  .animate(CurvedAnimation(
    parent: aniamtionController,
    curve: Interval(0.0, 1.0, curve: Curves.ease)
  ));
  
width = Tween(begin: 100, end: 130)
  .animate(CurvedAnimation(
    parent: aniamtionController,
    curve: Interval(0.0, 0.5, curve: Curves.ease)
  ));

// 缺少了width的后半段动画

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

找到了,使用TweenSequence部件,可以创建顺序动画。

width = TweenSequence([
  TweenSequenceItem(tween: Tween(begin: 100, end: 130), weight: 1),
  TweenSequenceItem(tween: Tween(begin: 130, end: 100), weight: 1),
]).animate(animationController);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...