「兔了个兔」一只摇摆耳朵的兔子

windyrain
1,332 阅读2分钟

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

说起动画，实现有很多方式，最常见的有 GIF, APNG 图片格式，也可以用 CSS 帧动画，一些 JS 动画类库，如 Gsap.js, tween.js, 还可以用 lottie, svga 等动画格式。

本文是介绍，如何使用骨骼动画，来实现一只摇摆的兔兔。

技能要求：

  • PS 切图
  • Spine 软件基本使用
  • pixi.js + pixi-spine 的使用

PS 部分

首先要找到一只可爱的兔子，并把它切成各个图层（如蝴蝶结，左耳朵，右耳朵）等。这么做的目的是让每个部分都能独立的运动。

image.png

然后将 Spine 提供的 PS 导出脚本，下载到本地，通过 PS 文件 -> 脚本 -> 浏览功能，导入脚本，将切图以及他们的数据导出。

image.png

image.png

image.png

Spine 部分

现在我们就得到了，可以用来制作骨骼动画的素材。

image.png

打开 Spine 软件

image.png

可以看到软件中出现了一只兔子，但是兔子并没有站在原点上

image.png

使用 Ctrl | Command 加左键，将图片全部选中后，选中移动选项，将兔子移动到原点。

image.png

双击空白处，可取消选中，下面使用创建骨骼动能，为兔子的耳朵加上两根骨头。

image.png

然后我们将骨骼和图片的关系建立起来，图片演示了左耳朵，右耳朵同理。

image.png

现在我们进入动画编辑模式，让耳朵动起来。

image.png

image.png

image.png

image.png

一个简单的摇耳朵的动画就做好了，下面我们进行导出。得到 altas json png 文件

image.png

image.png

image.png

代码部分

import "pixi-spine";
import * as PIXI from "pixi.js";

// pixi.js 舞台
const app = new PIXI.Application({width: 300, height: 350, antialias: true});
document.body.appendChild(app.view);

// 加载 json 文件（里面有逻辑去读取，altas文件，以及图片）
PIXI.Assets.load("https://static.kaishustory.com/temp/spine/tuzi.json").then(onAssetsLoaded);

function onAssetsLoaded(tuziAsset) {
    app.stage.interactive = true;

    // 创建小兔子
    const tuzi = new PIXI.spine.Spine(tuziAsset.spineData);

    // 设置位置
    tuzi.x = app.screen.width / 2;
    tuzi.y = app.screen.height;

    // 舞台添加小兔子
    app.stage.addChild(tuzi);
    
    // 执行摇耳朵动画
    tuzi.state.setAnimation(0, "yed", true);
}

只需要简单的使用 pixi.js 和 pixi-spine 的 api 就可以方便的执行你预设好的动画了

其他

骨骼动画的作用当然不止演示的这么简单，官方给出了很多优秀的实践，受限于技能水平和时间，无法呈现出来。

个人认为骨骼动画的好处是面向对象的方式来管理了动画行为。不同于其他模式都只是对一段单一动画的描述，或是动画拼接使用 start end 的帧数来管理动画播放

兔耳一晃，快乐来到，祝小伙伴们兔年快乐，身体健康！

avatar
文章
阅读
粉丝