Flutter實現笑嘻嘻的動態(tài)表情的示例代碼

更新時間：2022年04月24日 08:36:37 作者：島上碼農

這篇文章主要為大家介紹了如何利用Flutter實現笑嘻嘻的動態(tài)表情，文中的示例代碼講解詳細，對我們學習Flutter有一定幫助，感興趣的可以了解一下

前言

身在孤島有很多無奈，比如說程序員屬于比較偏門的職業(yè)。尤其是早些年，在行業(yè)里跳過幾次槽后，可能你就已經認識整個圈子的人了。然后，再跳槽很可能就再次“偶遇”前同事了，用大潘的口頭語來說就是：“好尷尬呀”。因此，問起職業(yè)，往往只能是回答是搞計算機的。結果可能更尷尬，問的人可能笑嘻嘻地瞅著你，像看怪物一樣看著你，接著突然冒出一句靈魂拷問：“我家電腦壞了，你能修不？”不過也不奇怪，那個時候在島上重裝一個 Windows XP 系統(tǒng)都需要100大洋。唉，當初后悔沒在中關村的鼎好多學習攢機技術……

image.png

這個印象太深刻，本篇我們就用動畫復現一下這種表情，效果如下圖所示。

笑臉動畫.gif

AnimatedContainer 介紹

在實現之前，先介紹一個新組件 —— AnimatedContainer 。看這個名字就知道和 Container 有關，實際上AnimatedContainer是 Flutter 中的一個動畫容器，Container 有的屬性基本上它都有，我們看一下二者的構造方法的區(qū)別。

AnimatedContainer({
????Key??key,
????this.alignment,
????this.padding,
????Color??color,
????Decoration??decoration,
????this.foregroundDecoration,
????double??width,
????double??height,
????BoxConstraints??constraints,
????this.margin,
????this.transform,
????this.transformAlignment,
????this.child,
????this.clipBehavior?=?Clip.none,
????Curve?curve?=?Curves.linear,
????required?Duration?duration,
????VoidCallback??onEnd,
??});

Container({
????Key??key,
????this.alignment,
????this.padding,
????this.color,
????this.decoration,
????this.foregroundDecoration,
????double??width,
????double??height,
????BoxConstraints??constraints,
????this.margin,
????this.transform,
????this.transformAlignment,
????this.child,
????this.clipBehavior?=?Clip.none,
??});

可以看到，實際上 AnimatedContainer 和 Container 只差了3個屬性，而這三個屬性就是控制動畫的參數：

curve：動畫曲線，默認是線性；
duration：動效時長參數；
onEnd：動效結束后的回調方法。

AnimatedContainer的特性是所有涉及外觀的屬性都會生成一個過渡動效，當這些外觀屬性發(fā)生改變的時候就會使用生成的的動效來完成過渡，從而展現出動畫效果。像我們要實現的笑嘻嘻的表情其實就是利用 AnimatedContainer 實現的。

組件結構

我們的笑嘻嘻動效，底部是一個圓形腦袋，上面有兩顆眼睛和一個嘴巴，其中眼睛和嘴巴有移動動效，而眼睛的眼珠還有方向的動效。這些動效都可以使用AnimatedContainer來實現。大的頁面結構如下：

細節(jié)實現

腦袋這個很容易，直接用原型裁剪，設置尺寸和底色即可：

//?腦袋
ClipOval(
??child:?Container(
????width:?120,
????height:?120,
????color:?Colors.blue,
??),
),

眼睛左眼和右眼有點不一樣，眼球實際就是AnimatedContainer使用 borderRadius 裁剪為圓形，而眼珠是AnimatedContainer的子組件 —— 黑色的圓圈。具體實現向左或向右看使用一個變量 seeLeft 控制，而向左向右的轉換過渡效果都由 AnimatedContainer 控制。

seeLeft = true，向左看：眼珠對齊的方式是 bottomLeft，左眼縱向方向上稍微往下移一點；右眼往左移動一定的位置，這樣就會有向左看的效果了；
seeLeft = false，向右看：眼珠對齊的方式是 bottomRight，右眼縱向方向上稍微往下移一點；左眼往右移動一定的位置，這樣就會有向右看的效果了；

實現代碼如下：

//?左眼
Positioned(
??top:?marginTop,
??left:?marginLR,
??child:?AnimatedContainer(
????alignment:
????????seeLeft???Alignment.bottomLeft?:?Alignment.bottomRight,
????padding:?EdgeInsets.all(eyePadding),
????transform:?Matrix4.identity()
??????..translate(
??????????seeLeft???0.0?:?sideOffset,?seeLeft???eyeOffset?:?0.0,?0),
????duration:?Duration(seconds:?1),
????curve:?Curves.fastOutSlowIn,
????width:?eyeSize,
????height:?eyeSize,
????decoration:?BoxDecoration(
??????color:?Colors.white,
??????borderRadius:?BorderRadius.circular(eyeSize?/?2),
????),
????child:?ClipOval(
??????child:?Container(
????????color:?Colors.black,
????????width:?eyeBallSize,
????????height:?eyeBallSize,
??????),
????),
??),
),
//?右眼
Positioned(
??top:?marginTop,
??right:?marginLR,
??child:?AnimatedContainer(
????alignment:
????????seeLeft???Alignment.bottomLeft?:?Alignment.bottomRight,
????padding:?EdgeInsets.all(eyePadding),
????transform:?Matrix4.identity()
??????..translate(seeLeft???-sideOffset?:?0.0,
??????????seeLeft???0.0?:?eyeOffset,?0),
????duration:?Duration(seconds:?1),
????curve:?Curves.fastOutSlowIn,
????width:?eyeSize,
????height:?eyeSize,
????decoration:?BoxDecoration(
??????color:?Colors.white,
??????borderRadius:?BorderRadius.circular(eyeSize?/?2),
????),
????child:?ClipOval(
??????child:?Container(
????????color:?Colors.black,
????????width:?eyeBallSize,
????????height:?eyeBallSize,
??????),
????),
??),
),

這里的眼珠對齊使用的就是AnimatedContainer 的 alignment參數控制，而眼球的位置使用 Matrix4 的平移實現：

Matrix4.identity()
??..translate(seeLeft???-sideOffset?:?0.0,?seeLeft???0.0?:?eyeOffset,?0),

笑臉的實現使用ClipPath，繪制兩條弧線就可以了，然后平移的幅度和眼珠保持一致，就可以感覺是轉頭的效果了，AnimatedContainer 部分的代碼如下：

//?笑嘻嘻的嘴巴
Positioned(
??bottom:?10,
??height:?40,
??left:?0,
??child:?AnimatedContainer(
????alignment:
????????seeLeft???Alignment.bottomLeft?:?Alignment.bottomRight,
????padding:?EdgeInsets.all(4.0),
????transform:?Matrix4.identity()
??????..translate(seeLeft???25.0?:?35.0,?0,?0),
????duration:?Duration(seconds:?1),
????curve:?Curves.fastOutSlowIn,
????child:?ClipPath(
??????clipper:?SmileClipPath(),
??????child:?Container(
????????width:?60,
????????height:?40,
????????color:?Colors.yellow,
??????),
????),
??),
),

笑嘻嘻的嘴巴的裁剪類 SmileClipPath 代碼如下：

class?SmileClipPath?extends?CustomClipper<Path>?{
??@override
??Path?getClip(Size?size)?{
????return?Path()
??????..moveTo(0,?0)
??????..arcToPoint(
????????Offset(size.width,?0),
????????radius:?Radius.circular(size.width?*?0.55),
????????clockwise:?false,
??????)
??????..arcToPoint(
????????Offset(0,?0),
????????radius:?Radius.circular(size.width),
????????clockwise:?true,
??????);
??}

??@override
??bool?shouldReclip(covariant?CustomClipper<Path>?oldClipper)?{
????return?false;
??}
}

最后，控制狀態(tài)變量 seeLeft 的變化通過一個按鈕點擊觸發(fā)就好了。

floatingActionButton:?FloatingActionButton(
??child:?Icon(Icons.play_arrow,?color:?Colors.white),
??onPressed:?()?{
????setState(()?{
??????seeLeft?=?!seeLeft;
????});
??},
),

最終運行效果如下，完整代碼已提交至：動畫相關代碼。

笑臉動畫.gif

總結

本篇主要介紹 AnimatedContainer 的使用，對于要對 Container 實現動效的場合，可以直接使用AnimatedContainer進行替換，然后通過更改AnimatedContainer的屬性就可以實現過渡動效了。比如官網就搞了個隨機的形狀、弧度和顏色的動效，看著也挺有趣的。