restoqueteam / animated_interpolation

A flutter interpolation plugin inspired by the React Native interpolation animation

English | 简体中文

animated_interpolation

A flutter interpolation plugin inspired by the React Native interpolation animation

Usage

To use this plugin, add animated_interpolation as a dependency in your pubspec.yaml file.

InterpolationTween

constructor

Parameter	Required	Default	Description
inputRange	YES	NULL	Set the range of input,eg: [0,0.2,0.5,0.8,1]
outputRange	YES	NULL	Set the range of input eg: [10,100,105,200,300]
curve	NO	_Linear._()	Set the input/output animation curve
extrapolate	NO	NULL	it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value
extrapolateLeft	NO	ExtrapolateType.extend	It will extrapolate the curve beyond the given left range
extrapolateRight	NO	ExtrapolateType.extend	It will extrapolate the curve beyond the given right range

SmartTabBar

The SmartTabbar Widget is formed by adding a indicatorBuilder property to the official Tabbar，It is used in the same way as the official Tabbar，For details, please see example

SmartAnimatedWidget

constructor

Parameter	Required	Default	Description
from	No	NULL	It's similar to the from for keyframes in css3,eg: AnimatedConfig(opacity: 0)
to	No	NULL	It's similar to the to for keyframes in css3 ,eg:AnimatedConfig(opacity:1)
configMap	NO	NULL	Similar to keyframes in css3,eg:{0:AnimatedConfig(opacity:0,translateX: 200),0.2:AnimatedConfig(opacity:1,translateX:100),1:AnimatedConfig(opacity:1,translateX:0)}
curve	NO	_Linear._()	Set the input/output animation curve
duration	NO	Duration(seconds: 1)	Animation execution time
autoPlay	NO	false	Whether to automatically animate
onAnimationStart	NO	NULL	A function that is called when the animation has been started.
onAnimationEnd	NO	NULL	A function that is called when the animation has been completed successfully or cancelled
delay	NO	Duration(seconds:0)	Optionally delay animation
iterationCount	NO	1	How many times to run the animation
iterationInfinite	NO	false	Whether to loop through the animation
iterationDelay	NO	Duration(seconds: 0)	For how long to pause between animation iterations
direction	NO	AnimatedDirection.normal	Direction of animation, especially useful for repeating animations. Valid values: AnimatedDirection.normal, AnimatedDirection.reverse, AnimatedDirection.alternate, AnimatedDirection.alternateReverse

method

method	Description
animate	Execute the appropriate animation

configMap

The existing configMap is shown below

• fadeInDown

• fadeInUp

• fadeInLeft

• fadeInRight

• fadeInDownBig

• fadeInUpBig

• fadeInLeftBig

• fadeInRightBig

• fadeOutDown

• fadeOutUp

• fadeOutLeft

• fadeOutRight

• fadeOutDownBig

• fadeOutUpBig

• fadeOutLeftBig

• fadeOutRightBig
  
  ....... For more information on configMap, please see more details

Example

import 'package:flutter/material.dart';
import 'package:animated_interpolation/animated_interpolation.dart';
SmartAnimatedWidget(
        configMap: fadeInDown,
        autoPlay: true,
        child: Container(
          margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
          width: double.infinity,
          color: Colors.red.shade300,
          child: Center(
            child: Text(text),
          ),
        ),
      )

import 'package:flutter/material.dart';
import 'package:animated_interpolation/animated_interpolation.dart';
class AnimatedLogo1 extends AnimatedWidget {
  // The Tweens are static because they don't change.
  static final _opacityTween = new InterpolationTween<double>(inputRange: [0,0.2,1], outputRange: [0,0.5,1]);
  static final _sizeTween = new InterpolationTween(inputRange: [0,0.2,1], outputRange: [0,250,300]);

  AnimatedLogo1({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return new Center(
      child: new Opacity(
        opacity: _opacityTween.evaluate(animation),
        child: new Container(
          margin: new EdgeInsets.symmetric(vertical: 10.0),
          height: _sizeTween.evaluate(animation),
          width: _sizeTween.evaluate(animation),
          child: new FlutterLogo(),
        ),
      ),
    );
  }
}

class LogoApp4 extends StatefulWidget {
  _LogoAppState createState() => new _LogoAppState();
}

class _LogoAppState extends State<LogoApp4> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn);


    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });

    controller.forward();
  }

  Widget build(BuildContext context) {
    return new AnimatedLogo1(animation: animation);
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}