Animated-Text-Kit icon indicating copy to clipboard operation
Animated-Text-Kit copied to clipboard

Added hold duration in rotate and fade animation

Open aakash-pamnani opened this issue 1 year ago • 2 comments

Added holdDuration and animationDuration parameter in rotate animation and holdDuration, fadeInDuration and fadeOutDuration in fade animation. If works the will add in other animations also.

Video Sample

DefaultTextStyle(
                  style: TextStyle(
                    fontSize: 40.0,
                    fontFamily: 'Horizon',
                  ),
                  child: AnimatedTextKit(
                    animatedTexts: [
                      RotateAnimatedText('AWESOME',
                          holdDuration: Duration(seconds: 1)),
                      RotateAnimatedText('OPTIMISTIC'),
                      RotateAnimatedText(
                        'DIFFERENT',
                        textStyle: const TextStyle(
                          decoration: TextDecoration.underline,
                        ),
                        holdDuration: Duration(seconds: 5),
                      ),
                    ],
                    onTap: onTap,
                    isRepeatingAnimation: true,
                    totalRepeatCount: 10,
                  ),
                ),

https://github.com/aagarwal1012/Animated-Text-Kit/assets/76067278/d726c948-29e9-4b99-90d8-2872eb02825d

DefaultTextStyle(
          style: const TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.bold,
          ),
          child: AnimatedTextKit(
            animatedTexts: [
              FadeAnimatedText(
                'do IT!',
                holdDuration: Duration(seconds: 2),
                fadeInDuration: Duration(milliseconds: 5000),
              ),
              FadeAnimatedText('do it RIGHT!!',
                  holdDuration: Duration(seconds: 2)),
              FadeAnimatedText('do it RIGHT NOW!!!',
                  holdDuration: Duration(seconds: 2)),
            ],
            onTap: onTap,
          ),
        ),

https://github.com/aagarwal1012/Animated-Text-Kit/assets/76067278/7efff1d4-0a24-43db-b0f9-a8871d917b59

Solves : #340

@aagarwal1012

aakash-pamnani avatar Jun 04 '24 19:06 aakash-pamnani

Can you give an example for Flicker animation as this is the one you mentioned as a fixed

guyluz11 avatar Oct 18 '24 11:10 guyluz11

Can you give an example for Flicker animation as this is the one you mentioned as a fixed You can use pause and speed parameter. Pause defines the duration between texts, whereas Speed will set the total duration to render a animated widget.

      AnimatedTextExample(
        label: 'Flicker',
        color: Colors.pink[300],
        child: DefaultTextStyle(
          style: const TextStyle(
            fontSize: 35,
            color: Colors.white,
            shadows: [
              Shadow(
                blurRadius: 7.0,
                color: Colors.white,
                offset: Offset(0, 0),
              ),
            ],
          ),
          child: AnimatedTextKit(pause: Duration(seconds: 2),
            animatedTexts: [
              FlickerAnimatedText('Flicker Frenzy',speed: Duration(seconds: 4)),
              FlickerAnimatedText('Night Vibes On',speed: Duration(seconds: 4)),
              FlickerAnimatedText("C'est La Vie !",speed: Duration(seconds: 4)),
            ],
            onTap: onTap,
          ),
        ),
      ),

queendevelopers avatar Dec 07 '24 16:12 queendevelopers