# 谷歌灭霸手套动画

**Repository Path**: sin911/glove_thanos

## Basic Information

- **Project Name**: 谷歌灭霸手套动画
- **Description**: 看到谷歌灭霸手套动画觉得不错,但是又找不到他们的源码,就自己写了一个.图片是直接从谷歌保存下来的.
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-30
- **Last Updated**: 2022-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# 灭霸手套
#### 在线预览
 [http://sin911.gitee.io/glove_thanos/](http://sin911.gitee.io/glove_thanos/)
#### 介绍
看到谷歌灭霸手套是用canvas实现,但又找不到对应的js源码,所以自己写一个

发现关键点就是必须用到drawImage方法的9个参数而已

试过用requestAnimFrame代替setInterval,结果导致动画速度显得过快,造成画面像走马灯一样"转",而不是一帧一帧的播放

#### 使用说明
可自行指定图片及动画结束后的回调函数
#### 参数说明

参数 | 必填 | 描述|默认值
---|---|---|---|
ele | 是 |dom元素|-
w|是|图片高度|-
h|是|图片宽度|-
firstPic|是|第一张图片地址|-
secondPic|是|第二张图片地址|-
placeHolderPic|是|占位图|-
firstFn|是|第一个动画结束后的回调函数|-
secondFn|是|第一个动画结束后的回调函数|-
objTrigger|否|对象|-
objTrigger.autoUnLock|否|点击事件防抖,默认直到动画结束后,才可再次点击<br>否则可在回调函数中使用```实例对象.canPlay()```自行指定恢复时机|true
objTrigger.music|否|是否播放打响指时的声音|false

备注:mp3文件并未给修改接口
#### 举例说明
### html部分

只需一个带id的div
```
<div id="glo" ></div>
```
### js部分

只需new一个对象,同时不要遗漏必填参数即可渲染出灭霸手套.

另外支持一个页面里new多个手套,互不冲突
```
var glo = document.getElementById('glo');
new GloveThanos(glo, 80, 80, 'thanos_flag1.png', 'thanos_flag2.png', 'thanos_idle.png',()=>{},()=>{},{autoUnLock:false})
```