Spine 眨眼动画

眨眼动画的思路一般是序列帧播放眨眼或者网格变形,这里以Spine为例介绍第二种网格变形的方法

目录

  • Spine 眨眼动画
    • 眼睛图层分层
    • 上眼睑和眉毛:路径约束
    • 眼珠和眼白:剪裁
    • 眨眼动画
    • 效果样例预览

眼睛图层分层

如果美术给到的素材本身就是分层可以忽略这部分。但是个人有时候会从漫画抠一张没有分层的图自己补图再分层,所以给可能有需求的人分享一下自己的推荐分层

  • 眉毛
  • 上眼睑
  • 二层上眼睑(可选)
  • 眼珠高光(可选)
  • 眼珠
  • 眼白
  • 下眼睑(根据情况看是否需要分这层)

效果的主体部分是上眼睑、眼珠和眼白三层,再加上眉毛和下眼睑完全可以算一个完整的眨眼动画了。其它的眼珠高光等等都是用于增加层次感的,分的层越细致,效果越好

上眼睑和眉毛:路径约束

眉毛与上眼睑思路相差不多,这里以上眼睑为例,先为所有的网格布线

mesh 布线
在上眼睑处创建一条路径以及多个骨骼,骨骼用于控制网格变形,路径用于控制骨骼

为上眼睑创建路径和骨骼

选中上眼睑的所有骨骼,为它们添加路径约束,注意旋转选择“链”或者“链缩放”

路径约束选择链或链缩放
把骨骼绑定到对应 mesh 上,即可通过路径控制上眼睑了
眉毛、下眼睑都可以参考这个思路,参考样例如下
路径约束控制部分

眼珠和眼白:剪裁

新建一个插槽,里面新建一个剪裁,画出剪裁的轮廓

ps:Spine 的剪裁(Clipping)其实和遮罩差不多,用别的一些软件习惯了个人下意识更想叫遮罩一些

创建剪裁
Spine 的剪裁需要在绘制顺序中调整,剪裁图层默认会对它之上的所有图层进行剪裁,这里只影响眼珠和眼白的内容,所以需要在绘制顺序中调整并选择对应的结束插槽,剪裁图层就影响从剪裁图层开始直到结束插槽的区域

调整绘制顺序并设置结束插槽

眨眼动画

最简单的眨眼就分为两个阶段,闭眼和睁眼,具体k帧看需求。
上眼睑向下运动幅度更大,下眼睑可以稍微向上运动一小点,比例差不多3:1或者4:1

闭眼位置参考
一般来说会把闭眼相较于睁眼k的较快一点

摄影表
至于曲线方面,个人喜欢这样拉

曲线图表

效果样例预览

参考眨眼动画预览

【Spine】眨眼动画相关推荐

  1. android 骨骼动画库,cocos creator spine骨骼动画组件使用

    1: 掌握sp.Skeleton组件的使用; spine骨骼动画工具 1: 骨骼动画: 把动画打散, 通过工具,调骨骼的运动等来形成动画 2: spine是一个非常流行的2D骨骼动画制作工具 3: s ...

  2. Unity Spine SkeletonGraphic 动画重复播放 过度残影透明渐变Bug 解决方案

    Unity Spine SkeletonGraphic 动画重复播放 过度残影透明渐变Bug 解决方案 不推荐使用SetToSetupPose和Setup Pose相关,代码直接贴上 /// < ...

  3. Spine 骨骼动画查看器 Skeleton Viewer_官方文档中文版

    Spine 骨骼动画查看器 Skeleton Viewer_官方文档中文版 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 欢迎加入专业Spine技术交流群 Spine2D骨骼动画 7708065 此文 ...

  4. Spine骨骼动画知识普及

    一些基本概念 以下将介绍一些骨骼动画的基础概念,便于对骨骼动画不甚了解的童鞋(比如技术)进行扫盲.已经熟悉骨骼动画的童鞋可以直接跳过. 动画的基本原理 动画,顾名思义,即是能动的画,画能随着时间的推移 ...

  5. Unity Spine切换动画

    Unity使用Spine切换动画时会自动加入融合,这时动画会产生过渡的效果,如果想直接切换则按下图操作即可 把Default Mix Duration设置为0 public void Awake(){ ...

  6. spine 所有动画的第一帧必须把所有能K的都K上

    spine 所有动画的第一帧必须把所有能K的都K上.否则在快速切换动画时会出问题. 转载于:https://www.cnblogs.com/wantnon/p/4519882.html

  7. Spine变色动画在unity中失效的问题

    最近美术同事做spine变色动画的时候打开了Tint Black选项来做图片颜色过渡变化的效果.但是到了程序这边在unity中显示的是灰度,没有颜色变化. 在unit中有问题的spine动画材质图片如 ...

  8. Android繁星眨眼动画效果

    分享一个类似星星眨眼的动画效果实现方式.这里涉及到两个类,看官可直接拿来用. StarView.java import android.content.Context; import android. ...

  9. 用计算机做动画效果,ps制作眨眼效果,用ps制作眨眼动画效果

    AE是强大的视频制作软件,那么你知道如何快速的制作酷炫的卡片擦除效果么?下面让我们跟着以下图文步骤,学习下制作的方法. 工具/材料 After Effects CS4 操作方法 01打开AE软件,创建 ...

最新文章

  1. 比目前世界上最快的超级计算机快 4 倍,英伟达这波玩大了!
  2. php 文档标示规范,php标识
  3. 【Android 安全】DEX 加密 ( Application 替换 | 获取 ContextImpl、ActivityThread、LoadedApk 类型对象 | 源码分析 )
  4. ehcache springboot_Spring Boot应用缓存实践之:Ehcache加持
  5. 【Android】Activity的四种launchMode
  6. 练习利用LSTM实现手写数字分类任务
  7. php数组匹配匹配里面的值,php – 比较数组并搜索匹配的值
  8. Flink学习笔记:搭建Flink on Yarn环境并运行Flink应用
  9. 基于物理着色(二)- Microfacet材质和多层材质
  10. 【渝粤教育】21秋期末考试基础会计10258k2
  11. 10_android打包的过程
  12. 计算机系统论文题目,计算机系统维护毕业论文题目(572个).doc
  13. PCM数据格式你该知道的一切
  14. 投资:螺纹钢研究框架
  15. SecureCRT配置详细图文教程
  16. Excel函数——小数点计算
  17. 苹果手机话筒声音小怎么办_苹果8通话声音小,苹果8听筒声音小怎么办
  18. Unity Shader - URP ShadowCast ShadowRecieve - 投影 和 接受阴影
  19. 人类简史 从动物到上帝
  20. 关于内外网数据同步解决方案

热门文章

  1. Matlab GUI 变量传递方法
  2. 如何选择IIOT数据采集解决方案:公有或私有?
  3. 2022-03-04-Label-Noise-Learning
  4. 微信小程序:地图导航功能实现完整源代码附效果图,讲解
  5. 华图网校远程课程5大主力名师
  6. 十月下旬腾讯 网易游戏 百度迅雷校园招聘笔试题集锦 第271 330题
  7. 深入理解图优化与g2o : 图优化理论与g2o的使用
  8. 计算机简单的装机维修,超详细!用装机员pe自己动手给电脑装win7系统
  9. Java-基于SSM的药品销售管理系统
  10. 高斯混合模型下的变分推断