mdj-h5-vue-ani

定制于 悦美的动画

安装

$ npm install mdj-h5-vue-ani -S

使用

在 main.js 文件中引入插件并注册

# main.js
import mdjH5Ani from 'mdj-h5-vue-ani'
import 'mdj-h5-vue-ani/lib/mdjH5Ani.css'
Vue.use(mdjH5Ani)

在项目中用使用 mdj-h5-vue-ani

<template>
  <mdj-h5-ani :apiData="apiData" @complete="complete"/>
</template>
<script>
  export default {
    data () {
      return {
        apiData: {}
      }
    },
    methods: {
      complete(ani){ // 动画执行一遍完成事件
        if(ani.isComplete){ // 动画执行一遍完成
			// ani.play(); // 播放该动画，从目前停止的帧开始播放
			// ani.stop(); // 停止播放该动画，回到第0帧
			
			// ani.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
			// ani.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
			// ani.goToAndStop(30, true); // 跳转到第30帧并停止
			// ani.goToAndPlay(300); // 跳转到第300毫秒并播放
			
			// ani.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段
			// ani.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
           ...
        }else{ // 动画执行一遍完成 失败
          console.error(ani.message);
        }
      }
    }  
  }
</script>

注意：基于vue项目

属性

| 参数 | 说明 | 是否必填 | 类型 | 默认值 | | ---- | -------------- | -------- | ------ | ------ | | data | 动画显示的数据 | 是 | Object | {} |

data的结构形式如下：需要严格按照下边格式 返回数据 （如有变化 请通知~）

{
	"face_align": { // 美到家调用的技术口返回的数据 
		"img": "", // 接口返回的图片 必须
		"size": {  //必须
			"w": 375,
			"h": 500
		}
	},
	"cal_info": { // 美到家调用的技术口返回的数据 必须
	},
	"points_info": {  // 美到家调用的技术口返回的数据必须
	},
	"type_info": { // 悦美方返回的数据 风格加分数 必须
		"nose_type": { // 鼻型
			"score":12.34, // 分数
			"style":"Sweet" //风格
		},
		"eyebrow_type": { //眉型
			"score":22.34,
			"style":"Sweet"
		},
		"eye_type": { //眼型
			"score":32.34,
			"style":"Sweet"
		},
		"facemid_result": { //中下庭比
			"score":42.34,
			"style":"Sweet"
		},
		"lip_type": { //唇形
			"score":52.34,
			"style":"Sweet"
		},
		"face_type": { //脸型
			"score":62.34,
			"style":"Sweet"
		},
		"jaw_angle": { //下巴角度
			"score":72.34,
			"style":"Sweet"
		}
	},
	"radar_info": { // 雷达图 必须
		"young": {  // 幼态
			"one": 6,  //第一次 涨的分数
			"two": 19, //第二次  涨的分数
			"three": 54  //第三次  涨的分数
		},
		"sweet": { // 甜暖
			"one": 8,
			"two": 22,
			"three": 100
		},
		"mature": {  // 成熟
			"one": 12,
			"two": 16,
			"three": 35
		},
		"cold": { // 高冷
			"one": 10,
			"two": 21,
			"three": 60
		}
	}
}

事件

| 事件名称 | 说明 | 回调参数 | | -------- | ------------ | ---------- | | complete | 动画调用完成 | 是一个对象 |

//回调参数
complete(com){
	
}

com = {
	isComplete:Boolean //表示是否动画执行了一遍 完成
	message:String //表示返回的信息 
}