用句子中的单词飘动的动画（淡入和缩放）

发布于 2025-01-23 19:17:51 字数 1753 浏览 0 评论 0原文

我想创建一个动画，其中一个句子中有三个词，第一个（来）逐渐淡入并留下然后，其字体增加了6个，所有单词都保持在下一个屏幕之前。我尝试了动画套件，这对我来说并不顺利。它做了什么，但我以某种方式无法延迟一个动画。我还不能同时在最后一句话上淡入淡出和缩放动画文本。我正在考虑使用动画控制器和tween，但不能同时进行淡入淡出和扩展。

       Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      AnimatedTextKit(animatedTexts: [
                        FadeAnimatedText(
                          'COME',
                          textStyle: TextStyle(
                              fontSize: 18.0.sp,
                              fontWeight: FontWeight.w300,
                              color: Colors.white),
                        ),
                      ], isRepeatingAnimation: false),
                      AnimatedTextKit(
                        animatedTexts: [
                          FadeAnimatedText(
                            'HAVE',
                            textStyle: TextStyle(
                                fontSize: 18.0.sp,
                                fontWeight: FontWeight.w300,
                                color: Colors.white),
                          ),
                        ],
                        isRepeatingAnimation: false,
                      ),
                      AnimatedTextKit(
                        animatedTexts: [
                          ScaleAnimatedText(
                            'FUN',
                            textStyle: TextStyle(
                              fontSize: 24.0.sp,
                              color: Colors.white,
                            ),
                          ),
                        ],
                        isRepeatingAnimation: false,
                      ),
                    ],
                  ),

原文

I want to create a flutter animation where there are three words in a sentence, the first one (COME) fades in and stays, followed by the other word that fades(HAVE) in too then, the final one (FUN)fades in and then its font is increased by 6, all words stay before moving on to the next screen. I tried the Animated kit and it did not work out well for me. It does everthing but I somehow cannot delay one animation after the other. I cannot also have a fade-in and scale animated text at the same time on the last word.I am looking into using an animation controller and tween but cannot do a fade in and scale at the same time.

       Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      AnimatedTextKit(animatedTexts: [
                        FadeAnimatedText(
                          'COME',
                          textStyle: TextStyle(
                              fontSize: 18.0.sp,
                              fontWeight: FontWeight.w300,
                              color: Colors.white),
                        ),
                      ], isRepeatingAnimation: false),
                      AnimatedTextKit(
                        animatedTexts: [
                          FadeAnimatedText(
                            'HAVE',
                            textStyle: TextStyle(
                                fontSize: 18.0.sp,
                                fontWeight: FontWeight.w300,
                                color: Colors.white),
                          ),
                        ],
                        isRepeatingAnimation: false,
                      ),
                      AnimatedTextKit(
                        animatedTexts: [
                          ScaleAnimatedText(
                            'FUN',
                            textStyle: TextStyle(
                              fontSize: 24.0.sp,
                              color: Colors.white,
                            ),
                          ),
                        ],
                        isRepeatingAnimation: false,
                      ),
                    ],
                  ),

分享到QQ

分享到微博