Flutter动画裁剪插件animated_clipper的使用

Flutter 动画裁剪插件 animated_clipper 的使用

animated_clipper 是一个用于在 Flutter 中进行动画裁剪的插件。它提供了多种动画效果，可以让你轻松地实现各种复杂的动画效果。

主要功能

• AnimatedClipReveal：揭示子部件的变化。
• AnimatedCrossClip：在两个部件之间进行动画切换。
• ClipSwitch：交互式地在两个部件之间切换。
• ClipPathTransition：如果需要使用 AnimationController 进行动画控制，则可以使用该组件。
• PathBuilders：包含多种路径构建器，用于渲染不同的动画效果。

示例

以下是一个完整的示例代码，展示了如何使用 animated_clipper 插件来创建动画效果。

import 'package:animated_clipper/animated_clipper.dart';
import 'package:animated_clipper_example/simple_box.dart';
import 'package:flutter/material.dart';

import 'animated_clip_reveal_example.dart';
import 'animated_cross_clip_example.dart';
import 'clip_path_transition_example.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Clipper Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Animated Clipper Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

  void _toggleBool(bool newValue) {
    setState(() {
      _bool = newValue;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(12.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // ClipSwitch
                Text('ClipSwitch 可以点击'),
                Text('(你必须管理状态，就像 Switch 一样)'),
                SizedBox(height: 12),
                ClipSwitch(
                  value: _bool,
                  onChanged: _toggleBool,
                  inactiveWidget: SimpleBox(text: 'OFF', color: Colors.black),
                  activeWidget: SimpleBox(text: 'ON', color: Colors.blue),
                ),
                SizedBox(height: 12),
                // AnimatedCrossClip
                Text('AnimatedCrossClip 在两个部件之间进行动画切换'),
                Text('(这些使用与上面相同的状态值)'),
                SizedBox(height: 12),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    AnimatedCrossClipExample(
                      value: _bool,
                      pathBuilder: PathBuilders.splitHorizontalIn,
                    ),
                    SizedBox(width: 12),
                    AnimatedCrossClipExample(
                      value: _bool,
                      pathBuilder: PathBuilders.splitVerticalOut,
                    ),
                    SizedBox(width: 12),
                    AnimatedCrossClipExample(
                      value: _bool,
                      pathBuilder: PathBuilders.circleIn,
                    ),
                  ],
                ),
                SizedBox(height: 12),
                // AnimatedClipReveal
                Text('AnimatedClipReveal 随着变化揭示子部件'),
                Text('你已经按了按钮这么多次：'),
                SizedBox(height: 12),
                AnimatedClipRevealExample(value: _counter),
                SizedBox(height: 12),
                FloatingActionButton(
                  onPressed: _incrementCounter,
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                ),
                SizedBox(height: 12),
                // ClipPathTransition
                Text('ClipPathTransition 动画化 ClipPath'),
                Text('使用 AnimationController 来驱动动画'),
                ClipPathTransitionExample(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}