Flutterでクレヨンしんちゃんの愛情表現を実装。[AnimatedCrossFade]
今回はクレヨンしんちゃんのお尻から学ぶんやで！！
画像を2枚使ってアニメーションさせるんや！
てことで2枚書いたんや。ええお尻やな。
これをクロスフェードさせるんやで！！
そんな時はこれや！！
AnimatedCrossFade！！！
けど、ほんまは３枚の画像を順番に表示したかったんやけど、、
できんかったわ。
２枚以上の場合はこのクラスは使わん方がええんかもね。うむうむ
サンプルをgif動画で動き見せれるようにしたんやで。
ドヤ！
あ〜〜〜癒されるわ。。。
material.dartの他にdart:asyncってのをインポートしてんねんな。
import 'package:flutter/material.dart';
import 'dart:async';
非同期処理って言って一つの動作を実行してる時に他の動作も出来る様にする為に必要らしいわ。
なるほどな、ちょっと何言ってるかわからん。
ま、おいといて。
タイマーで秒決めて(seconds: 1)
void initState() {
_crossFadeTimer = Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
if (_crossFadeState == CrossFadeState.showFirst) {
_crossFadeState = CrossFadeState.showSecond;
} else {
_crossFadeState = CrossFadeState.showFirst;
}
});
});
super.initState();
}
もし(if) [showFirst]やったら次は[showSecond]表示してなって事で、
その他(else)やったら[showFirst]に戻ってって事やな。
で [showFirst]と[showSecond]の画像を決めてるのがここ
Widget build(BuildContext context) {
final image0 = Image.network(
'https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200518/20200518193201.png',
width: 180.0,
height: 180.0,
);
final image1 = Image.network(
'https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200518/20200518193208.png',
width: 180.0,
height: 180.0,
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(child: AnimatedCrossFade(
firstChild: image0,
secondChild: image1,
duration: Duration(seconds: 1),
crossFadeState: _crossFadeState,
),),
);
}
とりあえず画像を読み込んで、bodyの中で決めてるんやで。
今回は２枚の画像を入れ替えてアニメーションしたけど
次の課題は３つの画像で変化させる事やな、、
これが出来る方法を
知りたい。
尻だけに！！
コード貼り付けて動かすんやで！！
