Flutter学习之路->透明度和缩放组合动画

透明度变化和缩放同时进行的组合动画

1.隐式组合动画

import 'package:flutter/material.dart';

class ImplicitAnimationSample extends StatefulWidget {
  @override
  _ImplicitAnimationSampleState createState() => _ImplicitAnimationSampleState();
}

class _ImplicitAnimationSampleState extends State<ImplicitAnimationSample> {
  bool _isVisible = false; // 标记矩形是否可见

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedOpacity(
          opacity: _isVisible ? 1.0 : 0.5, // 控制矩形的透明度
          duration: const Duration(milliseconds: 500), // 定义动画时长
          curve: Curves.fastOutSlowIn, // 定义动画曲线
          child: AnimatedScale(
            scale: _isVisible ? 1.0 : 0.5,
            duration: const Duration(milliseconds: 500), // 定义动画时长
            child:const FlutterLogo(size: 100),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isVisible = !_isVisible; // 切换矩形的可见性
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

2.显示组合动画

import 'package:flutter/material.dart';

class ScaleFadeAnimationScreen extends StatefulWidget {
  @override
  _ScaleFadeAnimationScreenState createState() =>
      _ScaleFadeAnimationScreenState();
}

class _ScaleFadeAnimationScreenState extends State<ScaleFadeAnimationScreen>
    with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  late Animation<double> _opacityAnimation;
  late Animation<double> _scaleAnimation;

  bool _isSmall = true;

  @override
  void initState() {
    super.initState();

    // 创建动画控制器
    _controller =
        AnimationController(duration:const Duration(milliseconds: 500), vsync: this);

    // 创建透明度和缩放动画
    _opacityAnimation = Tween(begin: 1.0, end: 0.5).animate(_controller);
    _scaleAnimation = Tween(begin: 1.0, end: 0.5).animate(_controller);

    // 监听动画状态变化
    _controller.addListener(() {
      setState(() {});
    });

    // 监听动画完成事件
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.forward || status == AnimationStatus.reverse) {
        setState(() {
          _isSmall = !_isSmall;
        });
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _toggleAnimation() {
    if (_isSmall) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scale-Fade Animation'),
      ),
      body: Center(
        child: Opacity(
          opacity: _opacityAnimation.value,
          child: Transform.scale(
            scale: _scaleAnimation.value,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleAnimation,
        tooltip: 'Toggle Animation',
        child:const Icon(Icons.play_arrow),
      ),
    );
  }
}

要全套代码请加V:sunyan414361110 一起学习flutter鸭