Flutter学习之路->平移动画的隐式与显式实现方式

平移动画场景千千万 这里给出一个隐式动画做法和一个显示动画做法

1.隐式动画做法

import 'package:flutter/material.dart';

class MoveWidget extends StatefulWidget {
  @override
  _MoveWidgetState createState() => _MoveWidgetState();
}

class _MoveWidgetState extends State<MoveWidget> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isExpanded = !_isExpanded;
        });
      },
      child: Container(
        color: Colors.blue,
        child: Stack(
          children: [
            AnimatedPositioned(
              duration: Duration(milliseconds: 300), // 动画时长
              left: _isExpanded ? 100 : 0, // 左边距
              top: _isExpanded ? 100 : 0, // 上边距
              width: 100, // 宽度
              height: 100, // 高度
              child: Container(
                color: Colors.green,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2.显式动画做法

import 'package:flutter/material.dart';

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

  @override
  _SlideTransitionWidgetState createState() => _SlideTransitionWidgetState();
}

class _SlideTransitionWidgetState extends State<SlideTransitionWidget> with SingleTickerProviderStateMixin {
  bool _isExpanded = false;
  late AnimationController _controller;
  late Animation<Offset> _offsetAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );
    _offsetAnimation = Tween<Offset>(
      begin: Offset.zero,
      end: Offset(1, 1),
    ).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isExpanded = !_isExpanded;
          _isExpanded ? _controller.forward() : _controller.reverse();
        });
      },
      child: Stack(
        children: [
          SlideTransition(
            position: _offsetAnimation,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.green,
              child:const Text("点击位移"),
            ),
          ),
        ],
      ),
    );
  }

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

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