Skip to content

Commit 51404db

Browse files
committed
Update README.md
1 parent af26cec commit 51404db

File tree

1 file changed

+73
-9
lines changed

1 file changed

+73
-9
lines changed

README.md

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,78 @@
1+
English | [简体中文](./README_zh-CN.md)
2+
13
# animated_interpolation
24

3-
A new Flutter package.
5+
[![pub package](https://img.shields.io/pub/v/animated_interpolation.svg)](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+
});
464
5-
## Getting Started
65+
controller.forward();
66+
}
667
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+
}
1171
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

Comments
 (0)