Flutter-自定义表情雨下落动画

简述

今天给大家分享一个Flutter的表情雨的实现，具体的效果见下图，这个效果其实是工作中的一个小小的需求，这里面单独拿出来讲讲下这个效果的实现思路。

在以前特别是新手，遇到一些动画效果都是拿到需求后，在网络上去找寻类似的效果，然后修改修改就可以了，不知道你们是不是呢？其实从chatgpt出来以后，很多时候对于这种效果我们其实直接就可以问下gpt，gpt会给我们一些思路，只要我们表达的清晰，配合gpt我们会很快实现这个效果。

效果图

分析

我们如何去问gpt,才能让gpt给出我们想要的结果呢？当然在以前我们都是自己先了解这个效果属于什么效果，比如说 “跑马灯”、“画廊”等等，然后在网络搜索这个关键字查询。但是现在我们不是单纯的搜关键字了，而是用自己的语言把效果用话语表达出来，让gpt知道到底怎么写代码，总结来说你就是产品，gpt是开发人员，你要把产品需求告诉gpt去开发。

ChatGpt问答

用户问：请使用Flutter实现一个widget，这个widget支持设置宽高，其内容是由n个表情从上往下落下，这些表情下落的时机是间隔落下，下落过程中透明度在高度一半的时候透明度逐渐隐藏。
注意: 这里我使用的gpt是3.5版本。

gpt回答代码如下：

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

class FallingEmojisWidget extends StatefulWidget {
 final double width;
 final double height;
 final List<String> emojis;
 final Duration interval;

 const FallingEmojisWidget({
   Key? key,
   required this.width,
   required this.height,
   required this.emojis,
   this.interval = const Duration(milliseconds: 500),
 }) : super(key: key);

 @override
 _FallingEmojisWidgetState createState() => _FallingEmojisWidgetState();
}

class _FallingEmojisWidgetState extends State<FallingEmojisWidget>
   with TickerProviderStateMixin {
 late AnimationController _animationController;
 late Timer _timer;

 List<Widget> _emojiWidgets = [];

 @override
 void initState() {
   super.initState();
   _animationController = AnimationController(
     vsync: this,
     duration: Duration(milliseconds: 1000),
   );
   _timer = Timer.periodic(widget.interval, (_) => _addEmoji());
 }

 @override
 void dispose() {
   _animationController.dispose();
   _timer.cancel();
   super.dispose();
 }

 void _addEmoji() {
   setState(() {
     final emoji = widget.emojis[Random().nextInt(widget.emojis.length)];
     _emojiWidgets.add(_buildEmojiWidget(emoji));
   });
 }

 Widget _buildEmojiWidget(String emoji) {
   final initialOffset = Offset(
     Random().nextDouble() * widget.width,
     -50,
   );
   final targetOffset = Offset(
     initialOffset.dx,
     widget.height / 2,
   );

   final animation = Tween<Offset>(
     begin: initialOffset,
     end: targetOffset,
   ).animate(CurvedAnimation(
     parent: _animationController,
     curve: Curves.easeInOut,
   ));

   return AnimatedBuilder(
     animation: _animationController,
     builder: (context, child) {
       final opacity = _animationController.value < 0.5
           ? (_animationController.value * 2)
           : (1 - (_animationController.value - 0.5) * 2);

       return Positioned(
         left: animation.value.dx,
         top: animation.value.dy,
         child: Opacity(
           opacity: opacity,
           child: Text(
             emoji,
             style: TextStyle(fontSize: 24),
           ),
         ),
       );
     },
   );
 }

 @override
 Widget build(BuildContext context) {
   return Container(
     width: widget.width,
     height: widget.height,
     child: Stack(
       children: _emojiWidgets,
     ),
   );
 }
}`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

gpt第一次回答你的代码其实已经告诉你实现思路了，比如上面的代码，通过gpt的回答我们知道可以使用Stack控件，然后在Stack中添加我们想要的数量的表情widget，然后通过AnimatedBuilder+Positioned实现表情下落的效果。是不是很6，从开始没有思路立马就知道如何实现了，你其实可以直接copy gpt的回答然后运行看看，在此基础上修改修改就ok了。下面是我修改后的完整代码。

import 'dart:math';
import 'package:flutter/material.dart';

/// 表情下落动画
class EmojiAnimWidget extends StatefulWidget {
  const EmojiAnimWidget(
      {Key? key,
      required this.width,
      required this.height,
      this.emojiNum = 6,
      this.duration = const Duration(seconds: 5)})
      : super(key: key);

  final double width;
  final double height;
  final int emojiNum;
  final Duration duration;

  @override
  State<EmojiAnimWidget> createState() => EmojiAnimWidgetState();
}

class EmojiAnimWidgetState extends State<EmojiAnimWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  List<Widget>? _emojis;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: widget.duration,
    );
  }

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

  /// 开始表情动画
  void startEmojiAnim(String emoji) {
    _emojis = List.generate(widget.emojiNum, (index) {
      var delay = Random().nextInt(150).toDouble() + 50;
      var fontSize = Random().nextInt(9).toDouble() + 18.0;
      var animation = Tween<double>(
        begin: 0.0,
        end: 1.0,
      ).animate(CurvedAnimation(
        parent: _animationController,
        curve: Interval(delay / 500, (delay + 300) / 500, curve: Curves.linear),
      ));
      return AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          var opacity = 1 - animation.value;
          return Positioned(
            left: (widget.width - 32) / widget.emojiNum * index,
            top: -delay + animation.value * (widget.height + delay),
            child: Opacity(
              opacity: (opacity > 0.5) ? 1 : opacity,
              child: Container(
                height: 50,
                color: Colors.transparent,
                alignment: Alignment.center,
                child: Text(
                  emoji,
                  style: TextStyle(fontSize: fontSize, height: 1.2),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          );
        },
      );
    });
    setState(() {
      _animationController.stop();
      _animationController.repeat();
      _animationController.forward();
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_emojis == null) return Container();
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(left: 16, right: 16),
      width: widget.width,
      height: widget.height,
      child: Stack(
        clipBehavior: Clip.none,
        children: _emojis!,
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100