Flutter_41_交织动画

最新推荐文章于 2024-10-01 20:41:19 发布

「已注销」

最新推荐文章于 2024-10-01 20:41:19 发布

阅读量158

点赞数

分类专栏： dart 文章标签： flutter dart

本文链接：https://blog.csdn.net/m0_49349981/article/details/119970480

版权

dart 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

这篇博客通过一个示例展示了如何在Flutter中创建一个复杂的动画效果，包括组件的平移、旋转、缩放和颜色变化。作者利用AnimationController、CurvedAnimation和Tween类来控制动画的时间间隔和曲线，并在按钮点击事件中启动、反转和停止动画。示例代码详细解释了每个部分的作用，为理解Flutter动画系统提供了实用的指导。

摘要由CSDN通过智能技术生成

why
- 交织动哈是由多个单个一动画叠加而形成复杂动画
- 例如：组件变化肯涉及高度、宽度、颜色、透明度、位置等等
- 需要给每个动画设置时间间隔（Interval）
transform(对组件进行矩阵变换)
- 平移:Transform.translate()
- 旋转：Transform.rotate()
- 缩放:Transform.scale()

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  //下一个组件
  runApp(MyApp());
}

//MaterialApp
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter",
      //下一个组件
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

//Scaffold
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animation"),
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
        elevation: 0.0,
        centerTitle: true,
      ),
      //下一个组件
      body: AnimationDemo(),
    );
  }
}

//Container
class AnimationDemo extends StatefulWidget {
  const AnimationDemo({Key key}) : super(key: key);

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

class _AnimationDemoState extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;
  Animation sizeAnimation;
  Animation colorAnimation;
  Animation rotationAnimation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //  创建AnimationController
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 3));
    //  创建动画
    animation = CurvedAnimation(
      parent: controller,
      curve: Interval(0.0, 0.5),
    ) //  监听动画
      ..addListener(
        () {
          setState(() {});
        },
      );

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });
    sizeAnimation = Tween(begin: 0.0, end: 200).animate(animation);
    colorAnimation = ColorTween(begin: Colors.yellow, end: Colors.red).animate(
        CurvedAnimation(
            parent: controller,
            curve: Interval(0.5, 0.8, curve: Curves.bounceIn)))
      ..addListener(() {
        setState(() {});
      });
    rotationAnimation = Tween(begin: 0.0, end: 2 * pi)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn));
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          ElevatedButton(
              onPressed: () {
                controller.forward();
              },
              child: Text("放大")),
          ElevatedButton(
              onPressed: () {
                controller.reverse();
              },
              child: Text("缩小")),
          ElevatedButton(
              onPressed: () {
                controller.stop();
              },
              child: Text("停止")),
          Opacity(
            opacity: controller.value,
            child: Transform.rotate(
              angle: rotationAnimation.value,
              child: Container(
                width: sizeAnimation.value,
                height: sizeAnimation.value,
                color: colorAnimation.value,

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