[移动开发]flutter闪烁动画效果

闪烁浮动效果：

import 'package:flutter/material.dart';

class FlickerAnimation extends StatefulWidget {
  final String iconPath;
  FlickerAnimation({this.iconPath});
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FlickerAnimation();
  }
}
class _FlickerAnimation extends State<FlickerAnimation> with TickerProviderStateMixin{

  /*height = Tween<double>(
      begin:.0 ,
      end: 300.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );*/

  /*color = ColorTween(
      begin:Colors.green ,
      end:Colors.red,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.6,//间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );*/

  /*padding = Tween<EdgeInsets>(
      begin:EdgeInsets.only(left: .0),
      end:EdgeInsets.only(left: 100.0),
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.6, 1.0, //间隔，后40%的动画时间
          curve: Curves.ease,
        ),
      ),
    );*/


  AnimationController animationController;
  Animation<double> opacity;
  Animation<EdgeInsets> padding;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animationController = new AnimationController(
        duration: Duration(milliseconds: 630),
        vsync: this);

    opacity = Tween<double>(
      begin: 0.0 ,
      end: 1.0,
    ).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Interval(
          0.0, 1.0, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );
    padding = Tween<EdgeInsets>(
      begin:EdgeInsets.only(bottom: .0),
      end:EdgeInsets.only(bottom: 20.0),
    ).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Interval(
          0.0, 1.0, //间隔，后40%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    animationController.addStatusListener((status) {
      if(status == AnimationStatus.completed){
        animationController.reverse();
      }else if(status == AnimationStatus.dismissed){
        animationController.forward();
      }
    });
    animationController.forward();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    animationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return onActivityCreate(context);
  }
  @override
  onActivityCreate(BuildContext context) {
    // TODO: implement onActivityCreate
    return AnimatedBuilder(
        builder: _buildAnimation,
        animation: animationController
    );
  }

  Widget _buildAnimation(BuildContext context, Widget child) {
    return Container(
        padding: padding.value,
        alignment: Alignment.bottomCenter,
        height: 80.0,
        width: 80.0,
        //color: Colors.red,
        child: Opacity(
          child: ShaderMask(
            shaderCallback: (rect) {
              return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.black, Colors.transparent],
              ).createShader(Rect.fromLTRB(0.0, 0.0, rect.width, rect.height));
            },
            blendMode: BlendMode.dstIn,
            child: Image.asset(widget.iconPath,width: 50.0,height: 50.0),
          ),
          opacity: opacity.value,
        )
    );
  }
}

引用：

Container(
        color: Colors.white,
      width: 200.0,
      height: 200.0,
      child: FlickerAnimation(iconPath: 'assets/image/f_image.webp',),)

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系