tweenmax 0.1.1

A tween library plugin package for Flutter project, inspired from GreenSock TweenMax: https://greensock.com/docs/TweenMax.

tweenmax

TweenMax for Flutter project.

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Introduction

If you're a Javascript or Actionscript developer, you probably know TweenMax. This is an awesome tween library developed by GreenSock team. Animated Widgets in Flutter are great, but I find them not very familiar and customizable, I wished to have TweenMax in hands. Then I stopped wishing and tried to write TweenMax version for Flutter!

Notes:

TweenMax can only apply to TweenContainer - some kind of universal widget.

TweenContainer can be placed within any widgets in the widget tree of your app. But if put it inside a FlexRenderContainer (such as Row, Column), then you tween the value of positions (such as "top", "left",..), it won't work!

How to use:

TweenContainer tweenableContainer = TweenContainer(
	// initial data:
	data: TweenData(
		width: 100,
		height: 100,
		color: Colors.red
	),
	// child: Text("Hello")
);

// plug this container into your widget tree:
// ...
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			body: Stack(
				children: [
					tweenableContainer,

					Align(
            			alignment: Alignment.bottomCenter,
						child: FlatButton(
							child: Icon(Icons.arrow_back, color: Colors.white),
							color: Colors.blue,
							onPressed: (){
								// then apply a TweenMax when you want to animate it:
								TweenMax.to(
									target: tweenableContainer, 
									duration: 1, // in seconds
									ease: Curves.ease, // ease type
									// animate "tweenableContainer" to this data:
									data: TweenData(
										top: 300,
										width: 250,
										height: 250,
										color: Colors.yellow
									),
								);
							},
						)
					), // Align
				]
			)
		);
	}
// ...

Looks familiar, eh?

Which data of TweenContainer that you can animate?

For now, it supports:

• left (double)
• right (double)
• top (double)
• bottom (double)
• width (double)
• height (double)
• opacity (double)
• color (Color)
• rotation (double) -> in degrees
• scale (Offset)
• margin (EdgeInsetsGeometry)
• padding (EdgeInsetsGeometry)
• border (Border)
• borderRadius (BorderRadius)

TweenMax properties & methods:

Properties

• duration (double) -> duration of tween in seconds
• data (TweenData) -> destination tween data
• ease (Curve) -> animation ease type
• delay (double) -> in seconds
• repeat (int) -> number of tween repeat
• yoyo (bool) -> default is false, if it's "true", the animation will be reversed once it completed

Callback

• onUpdate(progress) (void)
• onComplete (void)

Example:

TweenMax.to(
	target: tweenableContainer, 
	duration: 1, 
	ease: Curves.ease,
	data: TweenData(
		top: 300,
		width: 250,
		height: 250,
		color: Colors.yellow
	),
	onUpdate: (progress){
		print("My progress is $progress");
	},
	onComplete: (){
		print("I'm done!");
	}
);

Methods

• play()
• stop()
• seek(timeScalePosition)

Example of controlling the tween:

To control the tween, you can do this:

TweenMax myTween = TweenMax.to(
	target: myTweenableContainer,
	duration: 1,
	autoplay: false, // make this tween stopped at the beginning
	data: TweenData(
		rotation: 180
	)
);

// when you want "myTween" to start, just do this:
myTween.play();

// if you want to stop "myTween":
myTween.stop();

// if you want to seek "myTween" at some time scale position:
myTween.seek(0.5);

Error report:

This plugin is not fully tested. Use as your own risk! Please report the issues for improvement.