SVG 卡通人物脸部线条调节器

使用dat.gui来调整边界，调整时，卡通肖像能感知到：）

svg, face

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var mBlock = document.getElementById('block'),
    mBigSmile = document.getElementById('big-smile'),
    mSmile = document.getElementById('smile'),
    mOoh = document.getElementById('ooh'),
    mLeftPupil = document.getElementById('left-pupil'),
    mRightPupil = document.getElementById('right-pupil');

// visibility and animation

var mHappyAnimation;

function setMouth(state) {
    TweenMax.set([mBigSmile, mSmile, mOoh], {
        visibility: 'hidden'
    });
    TweenMax.set(state, {
        visibility: 'visible'
    });
}

function setPupilAngle(angle) {
    var x = Math.cos(angle * (Math.PI / 180)) * 10,
        y = Math.sin(angle * (Math.PI / 180)) * 10;

TweenMax.to(mLeftPupil, 0.25, {
        x: x,
        y: y
    });
    TweenMax.to(mRightPupil, 0.25, {
        x: x,
        y: y
    });
}

function happy() {
    mHappyAnimation = new TimelineMax();

mHappyAnimation.set(mBlock, {
        transformOrigin: 'center 80%'
    });
    mHappyAnimation.to(mLeftPupil, 0.2, {
        x: 0,
        y: 0
    }, 0);
    mHappyAnimation.to(mRightPupil, 0.2, {
        x: 0,
        y: 0
    }, 0);
    mHappyAnimation.call(setMouth, [mBigSmile]);

for (var i = 0; i < 2; i++) {
        mHappyAnimation.to(mBlock, 0.3, {
            rotation: 10,
            ease: Back.easeOut
        });
        mHappyAnimation.to(mBlock, 0.3, {
            rotation: -10,
            ease: Back.easeOut
        });
    }

mHappyAnimation.to(mBlock, 0.3, {
        rotation: 0,
        ease: Back.easeOut
    });

mHappyAnimation.call(setMouth, [mSmile]);
}

function superHappy() {
    mHappyAnimation = new TimelineMax();

mHappyAnimation.set(mBlock, {
        transformOrigin: 'center center'
    });
    mHappyAnimation.to(mLeftPupil, 0.2, {
        x: 0,
        y: 0
    }, 0);
    mHappyAnimation.to(mRightPupil, 0.2, {
        x: 0,
        y: 0
    }, 0);
    mHappyAnimation.call(setMouth, [mBigSmile]);

mHappyAnimation.add('spin-out');
    mHappyAnimation.to(mBlock, 1.5, {
        rotation: 370,
        ease: Back.easeInOut
    }, 'spin-out');
    mHappyAnimation.to(mBlock, 1.5, {
        scale: 0.75,
        ease: Back.easeInOut
    }, 'spin-out');
    mHappyAnimation.add('spin-in');
    mHappyAnimation.to(mBlock, 1.0, {
        rotation: 360,
        ease: Elastic.easeOut
    }, 'spin-in+=0.1');
    mHappyAnimation.to(mBlock, 1.0, {
        scale: 1.0,
        ease: Elastic.easeOut
    }, 'spin-in+=0.1');
    mHappyAnimation.set(mBlock, {
        rotation: 0
    });
    mHappyAnimation.call(setMouth, [mSmile]);
}

// gui

var mGui = new dat.GUI(),
    mSettings = {
        'borderTopLeftRadius': 10,
        'borderTopRightRadius': 10,
        'borderBottomRightRadius': 10,
        'borderBottomLeftRadius': 10
    },
    mAngles = {
        'borderTopLeftRadius': -130,
        'borderTopRightRadius': -50,
        'borderBottomRightRadius': 50,
        'borderBottomLeftRadius': 130
    };

var mChangeTID = -1,
    mChangeStarted = false;

mGui.add(mSettings, 'borderTopLeftRadius', 0, 100).name('top left').onChange(function() {
    update('borderTopLeftRadius')
});
mGui.add(mSettings, 'borderTopRightRadius', 0, 100).name('top right').onChange(function() {
    update('borderTopRightRadius')
});
mGui.add(mSettings, 'borderBottomRightRadius', 0, 100).name('bottom right').onChange(function() {
    update('borderBottomRightRadius')
});
mGui.add(mSettings, 'borderBottomLeftRadius', 0, 100).name('bottom left').onChange(function() {
    update('borderBottomLeftRadius')
});

function update(key) {
    mHappyAnimation && mHappyAnimation.kill();

mBlock.style[key] = mSettings[key] + '%';

if (!mChangeStarted) {
        mChangeStarted = true;
        setPupilAngle(mAngles[key]);
    }

setMouth(mOoh);

clearTimeout(mChangeTID);
    mChangeTID = setTimeout(changeComplete, 500);
}

function changeComplete() {
    mChangeStarted = false;

if (radiiEqual(50) || radiiEqual(100)) {
        superHappy()
    } else {
        happy();
    }
}

function radiiEqual(v) {
    return mSettings.borderTopLeftRadius === v && mSettings.borderTopRightRadius === v &&
        mSettings.borderBottomRightRadius === v && mSettings.borderBottomLeftRadius === v;
}

// other stuff

mBlock.addEventListener('click', happy);
happy();

编译

CSS

HTML

使用dat.gui来调整边界，调整时，卡通肖像能感知到：）

svg, face

编辑器支持Emmet

快捷键

使用dat.gui来调整边界，调整时，卡通肖像能感知到：）

svg, face

使用ReactJS的SVG过滤器组件实现的弯曲卡通人物肖像

GSAP 卡通人物滑水动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：