HTML5 Bodymovin.js 很有趣的拳击比赛动画

Fair Fight，体育运动动画，舞台、聚光灯、拳击选手。

html5, game, sport

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 9366
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var container = document.getElementById('bm_animation');
var animData = {
    container: container,
    renderer: 'svg',
    loop: true,
    prerender: false,
    autoplay: true,
    autoloadSegments: false,
    path: '/uploads/170101/fight.json'
};

var anim;
var isHitting = false;

anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', startAnimation);
click_r.onclick = hitRight;
click_l.onclick = hitLeft;

function hitComplete() {
    isHitting = false;
    anim.removeEventListener('loopComplete', hitComplete);
}

function hitRight() {
    if (isHitting) {
        return;
    }
    isHitting = true;
    anim.playSegments([
        [75, 95],
        [65, 75]
    ], true);
    anim.addEventListener('loopComplete', hitComplete);
}

function hitLeft() {
    if (isHitting) {
        return;
    }
    isHitting = true;
    anim.playSegments([
        [95, 115],
        [65, 75]
    ], true);
    anim.addEventListener('loopComplete', hitComplete);
}

function startAnimation() {
    anim.playSegments([
        [0, 65],
        [65, 75]
    ], true);
}

编译

CSS

HTML

Fair Fight，体育运动动画，舞台、聚光灯、拳击选手。

html5, game, sport

编辑器支持Emmet

快捷键

Fair Fight，体育运动动画，舞台、聚光灯、拳击选手。

html5, game, sport

HTML5 Bodymovin.js 错开的楼板方块掉落动画

HTML5 bodymin.js 宇航员太空漫步动画的404页面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：