HTML5 Bodymovin很有趣的煎荷包蛋开关动画

Egg Toggle Widget, 一个荷包蛋柔性翻转动画。

h5, egg, switch

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', onDOMLoaded);
anim.setSpeed(15);

function onDOMLoaded(e) {

animationWindow.onclick = function(e) {
        if (anim.currentFrame > 0) {
            anim.playSegments([anim.currentFrame, 0], true);
            TweenMax.to('.eggGroup', 1, {
                x: 0,
                ease: Elastic.easeOut.config(0.9, 0.38)
            })
        } else {
            TweenMax.to('.eggGroup', 1.4, {
                x: 73,
                ease: Elastic.easeOut.config(0.9, 0.38)
            })
            anim.playSegments([anim.currentFrame, 300], true)
        }
    }
}

编译

CSS

HTML

Egg Toggle Widget, 一个荷包蛋柔性翻转动画。

h5, egg, switch

编辑器支持Emmet

快捷键

Egg Toggle Widget, 一个荷包蛋柔性翻转动画。

h5, egg, switch

HTML5 Bodymovin.js + Anime.js实现很有趣的骑自行车动画

HTML5 Bodymovin.js 乐高积木拼装加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：