tap_animation_kit 0.0.1

Animation kit as a Flutter pakage.

Tap Animation Kit

A flutter package which contains a collection of some cool and awesome animations.

Table of contents

• Installing
• Usage
  • Align Transition
  • Alignment
  • Cross Fade
  • Default Text Style
  • Opacity
  • Padding
  • Rotation Transition
• Bugs or Requests
• License

Installing

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  tap_animation_kit: ^0.0.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

3. Import it

Now in your Dart code, you can use:

import 'package:tap_animation_kit/tap_animation_kit.dart';

Usage

You can use the animation for text and image.

Align Transition

TextAnimation(
    animationBahavior: TapAlignTransition(
        props: AlignTransitionModel(
        alignment: alignTransition.animate(controller),
        child: const Text(
            'AT',
            style: TextStyle(fontSize: 20, color: Colors.white),
        ),
        ),
    ),
);

Alignment

TextAnimation(
    animationBahavior: TapAnimatedAlign(
        props: AlignmentModel(
        alignment: store.alignment,
        child: const Text('TextAlignmentExample',
            style: TextStyle(color: Colors.red, fontSize: 20)),
        curve: Curves.easeInQuint,
        duration: const Duration(seconds: 1),
        ),
    ),
);

Cross Fade

TextAnimation(
    animationBahavior: TapAnimatedCrossFade(
        props: CrossFadeModel(
        alignment: Alignment.topCenter,
        crossFadeState: store.crossFadeState,
        duration: const Duration(seconds: 1),
        firstCurve: Curves.easeInCubic,
        firstChild: const Text(
            'FirstTextCrossFade',
            style: TextStyle(
            color: Colors.orange,
            fontSize: 20,
            ),
        ),
        secondChild: const Text(
            'SecondTextCrossFade',
            style:
                TextStyle(color: Colors.blueGrey, fontSize: 20),
        ),
        secondCurve: Curves.bounceInOut,
        sizeCurve: Curves.easeOutExpo,
        ),
    ),
);

Default Text Style

TextAnimation(
    animationBahavior: TapAnimatedDefaultTextStyle(
        props: DefaultTextStyleModel(
        duration: const Duration(seconds: 2),
        textAlign: TextAlign.center,
        style: store.defaultTextStyle,
        child: const Text('DefaultTextStyleExample'),
        ),
    ),
);

Opacity

TextAnimation(
    animationBahavior: TapAnimatedOpacity(
        props: OpacityModel(
        child: const Text('TextOpacityExample',
            style:
                TextStyle(color: Colors.green, fontSize: 20.0)),
        opacity: store.opacity,
        curve: Curves.easeInCubic,
        duration: const Duration(seconds: 1),
        ),
    ),
);

Padding

TextAnimation(
    animationBahavior: TapAnimatedPadding(
        props: PaddingModel(
        padding: store.padding,
        child: const Text('TextPaddingExample',
            style:
                TextStyle(color: Colors.purple, fontSize: 20)),
        curve: Curves.linear,
        duration: const Duration(seconds: 1),
        ),
    ),
);

Rotation Transition

TextAnimation(
    animationBahavior: TapRotationTransition(
        props: RotationTransitionModel(
            child: const Text('R'),
            alignment: Alignment.topCenter,
            turns: CurvedAnimation(
            parent: controller,
            curve: Curves.bounceOut,
            ),
        ),
    ),
);

Example

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

void main() => runApp(MyApp());

final AnimationStore store = AnimationStore();

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AlignmentGeometryTween alignTransition;
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 3));
    alignTransition = AlignmentGeometryTween(
      begin: Alignment.bottomLeft,
      end: Alignment.topCenter,
    );
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Tap Animation Kit'),
        ),
        body: Center(
            child: Container(
              height: 120,
              width: 120,
              color: Colors.green,
              child: TextAnimation(
                animationBahavior: TapAlignTransition(
                  props: AlignTransitionModel(
                    alignment: alignTransition.animate(controller),
                    child: const Text(
                      'AT',
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
              ),
            ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.touch_app),
          onPressed: () {

            setState(() {
              alignTransition = alignTransition.end == Alignment.bottomRight
                  ? AlignmentGeometryTween(
                      begin: Alignment.bottomLeft,
                      end: Alignment.topCenter,
                    )
                  : AlignmentGeometryTween(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomRight,
                    );
            });

            controller.repeat();
          },
        ),
      ),
    );
  }
}

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.

License

Animated-Text-Kit is licensed under BSD license. View license.