Flutter显示动画基础,旋转,大小,透明度

s

import 'package:flutter/material.dart';


class transitionDemo extends StatefulWidget {
  @override
  _transitionDemoState createState() => _transitionDemoState();
}

AnimationController controller;
class _transitionDemoState extends State<transitionDemo> with SingleTickerProviderStateMixin {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    controller=AnimationController(
      duration: Duration(seconds: 1),
      vsync: this //垂直同步
    );
    controller.repeat(reverse: true);//循环  从小变大,再从大到小
    //controller.stop();//停止
  }

  @override
  void dispose() {
    // TODO: implement dispose
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return FadeDemo();
  }
}

//旋转
class RotationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child:  RotationTransition(
        turns: controller,
        child: Container(
          color: Colors.blue,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}


//透明度
class FadeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child:  FadeTransition(
        opacity: controller,
        child: Container(
          color: Colors.blue,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

//大小
class ScaleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child:  ScaleTransition(
        scale: controller,
        child: Container(
          color: Colors.blue,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

猜你喜欢

转载自blog.csdn.net/qq_42572245/article/details/107182076