快捷導(dǎo)航

Flutter實(shí)現(xiàn)笑嘻嘻的動(dòng)態(tài)表情的示例代碼

更新時(shí)間：2022年04月24日 08:36:37 作者：島上碼農(nóng)

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

前言

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

image.png

這個(gè)印象太深刻，本篇我們就用動(dòng)畫(huà)復(fù)現(xiàn)一下這種表情，效果如下圖所示。

笑臉動(dòng)畫(huà).gif

AnimatedContainer 介紹

在實(shí)現(xiàn)之前，先介紹一個(gè)新組件 —— AnimatedContainer ?？催@個(gè)名字就知道和 Container 有關(guān)，實(shí)際上AnimatedContainer是 Flutter 中的一個(gè)動(dòng)畫(huà)容器，Container 有的屬性基本上它都有，我們看一下二者的構(gòu)造方法的區(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,
??});

可以看到，實(shí)際上 AnimatedContainer 和 Container 只差了3個(gè)屬性，而這三個(gè)屬性就是控制動(dòng)畫(huà)的參數(shù)：

curve：動(dòng)畫(huà)曲線，默認(rèn)是線性；
duration：動(dòng)效時(shí)長(zhǎng)參數(shù)；
onEnd：動(dòng)效結(jié)束后的回調(diào)方法。

AnimatedContainer的特性是所有涉及外觀的屬性都會(huì)生成一個(gè)過(guò)渡動(dòng)效，當(dāng)這些外觀屬性發(fā)生改變的時(shí)候就會(huì)使用生成的的動(dòng)效來(lái)完成過(guò)渡，從而展現(xiàn)出動(dòng)畫(huà)效果。像我們要實(shí)現(xiàn)的笑嘻嘻的表情其實(shí)就是利用 AnimatedContainer 實(shí)現(xiàn)的。

組件結(jié)構(gòu)

我們的笑嘻嘻動(dòng)效，底部是一個(gè)圓形腦袋，上面有兩顆眼睛和一個(gè)嘴巴，其中眼睛和嘴巴有移動(dòng)動(dòng)效，而眼睛的眼珠還有方向的動(dòng)效。這些動(dòng)效都可以使用AnimatedContainer來(lái)實(shí)現(xiàn)。大的頁(yè)面結(jié)構(gòu)如下：

細(xì)節(jié)實(shí)現(xiàn)

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

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

眼睛左眼和右眼有點(diǎn)不一樣，眼球?qū)嶋H就是AnimatedContainer使用 borderRadius 裁剪為圓形，而眼珠是AnimatedContainer的子組件 —— 黑色的圓圈。具體實(shí)現(xiàn)向左或向右看使用一個(gè)變量 seeLeft 控制，而向左向右的轉(zhuǎn)換過(guò)渡效果都由 AnimatedContainer 控制。

seeLeft = true，向左看：眼珠對(duì)齊的方式是 bottomLeft，左眼縱向方向上稍微往下移一點(diǎn)；右眼往左移動(dòng)一定的位置，這樣就會(huì)有向左看的效果了；
seeLeft = false，向右看：眼珠對(duì)齊的方式是 bottomRight，右眼縱向方向上稍微往下移一點(diǎn)；左眼往右移動(dòng)一定的位置，這樣就會(huì)有向右看的效果了；

實(shí)現(xiàn)代碼如下：

//?左眼
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,
??????),
????),
??),
),

這里的眼珠對(duì)齊使用的就是AnimatedContainer 的 alignment參數(shù)控制，而眼球的位置使用 Matrix4 的平移實(shí)現(xiàn)：

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

笑臉的實(shí)現(xiàn)使用ClipPath，繪制兩條弧線就可以了，然后平移的幅度和眼珠保持一致，就可以感覺(jué)是轉(zhuǎn)頭的效果了，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,
??????),
????),
??),
),

笑嘻嘻的嘴巴的裁剪類(lèi) 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 的變化通過(guò)一個(gè)按鈕點(diǎn)擊觸發(fā)就好了。

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

最終運(yùn)行效果如下，完整代碼已提交至：動(dòng)畫(huà)相關(guān)代碼。

笑臉動(dòng)畫(huà).gif

總結(jié)

本篇主要介紹 AnimatedContainer 的使用，對(duì)于要對(duì) Container 實(shí)現(xiàn)動(dòng)效的場(chǎng)合，可以直接使用AnimatedContainer進(jìn)行替換，然后通過(guò)更改AnimatedContainer的屬性就可以實(shí)現(xiàn)過(guò)渡動(dòng)效了。比如官網(wǎng)就搞了個(gè)隨機(jī)的形狀、弧度和顏色的動(dòng)效，看著也挺有趣的。