{"id":24702209,"url":"https://github.com/flutter-studio/animated_interpolation","last_synced_at":"2025-10-09T08:30:20.127Z","repository":{"id":45199064,"uuid":"189536983","full_name":"flutter-studio/animated_interpolation","owner":"flutter-studio","description":"A flutter interpolation plugin inspired by the React Native interpolation animation","archived":false,"fork":false,"pushed_at":"2022-01-01T08:07:21.000Z","size":11633,"stargazers_count":20,"open_issues_count":2,"forks_count":17,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-06-20T22:43:12.234Z","etag":null,"topics":["animated","animation","flutter","interpolate","interpolation"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flutter-studio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-31T06:04:40.000Z","updated_at":"2024-06-20T22:43:12.235Z","dependencies_parsed_at":"2022-09-02T11:50:32.966Z","dependency_job_id":null,"html_url":"https://github.com/flutter-studio/animated_interpolation","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-studio%2Fanimated_interpolation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-studio%2Fanimated_interpolation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-studio%2Fanimated_interpolation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-studio%2Fanimated_interpolation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flutter-studio","download_url":"https://codeload.github.com/flutter-studio/animated_interpolation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235807687,"owners_count":19047985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","animation","flutter","interpolate","interpolation"],"created_at":"2025-01-27T05:32:22.295Z","updated_at":"2025-10-09T08:30:14.302Z","avatar_url":"https://github.com/flutter-studio.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"English | [简体中文](./README_zh-CN.md)\n\n# animated_interpolation\n\n[![pub package](https://img.shields.io/pub/v/animated_interpolation.svg)](https://pub.dartlang.org/packages/animated_interpolation)\n\n\u003cdiv align=start\u003e\n\u003cimg src=\"https://github.com/flutter-studio/animated_interpolation/blob/master/untitled.gif\" width = \"200\" alt=\"图片名称\" align=center /\u003e\n\u003cimg src=\"https://github.com/flutter-studio/animated_interpolation/blob/master/untitled2.gif\" width = \"200\" alt=\"图片名称\" align=center /\u003e\n\u003cimg src=\"https://github.com/flutter-studio/animated_interpolation/blob/master/untitled3.gif\" width = \"200\" alt=\"图片名称\" align=center /\u003e\n  \u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\nA flutter interpolation plugin inspired by the React Native interpolation animation\n\n\n## Usage\nTo use this plugin, add `animated_interpolation` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/).\n\n### InterpolationTween\n\n\n#### constructor\n\n| Parameter  |Required | Default   | Description |\n| :------------ |:--------:|:---------------:| :-----|\n| inputRange | YES | NULL  | Set the range of input,eg: ```[0,0.2,0.5,0.8,1]``` |\n| outputRange |YES| NULL | Set the range of input eg: ```[10,100,105,200,300]``` |\n| curve |NO| ```_Linear._()``` |  Set the input/output animation curve |\n| extrapolate |NO| NULL | it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value |\n| extrapolateLeft |NO| ExtrapolateType.extend  | It will extrapolate the curve beyond the given left range |\n| extrapolateRight |NO| ExtrapolateType.extend  | It will extrapolate the curve beyond the given right range |\n\n### SmartTabBar\n\n\u003e\u003eThe 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](https://github.com/flutter-studio/animated_interpolation/blob/master/example/lib/tabbar_example.dart)\n\n\n### SmartAnimatedWidget\n\n#### constructor\n\n| Parameter  |Required | Default   | Description |\n| :------------ |:--------:|:---------------:| :-----|\n| from | No | NULL  | It's similar to the ```from``` for keyframes in css3,eg: ```AnimatedConfig(opacity: 0)``` |\n| to |No| NULL | It's similar to the ```to``` for keyframes in css3 ,eg:```AnimatedConfig(opacity:1)```|\n| 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)}``` |\n| curve |NO| ```_Linear._()``` | Set the input/output animation curve |\n| duration |NO| Duration(seconds: 1)  | Animation execution time |\n| autoPlay |NO| false  | Whether to automatically animate |\n| onAnimationStart | NO | NULL |A function that is called when the animation has been started.|\n| onAnimationEnd | NO | NULL |A function that is called when the animation has been completed successfully or cancelled|\n| delay | NO | Duration(seconds:0)| Optionally delay animation |\n| iterationCount | NO | 1 | How many times to run the animation |\n| iterationInfinite| NO | false | Whether to loop through the animation |\n| iterationDelay | NO | Duration(seconds: 0)| For how long to pause between animation iterations |\n| direction| NO| AnimatedDirection.normal |Direction of animation, especially useful for repeating animations. Valid values: `AnimatedDirection.normal`, `AnimatedDirection.reverse`, `AnimatedDirection.alternate`, `AnimatedDirection.alternateReverse`|\n\n#### method\n\n| method  | Description |\n| :------------ |:--------:|\n| animate | Execute the appropriate animation |\n\n\n#### configMap\n\nThe existing configMap is shown below\n\n* fadeInDown\n* fadeInUp\n* fadeInLeft\n* fadeInRight\n* fadeInDownBig\n* fadeInUpBig\n* fadeInLeftBig\n* fadeInRightBig\n\n* fadeOutDown\n* fadeOutUp\n* fadeOutLeft\n* fadeOutRight\n* fadeOutDownBig\n* fadeOutUpBig\n* fadeOutLeftBig\n* fadeOutRightBig\n\u003cbr/\u003e\u003cbr/\u003e\n .......\nFor more information on configMap, please see [more details](https://github.com/flutter-studio/animated_interpolation/tree/master/lib)\n\n\n\n\n\n## Example\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:animated_interpolation/animated_interpolation.dart';\nSmartAnimatedWidget(\n        configMap: fadeInDown,\n        autoPlay: true,\n        child: Container(\n          margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 15),\n          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 15),\n          width: double.infinity,\n          color: Colors.red.shade300,\n          child: Center(\n            child: Text(text),\n          ),\n        ),\n      )\n\n```\n\n``` dart\nimport 'package:flutter/material.dart';\nimport 'package:animated_interpolation/animated_interpolation.dart';\nclass AnimatedLogo1 extends AnimatedWidget {\n  // The Tweens are static because they don't change.\n  static final _opacityTween = new InterpolationTween\u003cdouble\u003e(inputRange: [0,0.2,1], outputRange: [0,0.5,1]);\n  static final _sizeTween = new InterpolationTween(inputRange: [0,0.2,1], outputRange: [0,250,300]);\n\n  AnimatedLogo1({Key key, Animation\u003cdouble\u003e animation})\n      : super(key: key, listenable: animation);\n\n  Widget build(BuildContext context) {\n    final Animation\u003cdouble\u003e animation = listenable;\n    return new Center(\n      child: new Opacity(\n        opacity: _opacityTween.evaluate(animation),\n        child: new Container(\n          margin: new EdgeInsets.symmetric(vertical: 10.0),\n          height: _sizeTween.evaluate(animation),\n          width: _sizeTween.evaluate(animation),\n          child: new FlutterLogo(),\n        ),\n      ),\n    );\n  }\n}\n\nclass LogoApp4 extends StatefulWidget {\n  _LogoAppState createState() =\u003e new _LogoAppState();\n}\n\nclass _LogoAppState extends State\u003cLogoApp4\u003e with TickerProviderStateMixin {\n  AnimationController controller;\n  Animation\u003cdouble\u003e animation;\n\n  initState() {\n    super.initState();\n    controller = new AnimationController(\n        duration: const Duration(milliseconds: 2000), vsync: this);\n    animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn);\n\n\n    animation.addStatusListener((status) {\n      if (status == AnimationStatus.completed) {\n        controller.reverse();\n      } else if (status == AnimationStatus.dismissed) {\n        controller.forward();\n      }\n    });\n\n    controller.forward();\n  }\n\n  Widget build(BuildContext context) {\n    return new AnimatedLogo1(animation: animation);\n  }\n\n  dispose() {\n    controller.dispose();\n    super.dispose();\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter-studio%2Fanimated_interpolation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflutter-studio%2Fanimated_interpolation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter-studio%2Fanimated_interpolation/lists"}