animated_interpolation 0.2.5

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

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

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

0.2.5 #

  • Add properties onAnimationBegin, onAnimationEnd, iterationCount, direction, delay, iterationDelay, and iterationInfinite

0.2.1 #

  • Add flipInX flipInY flipOutX flipOutY

0.2.0 #

  • AnimatedConfig adds scaleX, scaleY, and rotate attributes
  • Add some commonly used configMap, for example, zooming, bounce, fading, etc

0.1.2 #

  • add SmartAnimatedWidget

0.1.1 #

  • add ColorInterpolationTween

0.1.0 #

  • A flutter interpolation plugin inspired by the React Native interpolation animation

example/README.md

example #

A new Flutter application.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

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

Use this package as a library

1. Depend on it

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


dependencies:
  animated_interpolation: ^0.2.5

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:animated_interpolation/animated_interpolation.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
50
Learn more about scoring.

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

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/animated_interpolation.dart. (-1 points)

Analysis of lib/animated_interpolation.dart reported 2 hints:

line 164 col 21: The value of the local variable 'extrapolateLeft' isn't used.

line 167 col 21: The value of the local variable 'extrapolateRight' isn't used.

Format lib/animated_config.dart.

Run flutter format to format lib/animated_config.dart.

Format lib/attention_seekers.dart.

Run flutter format to format lib/attention_seekers.dart.

Fix additional 4 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/bounce.dart (Run flutter format to format lib/bounce.dart.)
  • lib/fading.dart (Run flutter format to format lib/fading.dart.)
  • lib/sliding.dart (Run flutter format to format lib/sliding.dart.)
  • lib/zooming.dart (Run flutter format to format lib/zooming.dart.)

Dependencies

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