How to add curves.bounceOut in text animation;

Container(child:Text("hello"));

CodePudding user response：

You can use animated_text_kit Wavy animation

Example from doc

return DefaultTextStyle(
  style: const TextStyle(
    fontSize: 20.0,
  ),
  child: AnimatedTextKit(
    animatedTexts: [
      WavyAnimatedText('Hello World'),
      WavyAnimatedText('Look at the waves'),
    ],
    isRepeatingAnimation: true,
    onTap: () {
      print("Tap Event");
    },
  ),
);

You can find more animation on package

CodePudding user response：

you can define your own animation and controller and tweak it as you like one way to do it add with TickerProviderStateMixin to your class example :

class homeState extends State<home> with TickerProviderStat

then in your class define :

late AnimationController controller;
late Animation<double> animation

;

after that in the init state of your class you can use

controller = AnimationController(
      duration: const Duration(seconds: 20),  // duration of the animation you want 
      vsync: this,
    );
animation = CurvedAnimation(parent: controller /* the controller we defined above */ , curve: Curves.bounceOut /* the curve of the animation you want */ );
// use
 controller.repeat(); //if you want the animation to loop

then use it with your container if you want to know more here is the flutter documentation link hope this helps

CodePudding user response：

Please Use this code for animation text; follow this code if if helpfull;

// #Create Variables

late AnimationController controller;
late Animation<double> animation;
int hrs = 0;
int minute = 0;
int second = 0;
double opacity = 0.1;
int duration = 0;
double hp = 0.0;
double mp = 0.0;
double sp = 0.0;

// #Create Function and add within initState function;

timer() async {
DateTime date = DateTime.now();
Future.delayed(const Duration(milliseconds: 1000), () {
  setState(() {
    duration = 900;
    sp = 10;
    date = DateTime.now();
    second = date.second;
    hrs = date.hour;
    minute = date.minute;
    var inputFormat = DateFormat('HH');
    var inputDate = inputFormat.parse(hrs.toString());
    var outputFormat = DateFormat('hh');
    hrs = int.parse(outputFormat.format(inputDate).toString());
    if (second == 0) {
      mp = 10;
    } else if (minute == 0) {
      hp = 10;
    }
    timer();
  });
});
Future.delayed(const Duration(milliseconds: 900), () {
  setState(() {
    sp = 0;
    mp = 0;
    hp = 0;
    duration = 0;
  });
});

}

// #Create an Widget

Widget animatedText(String text, double animatedPadding) {
return TweenAnimationBuilder(
  duration: const Duration(milliseconds: 500),
  curve: Curves.bounceIn,
  tween: IntTween(begin: 0, end: 1),
  builder: (context, int val, child) {
    if (val != 1 && opacity < 1.0) {
      opacity = opacity   0.1;
    } else if (opacity > 1.0 || opacity == 1.0) {
      opacity = 1.0;
    }
    return Opacity(
      opacity: opacity >= 0.0 && opacity <= 1.0 ? opacity : 0,
      child: AnimatedPadding(
          duration: Duration(milliseconds: duration),
          curve: Curves.bounceOut,
          padding: EdgeInsets.only(top: animatedPadding),
          child: child),
    );
  },
  child: Text(
    text,
    style: const TextStyle(
      color: Colors.white,
      fontSize: 24.0,
    ),
  ),
);

}

//#add animatedText in Container ;

Container(alignment: Alignment.center,
      height: Sizes.height * 0.05,
      width: Sizes.width * 0.1,
      child: animatedText(second.toString(), sp)),