|
| 1 | +English | [简体中文](./README_zh-CN.md) |
| 2 | + |
1 | 3 | # animated_interpolation |
2 | 4 |
|
3 | | -A new Flutter package. |
| 5 | +[](https://pub.dartlang.org/packages/animated_interpolation) |
| 6 | + |
| 7 | +A flutter interpolation animation inspired by the React Native interpolation animation |
| 8 | + |
| 9 | + |
| 10 | +## Usage |
| 11 | +To use this plugin, add `animated_interpolation` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/). |
| 12 | + |
| 13 | +## Example |
| 14 | + |
| 15 | +``` dart |
| 16 | +import 'package:flutter/material.dart'; |
| 17 | +import 'package:animated_interpolation/animated_interpolation.dart'; |
| 18 | +class AnimatedLogo1 extends AnimatedWidget { |
| 19 | + // The Tweens are static because they don't change. |
| 20 | + static final _opacityTween = new InterpolationTween<double>(inputRange: [0,0.2,1], outputRange: [0,0.5,1]); |
| 21 | + static final _sizeTween = new InterpolationTween(inputRange: [0,0.2,1], outputRange: [0,250,300]); |
| 22 | +
|
| 23 | + AnimatedLogo1({Key key, Animation<double> animation}) |
| 24 | + : super(key: key, listenable: animation); |
| 25 | +
|
| 26 | + Widget build(BuildContext context) { |
| 27 | + final Animation<double> animation = listenable; |
| 28 | + return new Center( |
| 29 | + child: new Opacity( |
| 30 | + opacity: _opacityTween.evaluate(animation), |
| 31 | + child: new Container( |
| 32 | + margin: new EdgeInsets.symmetric(vertical: 10.0), |
| 33 | + height: _sizeTween.evaluate(animation), |
| 34 | + width: _sizeTween.evaluate(animation), |
| 35 | + child: new FlutterLogo(), |
| 36 | + ), |
| 37 | + ), |
| 38 | + ); |
| 39 | + } |
| 40 | +} |
| 41 | +
|
| 42 | +class LogoApp4 extends StatefulWidget { |
| 43 | + _LogoAppState createState() => new _LogoAppState(); |
| 44 | +} |
| 45 | +
|
| 46 | +class _LogoAppState extends State<LogoApp4> with TickerProviderStateMixin { |
| 47 | + AnimationController controller; |
| 48 | + Animation<double> animation; |
| 49 | +
|
| 50 | + initState() { |
| 51 | + super.initState(); |
| 52 | + controller = new AnimationController( |
| 53 | + duration: const Duration(milliseconds: 2000), vsync: this); |
| 54 | + animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn); |
| 55 | +
|
| 56 | +
|
| 57 | + animation.addStatusListener((status) { |
| 58 | + if (status == AnimationStatus.completed) { |
| 59 | + controller.reverse(); |
| 60 | + } else if (status == AnimationStatus.dismissed) { |
| 61 | + controller.forward(); |
| 62 | + } |
| 63 | + }); |
4 | 64 |
|
5 | | -## Getting Started |
| 65 | + controller.forward(); |
| 66 | + } |
6 | 67 |
|
7 | | -This project is a starting point for a Dart |
8 | | -[package](https://flutter.dev/developing-packages/), |
9 | | -a library module containing code that can be shared easily across |
10 | | -multiple Flutter or Dart projects. |
| 68 | + Widget build(BuildContext context) { |
| 69 | + return new AnimatedLogo1(animation: animation); |
| 70 | + } |
11 | 71 |
|
12 | | -For help getting started with Flutter, view our |
13 | | -[online documentation](https://flutter.dev/docs), which offers tutorials, |
14 | | -samples, guidance on mobile development, and a full API reference. |
| 72 | + dispose() { |
| 73 | + controller.dispose(); |
| 74 | + super.dispose(); |
| 75 | + } |
| 76 | +} |
| 77 | +``` |
| 78 | +### Special thanks to react native vector ICONS library and its authors |
0 commit comments