animated_interpolation

Description:

animated interpolation

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),
),
),
)

copied to clipboard
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();
}
}
copied to clipboard