Как остановить анимацию по определенному индексу в флаттере - PullRequest
1 голос
/ 24 февраля 2020

Я пытаюсь создать игру колеса фортуны с флаттером. для этого я нашел this_tutorial и последовал за ним. и это именно то, что я хотел. но у меня есть условие, что анимация должна быть остановлена ​​для определенного индекса (фиксированный индекс).

Я добавил условие, но анимация останавливается внезапно, очень быстро и не останавливается плавно.

Full_Code_here

код:

import 'dart:math';

import 'package:flutter/material.dart';

import 'board_view.dart';
import 'model.dart';

class HomePage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
   return _HomePageState();
 }
}

class _HomePageState extends State<HomePage>
   with SingleTickerProviderStateMixin {
 double _angle = 0;
 double _current = 0;
 AnimationController _ctrl;
 Animation _ani;
 List<Luck> _items = [
   Luck("apple", Colors.accents[0]),
   Luck("raspberry", Colors.accents[2]),
   Luck("grapes", Colors.accents[4]),
   Luck("fruit", Colors.accents[6]),
   Luck("milk", Colors.accents[8]),
   Luck("salad", Colors.accents[10]),
   Luck("cheese", Colors.accents[12]),
   Luck("carrot", Colors.accents[14]),
 ];

 @override
 void initState() {
   super.initState();
   var _duration = Duration(milliseconds: 5000);
   _ctrl = AnimationController(vsync: this, duration: _duration);
   _ani = CurvedAnimation(parent: _ctrl, curve: Curves.fastLinearToSlowEaseIn);
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       decoration: BoxDecoration(
           gradient: LinearGradient(
               begin: Alignment.topCenter,
               end: Alignment.bottomCenter,
               colors: [Colors.green, Colors.blue.withOpacity(0.2)])),
       child: AnimatedBuilder(
           animation: _ani,
           builder: (context, child) {
             final _value = _ani.value;
             final _angle = _value * this._angle;

             return Stack(
               alignment: Alignment.center,
               children: <Widget>[
                 BoardView(items: _items, current: _current, angle: _angle),
                 _buildGo(),
                 _buildResult(_value),
               ],
             );
           }),
     ),
   );
 }

 _buildGo() {
   return Material(
     color: Colors.white,
     shape: CircleBorder(),
     child: InkWell(
       customBorder: CircleBorder(),
       child: Container(
         alignment: Alignment.center,
         height: 72,
         width: 72,
         child: Text(
           "GO",
           style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold),
         ),
       ),
       onTap: _animation,
     ),
   );
 }

 _animation() {
   if (!_ctrl.isAnimating) {
     var _random = Random().nextDouble();
     _angle = 20 + Random().nextInt(5) + _random;
     _ctrl.forward(from: 0.0).then((_) {
       _current = (_current + _random);
       _current = _current - _current ~/ 1;
       _ctrl.reset();
     });
   }
 }

 int _calIndex(value) {
   var _base = (2 * pi / _items.length / 2) / (2 * pi);
   return (((_base + value) % 1) * _items.length).floor();
 }

 _buildResult(_value) {
   var _index = _calIndex(_value * _angle + _current);
   String _asset = _items[_index].asset;

   //here I tried to stop animation on fixed index.
   if(_index == 7)
   {
     _ctrl.stop(); 
   }
   return Padding(
     padding: EdgeInsets.symmetric(vertical: 16.0),
     child: Align(
       alignment: Alignment.bottomCenter,
       child: Image.asset(_asset, height: 80, width: 80),
     ),
   );
 }
}

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...