試聽動畫以完成

Question

我試圖在動畫完成後執行動作。我嘗試添加一個statusListener，但這不適合我。我的代碼如下所示：

@override 
    void initState() { 
    super.initState(); 
    _controller = new AnimationController(
     duration: new Duration(milliseconds: 500), 
     vsync: this, 
    )..addStatusListener((AnimationStatus status) { 
     print("Going"); 
     if (status.index == 3 && spins > 0) { // AnimationStatus index 3 == completed animation 
     _controller.duration = new Duration(milliseconds: speed - 50); 
     _controller.forward(from: _controller.value == null ? 0.0 : 1 - _controller.value); 
     spins--; 
     print(speed); 
     } 
    }); 
    } 

print(Going);永遠不會執行，但我的動畫結束。出了什麼問題？

/// ---編輯--- ///

我使用的是AnimatedBuilder的那部分代碼如下所示：

child: new AnimatedBuilder(
    animation: _controller, 
    child: new Image.network(widget.url), 
    builder: (BuildContext context, Widget child) { 
    return new Transform.rotate(
     angle: _controller.value * 2.0 * math.PI, 
     child: child, 
    ); 
    }, 
), 

Answer 1

對你的評論和編輯作出反應我看着AnimationBuilder。適應於docs的例子我想出了這個工作液：

class Spinner extends StatefulWidget { 
    @override 
    _SpinnerState createState() => new _SpinnerState(); 
} 

class _SpinnerState extends State<Spinner> with SingleTickerProviderStateMixin { 
    AnimationController _controller; 
    CurvedAnimation _animation; 

    @override 
    void initState() { 
    super.initState(); 
    _controller = new AnimationController(
     duration: const Duration(seconds: 5), 
     vsync: this, 
    )..forward(); 

    _animation = new CurvedAnimation(
     parent: _controller, 
     curve: Curves.linear, 
    )..addStatusListener((AnimationStatus status) { 
     if (status == AnimationStatus.completed) 
     print('completed'); 
    }); 
    } 

    @override 
    void dispose() { 
    _controller.dispose(); 
    super.dispose(); 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new AnimatedBuilder(
     animation: _animation, 
     child: new Container(width: 200.0, height: 200.0, color: Colors.green), 
     builder: (BuildContext context, Widget child) { 
     return new Transform.rotate(
      angle: _controller.value * 2.0 * 3.1415, 
      child: child, 
     ); 
     }, 
    ); 
    } 
} 

正如你所看到的，我用的控制器作爲父母的動畫，這比作爲動畫的AnimationBuilder。希望能幫助到你。

Answer 2

按照實施例撲畫廊的progress indicators你應該附上StatusListener爲動畫，而不是控制器

_controller = new AnimationController(
    duration: const Duration(milliseconds: 1500), 
    vsync: this, 
)..forward(); 

_animation = new CurvedAnimation(
    parent: _controller, 
    curve: const Interval(0.0, 0.9, curve: Curves.fastOutSlowIn), 
    reverseCurve: Curves.fastOutSlowIn 
)..addStatusListener((AnimationStatus status) { 
    if (status == AnimationStatus.dismissed) 
    _controller.forward(); 
    else if (status == AnimationStatus.completed) 
    _controller.reverse(); 
}); 

我沒有測試過這種無線你的代碼。只是喊，如果它不工作;）