デザインをシュープシュープ
宝物のためにお金を払うのラインが、その時は特に今、間違いなくなくなって、五福の機能を設計し設定するように設計しているように見えるときアリペイに関しては、2016年には、関数呼び出しを呼び出すが、これは右で練習フラッタアニメーションのためのアニメーション機能です十分。（図では、我々は最終的に実現効果である）
アニメーションとして、それは3つの円のアニメーションの均一な増幅を持ち、そして第二に、真ん中のボタンがあるなど、ユーザーがクリックした後、それが表示されますが、まず、見てみましょうの空想図、特にそれらの設計そんなにいくつかのアニメーション把握することである効果、[OK]を、我々はそれを実践しなければなりません。
達成するために、コードをシュープシュープ
3つのアニメーションを実現
コードの実現のために、私たちは直接コードで私たちの下に、AnimationController、アニメーションやトゥイーンに使用される、アニメーション効果のこの種を達成するために、既に述べたように、その最初の3本の映画を達成することが確実です：
AnimationController controller;
Animation<double> animation1,animation2,animation3;
@override
void initState() {
// TODO: implement initState
super.initState();
controller=AnimationController(duration: widget.duration,vsync: this)..repeat();//初始化，动画控制器执行实践为2秒
animation1=Tween(
begin: 0.0,
end: 1.0)
.animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.0, 0.5,curve: Curves.linear)))
..addListener(
()=>setState(()=><String,void>{})
);//线性动画
animation2=Tween(
begin: 0.0,
end: 1.0)
.animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.25, 0.75,curve: Curves.linear)))
..addListener(
()=>setState(()=><String,void>{})
);//线性动画
animation3=Tween(
begin: 0.0,
end: 1.0)
.animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.5, 1.0,curve: Curves.linear)))
..addListener(
()=>setState(()=><String,void>{})
);//线性动画
}
@override
void dispose() {
// TODO: implement dispose
controller.dispose();//销毁释放
super.dispose();
}
各操作アニメーションは、コントローラが破壊されている必要があり、上記の3つのアニメーションがある覚え、（0.0、0.5）、（0.25、0.75）、（0.5、1.0）アニメーションの3つのセクションCurves.linear均一影響されています。
ラウンドの構築
私たちは映画を書くので、あなたは間違いなくコンポーネント上で実行する必要がある、と私たちはアセンブリフレームの効果を拡大我々は、円形のフレーム部品を実装する必要がありますので、次のように丸いです：
Widget _itemBuilder(index){
return SizedBox.fromSize(//创建具有指定大小的框
size: Size.square(widget.size),//宽高一致
child: widget.itemBuidler!=null?widget.itemBuidler(context,index):DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,//圆
border: Border.all(color: widget.color,width: widget.borderWidth), //指定边框颜色和宽
),
),
);
透明効果
増幅プロセスでは、だけでなくズームアニメーション効果をシュープシュープ、円は徐々にフェード、我々はまた、不透明度のコンポーネントを実装する必要がありますので、私たちはスタックを使用する必要があるので、円は、効果をオーバーレイ中心にコンポーネント、次のように：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("咻一咻功能实现"),),
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage("assets/timg.jpg"),
radius: 30.0,
),
Opacity(
opacity: 1.0-animation1.value,
child: Transform.scale(scale: animation1.value,child: _itemBuilder(0),),
),
Opacity(
opacity: 1.0-animation2.value,
child: Transform.scale(scale: animation2.value,child: _itemBuilder(1),),
),
Opacity(
opacity: 1.0-animation3.value,
child: Transform.scale(scale: animation3.value,child: _itemBuilder(2),),
),
],
),
),
);
}
あなたが達成したい場合は、前述のの一つをクリックすることで設定することができ、ボタンアセンブリCircleAvatarがある真ん中、徐々に消えて降順、透明度の変化を監視する、1.0-animation3.value：Transform.scale方法は拡大し、不透明ですライン上のジェスチャーコンポーネントGestureDetector、ONTAPリスニング（）プロパティ。
ここで、我々はコールアウトアウトコードAlipayのコールのすべてを完了している、私は次のように、もちろん、フラッターと他のコードとパラメータがある、達成することは非常に簡単であると考えています。
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key,
this.title,
this.size=500.0,
this.borderWidth=16.0,
this.itemBuidler,
this.duration=const Duration(milliseconds: 1800),
this.color=Colors.orange,
}) : assert(color!=null),
assert(size!=null),
assert(borderWidth!=null),
super(key: key);
final String title;
final double size;
final double borderWidth;
final Color color;
final Duration duration;
final IndexedWidgetBuilder itemBuidler;
@override
_MyHomePageState createState() => _MyHomePageState();
}
