1.gif

功能實現(xiàn)起來其實非常簡單,將下面三張圖依次疊加起來,然后讓指針轉(zhuǎn)動或者獎勵轉(zhuǎn)動就可以了

image.png

先上代碼

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2000),
    );
    animationController.addListener(() {
      if (animationController.status == AnimationStatus.completed) {
        isRunning = false;
        //結(jié)束了
      } else if (animationController.status == AnimationStatus.forward) {
        // print('forward');
      } else if (animationController.status == AnimationStatus.reverse) {
        // print('reverse');
      }
    });
    // 創(chuàng)建一個從0到360弧度的補間動畫 v * 2 * π
  }

  void startAnimation(int index) {
    _animation = Tween<double>(begin: 0, end: 2 + 0.125 * index)
        .animate(CurvedAnimation(
      parent: animationController,
      curve: const Interval(
        0,
        1.0,
        curve: Curves.ease,
      ),
    ));
    setState(() {});
    animationController.reset();
    animationController.forward();
  }

我們提供的素材是有8個獎品.所以我們最終的落點是 0.125 * index,但是我們之前要想多轉(zhuǎn)兩圈再停止所以前面先加2,可以根據(jù)設(shè)計給的圖片改變其實旋轉(zhuǎn)的圈數(shù)和最終落點的角度,修改角度的正負號就可以實現(xiàn)向左轉(zhuǎn)動還是向右轉(zhuǎn)動

Widget wheelView() {
    return SizedBox(
      width: 300,
      height: 300,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Image.asset(
              'assets/lucky_wheel/bg_zhuanpan.png',
              width: 300,
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: RotationTransition(
                turns: _animation,
                child: Image.asset(
                  'assets/lucky_wheel/bg_superjiangpin.png',
                  width: 290,
                )),
          ),
          Align(
            alignment: Alignment.center,
            child: GestureDetector(
              onTap: buttonOnClickStartRun,
              child: Image.asset(
                'assets/lucky_wheel/ic_pointer.png',
                width: 150,
              ),
            ),
          ),
        ],
      ),
    );
  }

最后是控件本身非常簡單,如果想轉(zhuǎn)盤轉(zhuǎn),就把bg_superjiangpin設(shè)置動畫,如果想指針轉(zhuǎn)就用ic_pointer設(shè)置動畫

github地址:https://github.com/CZXBigBrother/flutter_lucky_wheel