前言
身在孤岛有很多无奈，比如说程序员属于比较偏门的职业。尤其是早些年，在行业里跳过几次槽后，可能你就已经认识整个圈子的人了。然后，再跳槽很可能就再次“偶遇”前同事了，用大潘的口头语来说就是：“好尴尬呀”。因此， 问起职业，往往只能是回答是搞计算机的。结果可能更尴尬，问的人可能笑嘻嘻地瞅着你，像看怪物一样看着你，接着突然冒出一句灵魂拷问：“我家电脑坏了，你能修不？”不过也不奇怪，那个时候在岛上重装一个 windows xp 系统都需要100大洋。唉，当初后悔没在中关村的鼎好多学习攒机技术……
image.png
这个印象太深刻，本篇我们就用动画复现一下这种表情，效果如下图所示。
笑脸动画.gif
animatedcontainer 介绍
在实现之前，先介绍一个新组件 —— animatedcontainer 。看这个免费精选名字大全就知道和 container 有关，实际上animatedcontainer是 flutter 中的一个动画容器，container 有的属性基本上它都有，我们看一下二者的构造方法的区别。
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的特性是所有涉及外观的属性都会生成一个过渡动效，当这些外观属性发生改变的时候就会使用生成的的动效来完成过渡，从而展现出动画效果。像我们要实现的笑嘻嘻的表情其实就是利用 animatedcontainer 实现的。
组件结构
我们的笑嘻嘻动效，底部是一个圆形脑袋，上面有两颗眼睛和一个嘴巴，其中眼睛和嘴巴有移动动效，而眼睛的眼珠还有方向的动效。这些动效都可以使用animatedcontainer来实现。大的页面结构如下：
细节实现
脑袋这个很容易，直接用原型裁剪，设置尺寸和底色即可：
// 脑袋 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; } }
最后，控制状态变量 seeleft 的变化通过一个按钮点击触发就好了。
floatingactionbutton: floatingactionbutton( child: icon(icons.play_arrow, color: colors.white), onpressed: () { setstate(() { seeleft = !seeleft; }); }, ),
最终运行效果如下，完整代码已提交至：动画相关代码。
笑脸动画.gif
总结
本篇主要介绍 animatedcontainer 的使用，对于要对 container 实现动效的场合，可以直接使用animatedcontainer进行替换，然后通过更改animatedcontainer的属性就可以实现过渡动效了。比如官网就搞了个随机的形状、弧度和颜色的动效，看着也挺有趣的。
animatedcontainer 官方动效.gif
以上就是flutter实现笑嘻嘻的动态表情的示例代码的详细内容，更多关于flutter动态表情的资料请关注<计算机技术网(www.ctvol.com)!!>其它相关文章！
需要了解更多c/c++开发分享Flutter实现笑嘻嘻的动态表情的示例代码，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/1081552.html