|
| 1 | +[English](./README.md) | 简体中文 |
| 2 | + |
| 3 | +# animated_interpolation |
| 4 | + |
| 5 | +[](https://pub.dartlang.org/packages/animated_interpolation) |
| 6 | + |
| 7 | +一个flutter插值动画插件,受到React Native插值动画的启发 |
| 8 | + |
| 9 | + |
| 10 | +## 使用 |
| 11 | +要使用此插件包,请将animated_interpolation作为依赖项添加到您的`pubspec.yaml`文件中,详见[dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/). |
| 12 | + |
| 13 | +## 示例 |
| 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 | + }); |
| 64 | +
|
| 65 | + controller.forward(); |
| 66 | + } |
| 67 | +
|
| 68 | + Widget build(BuildContext context) { |
| 69 | + return new AnimatedLogo1(animation: animation); |
| 70 | + } |
| 71 | +
|
| 72 | + dispose() { |
| 73 | + controller.dispose(); |
| 74 | + super.dispose(); |
| 75 | + } |
| 76 | +} |
| 77 | +``` |
0 commit comments