Prologue: This article should say that I share the simplest special effects: achieving the twinkling of stars. The reasons for sharing are as follows: 1. Dove everyone for a long time to share the original learning to write also did not share [main their own no project temper dare not mistake people’s children], the share of some articles brush the sense of existence 😂. 2. The principle of the twinkling of stars I think there is some experience can be used for reference, so this record.

Principle that

The star is a picture material, and we use animation to achieve a flashing effect similar to breathing lights. Two ways:

  1. Through the center point to zoom in and out the picture to achieve flicker;
  2. By changing transparency, it works fine.

Zoom in and out pictures to achieve flicker

  1. Results shown

  1. The implementation code
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late AnimationController animationController;
  late Animation<double> anim;
  AnimationStatus status = AnimationStatus.forward;

  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    // Set the zoom and loop the animation
    anim = Tween(begin: 0.5, end: 1.5).animate(animationController) .. addListener(() {if(animationController.status ! = AnimationStatus.dismissed && animationController.status ! = AnimationStatus.completed) { status = animationController.status; }if(animationController.status == AnimationStatus.completed || animationController.status == AnimationStatus.dismissed) { status == AnimationStatus.forward ? animationController.reverse() : animationController.forward(); }}); animationController.forward(); }@override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: anim,
          builder: (context, child) => Transform.scale(
            // Set the animation value to zoom
            scale: anim.value,
            child: Image.asset('assets/star_yellow.png', width: 56, height: 56(), ((), ((), ((), ((), (() }}Copy the code

Flicker is achieved by changing transparency

  1. Results shown

  1. The implementation code

Flutter comes with a number of animation components. Transparency can be achieved using the FadeTransition component, passing in the animation object and layout.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey,
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: FadeTransition(opacity: anim,
        child: Image.asset('assets/star_yellow.png', width: 56, height: 56)))); }Copy the code

When doing this animation, I always think of the brightest star in the night sky 😄 two effects, which one do you like? 😋