animated_interpolation 0.3.2

Flutter Android iOS web

A flutter interpolation plugin inspired by the React Native interpolation animation

English | 简体中文

animated_interpolation #

pub package

图片名称 图片名称 图片名称

<br/> <br/>

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

ParameterRequiredDefaultDescription
inputRangeYESNULLSet the range of input,eg: [0,0.2,0.5,0.8,1]
outputRangeYESNULLSet the range of input eg: [10,100,105,200,300]
curveNO_Linear._()Set the input/output animation curve
extrapolateNONULLit will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value
extrapolateLeftNOExtrapolateType.extendIt will extrapolate the curve beyond the given left range
extrapolateRightNOExtrapolateType.extendIt 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

ParameterRequiredDefaultDescription
fromNoNULLIt's similar to the from for keyframes in css3,eg: AnimatedConfig(opacity: 0)
toNoNULLIt's similar to the to for keyframes in css3 ,eg:AnimatedConfig(opacity:1)
configMapNONULLSimilar to keyframes in css3,eg:{0:AnimatedConfig(opacity:0,translateX: 200),0.2:AnimatedConfig(opacity:1,translateX:100),1:AnimatedConfig(opacity:1,translateX:0)}
curveNO_Linear._()Set the input/output animation curve
durationNODuration(seconds: 1)Animation execution time
autoPlayNOfalseWhether to automatically animate
onAnimationStartNONULLA function that is called when the animation has been started.
onAnimationEndNONULLA function that is called when the animation has been completed successfully or cancelled
delayNODuration(seconds:0)Optionally delay animation
iterationCountNO1How many times to run the animation
iterationInfiniteNOfalseWhether to loop through the animation
iterationDelayNODuration(seconds: 0)For how long to pause between animation iterations
directionNOAnimatedDirection.normalDirection of animation, especially useful for repeating animations. Valid values: AnimatedDirection.normal, AnimatedDirection.reverse, AnimatedDirection.alternate, AnimatedDirection.alternateReverse

method

methodDescription
animateExecute 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 <br/><br/> ....... 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();
  }
}
2
likes
90
pub points
74%
popularity

A flutter interpolation plugin inspired by the React Native interpolation animation

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

lmy2534290808@gmail.com

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_interpolation