Bodymovin.js+Canvas+SVG 字符运动会

每个字符化身为不同的运动员，呈现精彩纷呈的运动动画。

canvas，svg

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* http://lab.nearpod.com/bodymovin/demo */

var canvasContainer = document.getElementById('canvasContainer');
var svgContainer = document.getElementById('svgContainer');
var canvasAnim = bodymovin.loadAnimation({
    wrapper: canvasContainer,
    animType: 'canvas',
    loop: true,
    autoplay: false,
    prerender: false,
    animationData: JSON.parse(animationData)
});
var svgAnim = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'svg',
    loop: true,
    autoplay: false,
    prerender: false,
    animationData: JSON.parse(animationData)
});
var currentDisplay;

var switchContainer = document.getElementById('switchContainer');
var canvasSwitch = document.getElementById('canvasSwitch');
var svgSwitch = document.getElementById('svgSwitch');

var canvasSwAnim = bodymovin.loadAnimation({
    wrapper: canvasSwitch,
    animType: 'svg',
    loop: false,
    autoplay: false,
    prerender: false,
    animationData: JSON.parse(svgSwitchData)
});
var svgSwAnim = bodymovin.loadAnimation({
    animType: 'canvas',
    loop: false,
    autoplay: false,
    prerender: false,
    renderer: {
        clearCanvas: true,
        context: svgSwitch.getContext('2d'),
        scaleMode: 'fit'
    },
    animationData: JSON.parse(canvasSwitchData)
});

function show(type) {
    currentDisplay = type;
    if (type == 'canvas') {
        canvasContainer.style.display = 'block';
        svgContainer.style.display = 'none';
        canvasAnim.goToAndStop(svgAnim.currentFrame, true);
        svgAnim.pause();
        canvasAnim.play();

canvasSwitch.style.display = 'block';
        svgSwitch.style.display = 'none';
        canvasSwAnim.goToAndStop(0);
        canvasSwAnim.play();
        svgSwAnim.pause();

} else {
        canvasContainer.style.display = 'none';
        svgContainer.style.display = 'block';
        svgAnim.goToAndStop(canvasAnim.currentFrame, true);
        canvasAnim.pause();
        svgAnim.play();

svgSwitch.style.display = 'block';
        canvasSwitch.style.display = 'none';
        svgSwAnim.goToAndStop(0);
        svgSwAnim.play();
        canvasAnim.pause();
    }
}

function toggleDisplay() {
    if (currentDisplay == 'canvas') {
        show('svg');
    } else {
        show('canvas');
    }
}

function resize() {
    canvasAnim.resize();
}

show('svg');

switchContainer.onclick = toggleDisplay;
window.onresize = resize;

编译

CSS

HTML

每个字符化身为不同的运动员，呈现精彩纷呈的运动动画。

canvas，svg

编辑器支持Emmet

快捷键

每个字符化身为不同的运动员，呈现精彩纷呈的运动动画。

canvas，svg

使用SVG和Canvas实现的水泡分裂动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：