flutter 显示动画

// 显示动画  RotationTransition(旋转)   
// 显示动画  FadeTransition(渐隐渐显)    
// 显示动画  ScaleTransition(变形)  
// 显示动画  SlideTransition(位移)   
// 显示动画  AnimatedIcon
SlideTransition(位移)   AnimatedIcon
// 1.混入(公共部分) 
with SingleTickerProviderStateMixin 
// 2.创建controlle(公共部分) 
late AnimationController _controller;
//3.controller赋值(公共部分)  
@override
void initState() {
	_controller = AnimationController( //创建AnimationController
		vsync: this, //让程序和手机的刷新频率统一
		duration: const Duration(seconds: 1),
		lowerBound: .5, //开始
		upperBound: 1   //结束
	)..repeat(reverse: true); //初始状态
}
//动画状态控制
// _controller.forward();//播放一次
// _controller.repeat(reverse: true);//重复运动   reverse:开始和结束同时使用动画
// _controller.stop();//停止运动
// _controller.reset();//重置
// _controller.reverse();//反转运动

// lowerBound/upperBound 和 _controller.drive(Tween(begin: 0.5,end:1.2))  控制起始值:取大优先

// RotationTransition(旋转) 使用
RotationTransition(turns: _controller,child: const FlutterLogo(size: 60)) //turns:_controller.drive(Tween(begin: 0.5,end:1.2))  控制起始值
// FadeTransition(渐变)
FadeTransition(opacity: _controller,child: const FlutterLogo(size: 60)) //opacity:_controller.drive(Tween(begin: 0.5,end:1.2))  控制起始值
// ScaleTransition(变形) 
ScaleTransition(scale: _controller,child: const FlutterLogo(size: 60)) //scale:_controller.drive(Tween(begin: 0.5,end:1.2))  控制起始值
// SlideTransition(位移)  必须使用_controller.drive 添加起始位置和结束位置
SlideTransition(position: _controller.drive(Tween(begin: const Offset(-1,0),end: const Offset(.4,0))),child: const FlutterLogo(size: 60)),
// SlideTransition(位移)  Tween().chain(CurveTween(curve: Curves.bounceInOut)) 添加运动曲线
SlideTransition(position: _controller.drive(Tween(begin: const Offset(-1,0),end: const Offset(.4,0)).chain(CurveTween(curve: Curves.easeIn))),child: const FlutterLogo(size: 60)),
// AnimatedIcon
AnimatedIcon(progress:_controller,icon: AnimatedIcons.close_menu,size: 40),

//自定义图标交错组件
Stack(
    children: [
		ScaleTransition(scale: _controller.drive(Tween(begin: 0.0,end: 1.0).chain(CurveTween(curve: const Interval(.5, 1)))),child:  const Icon(Icons.close,size:40)),
        ScaleTransition(scale: _controller.drive(Tween(begin: 1.0,end: 0.0).chain(CurveTween(curve: const Interval(0, .5)))),child:  const Icon(Icons.search,size:40)),
    ]
),
//SlideTransition交错动画
Column(children: [ 
    SlideTransition(position: _controller.drive(Tween(begin: const Offset(0.0,0.0),end:  const Offset(1,0.0)).chain(CurveTween(curve: const Interval(0, .3)))),child: Container(width: 120,height: 60,color: Colors.blue[300])),
    SlideTransition(position: _controller.drive(Tween(begin: const Offset(0.0,0.0),end:  const Offset(1,0.0)).chain(CurveTween(curve: const Interval(.3, .6)))),child: Container(width: 120,height: 60,color: Colors.blue[500])),
    SlideTransition(position: _controller.drive(Tween(begin: const Offset(0.0,0.0),end:  const Offset(1,0.0)).chain(CurveTween(curve: const Interval(.6, 1)))),child: Container(width: 120,height: 60,color: Colors.blue[800])),
],
//添加运动曲线
Tween(begin: const Offset(0,0),end: const Offset(.2,0)).chain(CurveTween(curve: Curves.bounceInOut))

// 交错式动画,添加2个或者多个chain
Tween(begin: const Offset(-1,0),end: const Offset(.4,0)).chain(CurveTween(curve: Curves.easeIn)).chain(CurveTween(curve: Interval(0.2,0.8))) //Interval(0.2,0.8) 从时间点0.2秒开始  从时间点0.8秒结束

//运行代码
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MyAPP(),
  );
}

class MyAPP extends StatelessWidget {
  const MyAPP({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'contaniner', home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
 bool falg=false;
  late AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, //让程序和手机的刷新频率统一
      duration: const Duration(seconds: 1),
      lowerBound: .3, //开始
		  upperBound: 1   //结束
    )..repeat(reverse: true); //让程序和手机的刷新频率统一
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('动画')),
      ),
      body: Center(
        child: ListView(
          children: [
            const SizedBox(height: 40, child:  Center(child: Text("RotationTransition动画(旋转)"))),
            RotationTransition(turns: _controller, child: const FlutterLogo(size: 60)),

            const SizedBox(height: 40, child: Center(child: Text("FadeTransition动画(渐隐渐显)",))),
            FadeTransition(opacity: _controller,child: const FlutterLogo(size: 60)),

            const SizedBox(height: 40, child:  Center(child: Text("ScaleTransitionn放大"))),
            ScaleTransition(scale:_controller.drive(Tween(begin: .5,end:1.2)),child: const FlutterLogo(size: 60)),

            const SizedBox(height: 40, child: Center(child:  Text("SlideTransition动画"))),
            SlideTransition(position: _controller.drive(Tween(begin: const Offset(-1,0),end: const Offset(.4,0))),child: const FlutterLogo(size: 60)),
            SlideTransition(position: _controller.drive(Tween(begin: const Offset(-1,0),end: const Offset(.4,0)).chain(CurveTween(curve: Curves.easeIn)).chain(CurveTween(curve: Interval(0.2,0.8)))),child: const FlutterLogo(size: 60)),

            const SizedBox(height: 40, child: Center(child:  Text("AnimatedIcon动画"))),
            AnimatedIcon(progress:_controller,icon: AnimatedIcons.menu_home,size: 40),

            const SizedBox(height: 40, child: Center(child:  Text("自定义交错组件"))),
            Stack(
              children: [
                ScaleTransition(scale: _controller.drive(Tween(begin: 0.0,end: 1.0).chain(CurveTween(curve: const Interval(.5, 1)))),child:  const Icon(Icons.close,size:40)),
                ScaleTransition(scale: _controller.drive(Tween(begin: 1.0,end: 0.0).chain(CurveTween(curve: const Interval(0, .5)))),child:  const Icon(Icons.search,size:40)),
              ],
            ),
            const SizedBox(height: 40, child: Center(child:  Text("SlideTransition交错动画"))),
            Center(
              child: Column(children: [ 
                  SlideTransition(position: _controller.drive(Tween(begin: const Offset(0.0,0.0),end:  const Offset(1,0.0)).chain(CurveTween(curve: const Interval(0, .3)))),child: Container(width: 120,height: 60,color: Colors.blue[300])),
                  SlideTransition(position: _controller.drive(Tween(begin: const Offset(0.0,0.0),end:  const Offset(1,0.0)).chain(CurveTween(curve: const Interval(.3, .6)))),child: Container(width: 120,height: 60,color: Colors.blue[500])),
                  SlideTransition(position: _controller.drive(Tween(begin: const Offset(0.0,0.0),end:  const Offset(1,0.0)).chain(CurveTween(curve: const Interval(.6, 1)))),child: Container(width: 120,height: 60,color: Colors.blue[800])),
                ],
              ),
            ),
            Row(
              children: [
                // _controller.forward();//播放一次
                // _controller.repeat();//重复运动
                // _controller.stop();//停止运动
                // _controller.reset();//重置
                // _controller.reverse();//反转运动
                ElevatedButton(
                  onPressed: () => _controller.forward(),
                  child: const Text('播放一次'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.repeat(reverse: true),
                  child: const Text('重复'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.stop(),
                  child: const Text('停止'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reset(),
                  child: const Text('重置'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reverse(),
                  child: const Text('反转'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}