# Event

**Repository Path**: sugarnine/event

## Basic Information

- **Project Name**: Event
- **Description**: 此仓库为HarmonyOS开发者活动demo收集仓库，包含HarmonyOS技术训练营、线上Codelabs系列挑战赛、技术征文大赛等线上活动的技术作品。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 227
- **Created**: 2022-07-31
- **Last Updated**: 2022-10-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### Xbone 介绍  

**这是一个由Xbone2D骨骼动画引擎产出的动画运行库**

![alt 示例动图](./reademe/1.gif)

**该仓库 example 文件夹内为上图👆示例项目**



    当前Xbone动画制作场景
    HarmonyOS手机系统 XstoryMaker应用内
    (华为应用市场搜索 XstoryMaker App 进行下载)

###Demo运行

1.拉取该仓库
2.使用**DevEco Studio 3.0 Beta4**最新IDE打开 example 文件夹

### 简单使用

#### 1.安装

    npm install xbone

#### 2.快速预览

**该仓库 example 文件夹内为HarmonyOS项目，使用DevEco Studio 3.0 Beta4最新IDE打开**

#### 3.引入使用

    // OpenHarmony HarmonyOS 类web范式 api6 api7 api8

    //该json文件由XstoryMaker App导出 教程参照文档“动画制作教程”
    import xbone_data from "../../common/json/export_data.json"
    import { Xbone } from "xbone/xbone_ohos.js"

    // xbone 必要配置项示例
    let option = {
      ctx: ctx, //canvas context
      data: xbone_data, //from XstoryMake app export
      width: width, //canvas width
      height: height, //canvas height
      // A required CallBack
      animeCall: (anime_gridList = []) => {
        if (anime_gridList.length > 0) {
          this.xbone.reloadImgDraw(anime_gridList);
        } else {
          this.xbone.reloadImgDraw();
        }
      },
      // input your dev scene: "ohos" or "web"
      clientScene: "ohos",
    };
    this.xbone = new Xbone(option);


### 项目描述与动画制作
#### 1.可用方法

| 功能 | 用法 | 示例 |
| --- | --- | --- |
| 动画播放 | play() | this.xbone.play() |
| 动画暂停 | pause() | this.xbone.pause() |
| 更多正在制作中... |  |  |

#### 2.class xbone属性描述

| 属性名 | 描述 | 存储内容 |
| --- | --- | --- |
| imgInfo_list | 图片imageData列表 | 图层顺序及图片imageData对象数据 |
| imgPoint_list | 图片坐标列表 | 各图层图片左上角原点位置(x,y) *Victor库辅助计算* |
| imgScale_list | 图片缩放比例列表 | 各图层图片缩放比例 |
| grid_list | 各图层mesh网格数据 | 图片网格化后三角阵列数据 |
| anime_gridList | 各网格动画数据 | 图片网格化后三角阵列各三角形动画数据 |
| keyframes | 各图层关键帧数据 | 各图层动画关键帧及时序数据 |
| zeroOrg | 全局相对原点 | 用于导出后相对原点计算 |
| scale | 全局初始相对缩放比例 | 用于导出后相对缩放比例计算 |
| relative_scale | 动画运行相对缩放 | 用于动画运行缩放比例计算 |
| clientScene | 动画数据运行场景 | 用于区分**浏览器**与**ohos（openharm or HarmonyOS）** |
| animeCall | 动画运行回调函数 | 用于动画运行中网格数据回调，回调参数（grid_list） |
| scale_anime | 缩放动画列表 | 用于存储各图层动画缩放数据 |
| position_anime | 坐标动画列表 | 用于存储各图层动画位移数据 |
| bone_anime | 骨骼动画列表 | 用于存储各网格骨骼运动数据 |
| mainAnime | 主动画列表 | 用于存储各网格动画启动触发与状态 |

**animejs动画引擎相关设置**

| animejs动画引擎 | 作用 | 描述与拓展 |
| --- | --- | --- |
| loop | 循环播放 | 当前运行库默认动画播放模式：循环 *（自定义需修改源码constructor，this.loop）* |
| autoplay | 自动播放 | 当前运行库默认动画启动为：自动播放 *（自定义需修改源码constructor，this.autoplay* |
*更多设置参照animejs官方文档（animejs.com）*




#### 3.build相关
**xbone_ohos.js**为openharmony与HarmonyOS专用运行库
**index.js**为web端编译源码
**dist文件夹**为包入口文件cjs与esm存放目录
*（网页端运行推荐 import xbone from  xbone"）*



#### 4.动画制作教程
1.华为应用市场下载app：XstoryMaker
2.进入应用首页新建xbone，资源选择。*（推荐选择png格式美术素材）*
3.输入“项目名称”，进入xbone动画制作场景
4.简单的位移与缩放
![alt 示例动图](./reademe/2.gif)
5.简单的骨骼配置
如果没有美术素材，应用内默认存放了一套SD人物的素材包。
应用首页 --> Xbone项目列表 , 第一个项目为网友赞助，点击“进入预览”
骨骼的配置需要提前将图片元素放置画布，并且完成网格化。
![alt 示例动图](./reademe/3.gif)

6.骨骼动画
骨骼动画的关键帧存储，只需要在摆放骨骼到需要的位置后“插入关键帧”即可。
xbone动画引擎会帮助你完成两帧之间骨骼的动画补帧

![alt 示例动图](./reademe/4.gif)