Flutter动画效果插件arna_animations的使用

Flutter动画效果插件Arna_Animations的使用

dependencies:
  arna_animations: ^1.0.1

import 'package:arna_animations/arna_animations.dart';

示例代码

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

void main() {
  runApp(const MyApp());
}

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

  // 这个小部件是你的应用的根。它是一个无状态小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 动画演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter 动画演示'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的主页。它是一个有状态的小部件，意味着它有一个状态对象（定义在下面）包含影响其外观的字段。
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加计数',
        child: const Icon(Icons.add),
      ),
    );
  }
}

在这个例子中，我们创建了一个简单的计数器应用，并使用了FloatingActionButton来增加计数。接下来，我们将展示如何使用Arna_Animations来增强这个应用的动画效果。

使用Arna_Animations添加动画效果

首先，我们需要在build方法中使用AnimatedContainer来实现动画效果。这里我们为计数器文本添加一个淡入淡出的效果。

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool _showText = true;

  void _incrementCounter() {
    setState(() {
      _counter++;
      _showText = !_showText; // 切换显示状态
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按了按钮这么多次：',
            ),
            AnimatedOpacity(
              opacity: _showText ? 1.0 : 0.0,
              duration: Duration(seconds: 1),
              child: Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加计数',
        child: const Icon(Icons.add),
      ),
    );
  }
}