liangchengyou / wow_english

  import 'package:flutter/material.dart';
  import 'dart:async';
  
  import 'package:wow_english/common/extension/string_extension.dart';

  import 'package:wow_english/common/widgets/throttledGesture_gesture_detector.dart';
  
  import '../../utils/log_util.dart';

  
  /// 扬声器播放组件，帧动画
  class SpeakerWidget extends StatefulWidget {
    final bool isPlaying;
    final bool isClickable;
    final double width;
    final double height;
    final VoidCallback? onTap;
  
    SpeakerWidget({
      super.key,
      this.isPlaying = false,
      this.isClickable = true,
      required this.width,
      required this.height,
      this.onTap,
    });
  
    @override
    _SpeakerWidgetState createState() => _SpeakerWidgetState();
  }
  
  class _SpeakerWidgetState extends State<SpeakerWidget>
      with SingleTickerProviderStateMixin {
    late AnimationController _controller;
    int _currentFrame = 0;
    Timer? _timer;
    final List<String> _speakerImagePaths = [
      'ic_speaker_play2'.assetPng,
      'ic_speaker_play0'.assetPng,
      'ic_speaker_play1'.assetPng,
    ];

    static const String TAG = "SpeakerWidget";
  
    bool _isPlaying = false;

  
    @override
    void initState() {
      super.initState();
      _controller = AnimationController(
        duration: const Duration(milliseconds: 300), // 每帧的持续时间
        vsync: this,
      );
  
      if (widget.isPlaying) {
        _startAnimation();
      }
    }
  
    @override
    void didUpdateWidget(SpeakerWidget oldWidget) {
      super.didUpdateWidget(oldWidget);

      Log.d(
          "$TAG didUpdateWidget widget=${widget.isPlaying} oldWidget=${oldWidget.isPlaying} _isPlaying=$_isPlaying");
      if (widget.isPlaying && !_isPlaying) {
        setState(() {
          _isPlaying = true;
        });
        _startAnimation();
      } else if (!widget.isPlaying && _isPlaying) {
        _stopAnimation();

      }
    }
  
    void _startAnimation() {

      Log.d(
          "$TAG _startAnimation widget=${widget.isPlaying} _isPlaying=$_isPlaying _controller.isAnimating=${_controller.isAnimating}");

      _timer = Timer.periodic(const Duration(milliseconds: 300), (Timer timer) {
        setState(() {
          _currentFrame = ((_currentFrame + 1) % 3);
        });
      });
    }
  
    void _stopAnimation() {

      Log.d(
          "$TAG _stopAnimation widget=${widget.isPlaying} _isPlaying=$_isPlaying _controller.isAnimating=${_controller.isAnimating}");

      _timer?.cancel();

      _controller.stop();
      _controller.reset();
  

      setState(() {

        _isPlaying = false;

        // _controller.value = 0;

        _currentFrame = 0;
      });
    }
  
    @override
    void dispose() {
      _controller.dispose();
      _timer?.cancel();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {

      return ThrottledGestureDetector(

        onTap: widget.isClickable ? widget.onTap : null,

        child: Opacity(
          opacity: widget.isClickable ? 1.0 : 0.5,
          child: Image.asset(
            _speakerImagePaths[_currentFrame],
            width: widget.width,
            height: widget.height,
            fit: BoxFit.cover,
            color: widget.isClickable ? null : Colors.transparent,
            // 灰色遮罩
            colorBlendMode: widget.isClickable ? null : BlendMode.saturation,
          ),

        ),
      );
    }
  }