扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 移动开发 >Flutter实现笑嘻嘻的动态表情的示例代码
  • 855

0
分享到

Flutter实现笑嘻嘻的动态表情的示例代码

2024-04-02 19:04:59 855人浏览 薄情痞子
摘要

目录前言AnimatedContainer 介绍组件结构细节实现总结前言 身在孤岛有很多无奈，比如说程序员属于比较偏门的职业。尤其是早些年，在行业里跳过几次槽后，可能你就已经认识整个

前言

身在孤岛有很多无奈，比如说程序员属于比较偏门的职业。尤其是早些年，在行业里跳过几次槽后，可能你就已经认识整个圈子的人了。然后，再跳槽很可能就再次“偶遇”前同事了，用大潘的口头语来说就是：“好尴尬呀”。因此， 问起职业，往往只能是回答是搞计算机的。结果可能更尴尬，问的人可能笑嘻嘻地瞅着你，像看怪物一样看着你，接着突然冒出一句灵魂拷问：“我家电脑坏了，你能修不？”不过也不奇怪，那个时候在岛上重装一个 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动态表情的资料请关注编程网其它相关文章！

--结束END--

本文标题: Flutter实现笑嘻嘻的动态表情的示例代码

本文链接: https://lsjlt.com/news/147050.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter实现笑嘻嘻的动态表情的示例代码
    目录前言AnimatedContainer 介绍组件结构细节实现总结前言 身在孤岛有很多无奈，比如说程序员属于比较偏门的职业。尤其是早些年，在行业里跳过几次槽后，可能你就已经认识整个...
    99+
    2024-04-02
  • Flutter怎么实现笑嘻嘻的动态表情
    这篇文章主要介绍“Flutter怎么实现笑嘻嘻的动态表情”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Flutter怎么实现笑嘻嘻的动态表情”文章能帮助大家解决问题。效果如下图所示AnimatedC...
    99+
    2023-06-30
  • Element实现动态表格的示例代码
    目录【代码背景】【代码实现】#1# -> 代码复用的基础是你需要一个可复用的组件#2# -> 在展示页面使用动态表格组件#3# -> 如何给动态表格根据需求动态添加...
    99+
    2024-04-02
  • C语言实现动态链表的示例代码
    目录结构体定义已经函数声明函数实现创建一个链表判断链表是否为空获得链表中节点的个数在某个特定的位置插入一个元素获得指定下标的节点的元素删除一个节点链表逆序链表的清空链表的销毁链表的遍...
    99+
    2024-04-02
  • C语言实现动态顺序表的示例代码
    目录顺序表概念及结构基本操作功能实现程序运行顺序表概念及结构 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构，一般情况下采用数组存储。在数组上完成数据的增删查改。 分...
    99+
    2022-11-13
    C语言 动态顺序表 C语言 顺序表
  • 基于Flutter实现转场动效的示例代码
    目录前言CupertinoFullscreenDialogTransitionCupertinoPageTransitionDecoratedBoxTransitionFadeTra...
    99+
    2024-04-02
  • django admin实现动态多选框表单的示例代码
    背景 借助django-admin，可以快速得到CRUD界面，但若需要创建多选标签字段时，需要对表单进行调整 示例 model.py 一个tag（标签类），一个boo...
    99+
    2024-04-02
  • Flutter实现牛顿摆动画效果的示例代码
    目录前言实现步骤1、绘制静态效果2、加入动画两个关键点完整源码总结前言 牛顿摆大家应该都不陌生，也叫碰碰球、永动球（理论情况下），那么今天我们用Flutter实现这么一个理论中的永动...
    99+
    2024-04-02
  • vue+element实现动态换肤的示例代码
    有时候一个项目的主题并不能满足所有人的审美，这时候换肤功能就很友好，本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template>...
    99+
    2024-04-02
  • ReactNative中实现动态导入的示例代码
    目录背景多业务包动态导入Metro 打包原理打包过程bundle 分析__d函数__r函数方案设计分识别入口树拆分bundle 生成合总结背景 随着业务的发展，每一个 React N...
    99+
    2024-04-02
  • flutter实现一个列表下拉抽屉的示例代码
    目录使用源码使用 通过监听滚动事件实现DragOpenDrawer 组件，可以给滚动组件添加一个下拉抽屉。其使用方式如下： DragOpenDrawer(   openDuratio...
    99+
    2024-04-02
  • Python实现动态二维码生成的示例代码
    目录1.MyQR普通的二维码制作带背景图片的二维码制作带动图背景的二维码制作2.qrcode简单的二维码制作带背景图片的二维码制作大家好，我是辰哥~ 今天给大家分享两个制作二维码的P...
    99+
    2024-04-02
  • Java实现动态代理的实例代码
    目录前言静态代理 动态代理 CGLib实现动态代理 总结前言 动态代理在Java中有着广泛的应用，比如Spring AOP、Hibernate数据查询、测试框架的后端mock、RPC...
    99+
    2024-04-02
  • C语言实现线性动态(单向)链表的示例代码
    目录什么是链表为什么不用结构体数组链表的操作创建表删除元素插入元素代码及运行结果什么是链表 链表是数据结构里面的一种，线性链表是链表的一种，线性链表的延伸有双向链表和环形链表。在编程...
    99+
    2024-04-02
  • python实现动态规划算法的示例代码
    动态规划（Dynamic Programming，DP）是一种常用的算法思想，通常用于解决具有重叠子问题和最优子结构性质的问题。动态规划算法通常是将问题分解为子问题，先解决子问题，再...
    99+
    2023-02-16
    python 动态规划算法
  • SpringBoot实现动态定时任务的示例代码
    目录前言配置文件定时任务核心类提供修改cron表达式的controller前言 之前在SpringBoot项目中简单使用定时任务，不过由于要借助cron表达式且都提前定义好放在配置文...
    99+
    2022-11-13
    SpringBoot动态定时任务 SpringBoot 定时任务
  • Mybatis动态SQL的示例代码
    目录基本流程IF，WhereSetChoose(when,otherwise)SQL片段总结什么是动态SQL：动态SQL就是根据不同的条件生成不同的SQL语句 基本流程 ...
    99+
    2024-04-02
  • mybatis-plus动态表名的实现示例
    背景 在分表的背景下，有时候查询数据的时候需要跨表查询，那此时就需要MP在解析的时候，能够很好的自适应表格名称 实现 MP中是通过PaginationInterceptor(分页插件...
    99+
    2024-04-02
  • Python实现Matplotlib,Seaborn动态数据图的示例代码
    目录MatplotlibSeabornMatplotlib 效果图如下 主要使用matplotlib.animation.FuncAnimation，上核心代码， # 定义静态绘图...
    99+
    2024-04-02
  • Python实现动态条形图绘制的示例代码
    目录动态条形图变动态柱状图指定排序方式限制条目数设置固定条目固定数值轴，使其不发生动态变化设置图像帧数，默认 10 帧设置帧率，单位时间默认为 500ms设置每帧增加的标签时间，默认...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作