tweenme 0.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 76

TweenMe for Flutter #

A tween library framework for Flutter project, inspired from TweenMax (https://greensock.com/).

https://www.youtube.com/watch?v=5bfqgPPCdjA

alt text

Introduction #

If you're a Javascript or Actionscript developer, you probably know TweenMax - this is an awesome tween library developed by GreenSock team, which have a huge support for doing animation.

Animated Widgets in Flutter are great, but I find them not very familiar and customizable. Since TweenMax hasn't been available for Flutter, so I tried to write an alternative version - I named it TweenMe!

Important notes: #

Firstly, you need to be aware of TweenContainer, this is an universal widget. TweenMe can only apply to TweenContainer.

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")
);

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

          Align(
            alignment: Alignment.bottomCenter,
            child: FlatButton(
              child: Icon(Icons.arrow_back, color: Colors.white),
              color: Colors.blue,
              onPressed: (){
                // then apply a TweenMe when you want to animate it:
                TweenMe.to(
                  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?

More examples can be found here: #

https://github.com/mrgoonie/flutter_tweenme/tree/master/lib/screens

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)

TweenMe 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(target) (void)

Example: #

TweenMe.to(
  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: (target){
    print("I'm done!");
  }
);

TweenMe Methods #

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

Example of controlling the tween: #

To control the tween, you can do this:


TweenMe myTween = TweenMe.to(
  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);

// dispose the tween:
myTween.dispose();

TweenContainer #

You want to update the color, opacity, transformation or position of TweenContainer instantly? Here you go:

TweenContainer myContainer = TweenContainer(
  data: TweenData(
    width: 200,
    height: 200,
    color: Colors.red
  )
);

// Let update the color of this container after 2 seconds:
Future.delayed(Duration(milliseconds: 2000), (){
  tweenContainer.set(TweenData(color: Colors.blue));
});

Easy, right?

The TweenContainer can kill all the applied tweens itself, with:

myContainer.dispose();

Extra Eases: #

(Yes, TweenMe has more eases than Flutter)

Beside the default curves of Flutter:

  • Ease.linear (same with Curves.linear)
  • Ease.decelerate (same with Curves.decelerate)
  • Ease.ease (same with Curves.ease)
  • Ease.easeOut (same with Curves.easeOut)
  • Ease.easeIn (same with Curves.easeIn)
  • Ease.easeInOut (same with Curves.easeInOut)
  • Ease.fastOutSlowIn (same with Curves.fastOutSlowIn)
  • Ease.bounceIn (same with Curves.bounceIn)
  • Ease.bounceOut (same with Curves.bounceOut)
  • Ease.bounceInOut (same with Curves.bounceInOut)
  • Ease.elasticOut (same with Curves.elasticOut)
  • Ease.elasticIn (same with Curves.elasticIn)
  • Ease.elasticInOut (same with Curves.elasticInOut)

You also can use:

  • Ease.backIn
  • Ease.backOut
  • Ease.backInOut
  • Ease.slowMo
  • Ease.sineIn
  • Ease.sineOut
  • Ease.sineInOut

Check this example to understand more about eases: https://github.com/mrgoonie/flutter_tweenme/tree/master/lib/screens/easing_example.dart

Error report: #

This plugin hasn't been fully tested. Use as your own risk! Please report issues for further improvement.

[0.1.4] - Added default ease & duration

  • Added default ease: Ease.ease
  • Added default duration: 1.0 (second)

[0.1.3] - Added more eases & Improve performance

  • Added more eases: Ease.backIn, Ease.backOut, Ease.backInOut, Ease.slowMo, Ease.sineIn, Ease.sineOut, Ease.sineInOut.
  • Added more examples.
  • Added dispose() and set(TweenData) function to TweenContainer.
  • Updated TweenContainer constructor, clean some code.
  • Improve performance.

[0.1.2] - Published the package.

  • Fixed "opacity" bug (under 0 and over 1).
  • Fixed TLRB value error when undefined.
  • Changed "onComplete" callback behavior: return "target".
  • Updated TweenMe constructor, make tween's target required.
  • Updated homepage.
  • Added example & documentation.
  • Fixed warning messages.
  • TODO: Add more example projects.
  • TODO: Working with tween timeline.

example/main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomeScreen()
    );
  } 
}

class HomeScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    
    TweenContainer tweenContainer = TweenContainer(
      data: TweenData(
        top: 100, 
        left: 100,
        width: 100,
        height: 100,
        color: Colors.red
      ),
      child: Icon(Icons.star, color: Colors.white)
    );

    return Container(
      color: Colors.black,
      child: Stack(
        children: [
          // tween container
          Align(
            alignment: Alignment.center,
            child: tweenContainer
          ),
          
          // button
          Align(
            alignment: Alignment(0, 0.8),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                FlatButton(
                  child: Icon(Icons.arrow_back, color: Colors.white),
                  color: Colors.blue,
                  onPressed: (){
                    TweenMe.killTweensOf(tweenContainer);
                    TweenMe.to(
                      tweenContainer,
                      duration: 1,
                      ease: Curves.fastOutSlowIn,
                      data: TweenData(
                        width: 100,
                        height: 100,
                        rotation: 0,
                        scale: Offset(1, 1),
                        opacity: 1,
                        color: Colors.red,
                        // border: Border.all(color: Colors.white, width: 1)
                      ),
                    );
                  },
                ),
                
                // spacing
                SizedBox(width: 5),

                FlatButton(
                  child: Icon(Icons.arrow_forward, color: Colors.white),
                  color: Colors.blue,
                  onPressed: (){
                    TweenMe.killTweensOf(tweenContainer);
                    TweenMe.to(
                      tweenContainer,
                      duration: 1,
                      data: TweenData(
                        width: 250,
                        height: 250,
                        rotation: 180,
                        // scale: Offset(3, 3),
                        // transformOrigin: Offset(0.5, 0.5),
                        color: Colors.blue
                      ),
                      ease: Curves.ease,
                      // repeat: -1,
                      // yoyo: true,
                    );
                  },
                ),

                
              ],
            )
            
          )
          
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  tweenme: ^0.1.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:tweenme/tweenme.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
54
Health:
Code health derived from static analysis. [more]
97
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
76
Learn more about scoring.

We analyzed this package on Oct 18, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/tween_easing.dart. (-2.48 points)

Analysis of lib/tween_easing.dart reported 5 hints:

line 46 col 18: The value of the local variable 's' isn't used.

line 48 col 18: The value of the local variable '_p2' isn't used.

line 76 col 18: The value of the local variable 's' isn't used.

line 78 col 18: The value of the local variable '_p2' isn't used.

line 106 col 18: The value of the local variable 's' isn't used.

Fix lib/tween_container.dart. (-0.50 points)

Analysis of lib/tween_container.dart reported 1 hint:

line 7 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: TweenContainer.data, TweenContainer._state, TweenContainer._tweens

Fix lib/tweenme.dart. (-0.50 points)

Analysis of lib/tweenme.dart reported 1 hint:

line 155 col 9: The class 'Future' wasn't exported from 'dart:core' until version 2.1, but this code is required to be able to run on earlier versions.

Format lib/tween_data.dart.

Run flutter format to format lib/tween_data.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test