会眨眼和转动眼球的怪物跳舞动画

使用gsap和lodash.js实现的身体摇摆动画。

svg, dance

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// get the SVG elements we want to animate
var head = document.getElementById("CreatureHead"),
    middle = document.getElementById("CreatureMiddle"),
    eye = document.getElementById("CreatureEye"),
    blinkShapeBottom = document.getElementById("BlinkShapeBottom"),
    blinkShapeTop = document.getElementById("BlinkShapeTop");

// controls the shaking movement of the head
var shake = new TimelineMax({
    repeat: -1
});
shake.set(head, {
    x: "75"
})
shake.to(head, 1.5, {
    x: "-=150",
    ease: Back.easeOut.config(3)
});
shake.to(head, 1.5, {
    x: "+= 150",
    ease: Back.easeOut.config(3)
});
shake.play();

// controls the shaking movement of the middle section
var follow = new TimelineMax({
    repeat: -1
});
follow.set(middle, {
    x: "37.5"
});
follow.to(middle, 1.5, {
    x: "-=75",
    ease: Back.easeOut.config(1.7)
});
follow.to(middle, 1.5, {
    x: "+= 75",
    ease: Back.easeOut.config(1.7)
});
follow.play();

// controls the blinking
var blinkBottom = new TimelineMax({
    repeat: -1
});
blinkBottom.set(blinkShapeBottom, {
    rotation: 0,
    y: "+=110",
    x: "+=25"
});
blinkBottom.to(blinkShapeBottom, .75, {
    y: "-=110",
    delay: 5
});
blinkBottom.to(blinkShapeBottom, .75, {
    y: "+=100",
    delay: .5
});

/*var blink = new TimelineMax({repeat:-1});
//blink.add( blinkBottom );
//blink.add( blinkTop );
blink.play();*/

// rotate the eye to simulate looking around
var look = new TimelineMax({
    repeat: -1
});
var angle = 0;
TweenMax.set(eye, {
    x: "25",
    y: "25"
});
TweenMax.to(eye, .5, {
    rotation: angle,
    transformOrigin: "center",
    onComplete: rotateAngle,
    delay: _.random(0, 3)
});

function rotateAngle() {
    angle += _.random(-120, 120);
    angle = angle % 360;

TweenMax.set(eye, {
        x: "25",
        y: "25"
    });
    TweenMax.to(eye, .5, {
        rotation: angle,
        transformOrigin: "center",
        onComplete: rotateAngle,
        delay: _.random(1, 3)
    });
}

编译

CSS

HTML

使用gsap和lodash.js实现的身体摇摆动画。

svg, dance

编辑器支持Emmet

快捷键

使用gsap和lodash.js实现的身体摇摆动画。

svg, dance

SVG 旋转的足球和登录对话框动画

纯CSS构造的卡通人物跳舞动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：