美文网首页
flutter 动画的使用

flutter 动画的使用

作者: A然后呢 | 来源:发表于2020-08-24 14:04 被阅读0次
class TweenAnim extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return TweenAnimA();
  }
}
class TweenAnimA extends State<TweenAnim> with SingleTickerProviderStateMixin {
  AnimationController controller;
  //doubler类型动画
  Animation<double> doubleAnimation;
  //颜色动画
  Animation<Color> colorAnimation;
  //位置动画
  Animation<Offset> offsetAnimation;
  //圆角动画
  Animation<BorderRadius> radiusAnimation;
  //装饰动画
  Animation<Decoration> decorationAnimation;
  //字体动画
  Animation<TextStyle> textStyleAnimation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //创建AnimationController
    controller = new AnimationController(
        vsync: this, duration: Duration(milliseconds: 2000));
    //animation第一种创建方式:
    doubleAnimation = new Tween<double>(begin: 0.0, end: 200.0).animate(controller)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((AnimationStatus status) {
        //执行完成后反向执行
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          //反向执行完成,正向执行
          controller.forward();
        }
      });
    //animation第二种创建方式:
    offsetAnimation = controller.drive(
        Tween<Offset>(begin: Offset(0.0, 0.0),end: Offset(400.0, 200.0))
    );
    colorAnimation =  ColorTween(begin: Colors.yellow,end: Colors.red).animate(controller);
    radiusAnimation = BorderRadiusTween(begin: BorderRadius.circular(0),end: BorderRadius.circular(50)).animate(controller);
    decorationAnimation = DecorationTween(begin: BoxDecoration(color: Colors.purple,borderRadius: BorderRadius.circular(0),),
        end: BoxDecoration(color: Colors.lightBlueAccent,borderRadius: BorderRadius.circular(40))).animate(controller);
    textStyleAnimation = TextStyleTween(begin: TextStyle(color: Colors.black,fontSize: 20,fontWeight: FontWeight.w100),
        end: TextStyle(color: Colors.purple,fontSize: 30,fontWeight: FontWeight.w700)).animate(controller);
    //启动动画
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text("Tween动画"),),
        body: Container(
          alignment: Alignment.center,
          child: ListView(

            children: <Widget>[
              SizedBox(
                height: 200,
                child:  Container(
                  height: doubleAnimation.value,
                  width: doubleAnimation.value,
                  child: FlutterLogo(),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: offsetAnimation.value.dx),
                width: 50,
                height: 50,
                color: Colors.green,
              ),
              Container(
                height: 50,
                width: 50,
                color: colorAnimation.value,
              ),
              SizedBox(height: 10,),
              Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(borderRadius: radiusAnimation.value,color: Colors.blue),
              ),
              Container(
                height: 60,
                width: 200,
                decoration: decorationAnimation.value,
              ),
              Container(
                height: 50,
                child: Text("Tween",style: textStyleAnimation.value,),
              ),

            ],
          ),
        )
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    controller.dispose();
  }
}

相关文章

网友评论

      本文标题:flutter 动画的使用

      本文链接:https://www.haomeiwen.com/subject/rnljrktx.html