使用GSAP和SVG实现的嘴巴表情

Mouth expressions with SVG and GSAP，演员基本功。

svg, mouth, morph

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

var totalSize = 400,
    o = totalSize / 2, // origin
    ballSize = totalSize / 2;

var mouth = document.getElementById('mouth');

var moods = {
    ooh: {
        y: 280,
        w: 20,
        wTop: 10,
        wBottom: 12,
        h1: 0,
        h1a: 15,
        h2: 30,
        h2a: 45,
        h3: 60
    },

smile: {
        y: 220,
        w: 150,
        wTop: 70,
        wBottom: 90,
        h1: 40,
        h1a: 0,
        h2: 50,
        h2a: 100,
        h3: 140
    },

gh: {
        y: 270,
        w: 100,
        wTop: 20,
        wBottom: 50,
        h1: 30,
        h1a: 10,
        h2: 45,
        h2a: 80,
        h3: 50
    },

ggg: {
        y: 240,
        w: 130,
        wTop: 50,
        wBottom: 50,
        h1: 30,
        h1a: 10,
        h2: 45,
        h2a: 80,
        h3: 60
    },

sad: {
        y: 250,
        w: 130,
        wTop: 30,
        wBottom: 70,
        h1: 40,
        h1a: 50,
        h2: 80,
        h2a: 120,
        h3: 60
    },

what: {
        h1: 38,
        h1a: 36,
        h2: 42,
        h2a: 52,
        h3: 44,
        w: 85,
        wBottom: 70,
        wTop: 30,
        y: 236
    },

custom: {
        y: 250,
        w: 130,
        wTop: 30,
        wBottom: 70,
        h1: 40,
        h1a: 50,
        h2: 80,
        h2a: 120,
        h3: 60
    }
};

function makeMouth(c) {
    var p = {
        a: o + ' ' + (c.y + c.h1),
        a1: o - c.wTop + ' ' + (c.y + c.h1),
        a2: o + c.wTop + ' ' + (c.y + c.h1),
        b: o + c.w + ' ' + (c.y + c.h2),
        b1: o + c.w + ' ' + (c.y + c.h1a),
        b2: o + c.w + ' ' + (c.y + c.h2a),
        c: o + ' ' + (c.y + c.h3),
        c1: o + c.wBottom + ' ' + (c.y + c.h3),
        c2: o - c.wBottom + ' ' + (c.y + c.h3),
        d: o - c.w + ' ' + (c.y + c.h2),
        d1: o - c.w + ' ' + (c.y + c.h2a),
        d2: o - c.w + ' ' + (c.y + c.h1a)
    };

return ['M ' +
        p.a, 'C ' +
        p.a2 + ' ' + p.b1 + ' ' + p.b, 'C ' +
        p.b2 + ' ' + p.c1 + ' ' + p.c + ' ', 'C ' +
        p.c2 + ' ' + p.d1 + ' ' + p.d, 'C ' +
        p.d2 + ' ' + p.a1 + ' ' + p.a
    ].
    join('');
}

mouth.setAttribute('d', makeMouth(moods.what));

var timeline = new TimelineMax({
    repeat: 20
});

timeline.add(TweenMax.to("#mouth", .6, {
    ease: Elastic.easeOut.config(1, 0.6),
    attr: {
        d: makeMouth(moods.smile)
    }
}));
timeline.add(TweenMax.to("#mouth", .6, {
    ease: Elastic.easeOut.config(1, 0.9),
    attr: {
        d: makeMouth(moods.ooh)
    }
}));
timeline.add(TweenMax.to("#mouth", .7, {
    ease: Elastic.easeOut.config(1, 0.6),
    attr: {
        d: makeMouth(moods.ggg)
    }
}));
timeline.add(TweenMax.to("#mouth", .7, {
    ease: Elastic.easeOut.config(1, 0.6),
    attr: {
        d: makeMouth(moods.gh)
    }
}));
timeline.add(TweenMax.to("#mouth", 1.7, {
    ease: Elastic.easeOut.config(1, 0.6),
    attr: {
        d: makeMouth(moods.what)
    }
}));
timeline.timeScale(.5);
//timeline.stop();

mouth.addEventListener('click', function() {
    timeline.stop();
});

document.querySelectorAll('input').forEach(function(item) {
    item.addEventListener('change', function(e) {
        timeline.stop();
        item.title = item.value;
        moods.custom[item.name] = parseInt(item.value);
        console.log(moods.custom);
        mouth.setAttribute('d', makeMouth(moods.custom));
    });
});

编译

CSS

HTML

<form>
    <div>
        <label>y</label>
        <input type="range" min="0" max="400" name="y" />
    </div>
    <div>
        <label>w</label>
        <input type="range" min="0" max="400" name="w" />
    </div>
    <div>
        <label>wTop</label>
        <input type="range" min="0" max="400" name="wTop" />
    </div>
    <div>
        <label>wBottom</label>
        <input type="range" min="0" max="400" name="wBottom" />
    </div>
    <div>
        <label>h1</label>
        <input type="range" min="0" max="400" name="h1" />
    </div>
    <div>
        <label>h1a</label>
        <input type="range" min="0" max="400" name="h1a" />
    </div>
    <div>
        <label>h2</label>
        <input type="range" min="0" max="400" name="h2" />
    </div>
    <div>
        <label>h2a</label>
        <input type="range" min="0" max="400" name="h2a" />
    </div>
    <div>
        <label>h3</label>
        <input type="range" min="0" max="400" name="h3" />
    </div>
</form>
<svg viewBox="0 0 400 400" xmlns="https://www.w3.org/2000/svg" width="400" height="400">
    <defs>
        <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1;"></stop>
            <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1;"></stop>
        </lineargradient>
        <radialgradient id="mouth-gradient" cx="50%" cy="50%" r="100%" fx="50%" fy="0%">
            <stop offset="0%" style="stop-color: hsla(31,62%,10%, 1); stop-opacity:1;"></stop>
            <stop offset="100%" style="stop-color: hsla(31,62%,30%, 1); stop-opacity:1;"></stop>
        </radialgradient>
        <radialGradient id="head-gradient" cx="75%" cy="25%" r="75%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color: hsla(31,62%,65%, 1); stop-opacity: 1;"></stop>
            <stop offset="1000%" style="stop-color: hsla(31,62%,55%, 1); stop-opacity: 1;"></stop>
        </radialGradient>
        <radialGradient id="inner-eye-gradient" cx="0%" cy="00%" r="75%" fx="10%" fy="10%">
            <stop offset="0%" style="stop-color: #444; stop-opacity: 1;"></stop>
            <stop offset="100%" style="stop-color: black; stop-opacity: 1;"></stop>
        </radialGradient>
        <radialGradient id="outer-eye-gradient" cx="50%" cy="25%" r="75%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color: white; stop-opacity: 1;"></stop>
            <stop offset="100%" style="stop-color: #ddd; stop-opacity: 1;"> </stop>
        </radialGradient>
        <filter id="gaussian" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
        </filter>
        <filter id="shadow" x="0" y="0">
            <feDropShadow dx="0" dy="4" stdDeviation="0"></feDropShadow>
            <feComponentTransfer>
                <feFuncA type="linear" slope=".1"></feFuncA>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter id="shadow-bocca" x="0" y="0">
            <feDropShadow dx="0" dy="-4" stdDeviation="0"></feDropShadow>
            <feComponentTransfer>
                <feFuncA type="linear" slope=".1"></feFuncA>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    
    
    <circle class="face" fill="hsla(31,62%,65%, 1)" cx="200" cy="200" r="200" filter="url(#head-gradient)"></circle>
    
    <g>
        <circle class="eye" cx="133.33333333333331" cy="177.77777777777777" r="58.82352941176471" fill="url(#outer-eye-gradient)" filter="url(#shadow)"></circle>
        <circle class="eye" cx="266.6666666666667" cy="177.77777777777777" r="58.82352941176471" fill="url(#outer-eye-gradient)" filter="url(#shadow)"></circle>
        <circle class="eye" cx="150" cy="177.77777777777777" r="16.666666666666668" fill="url(#inner-eye-gradient)"></circle>
        <circle class="eye" cx="250" cy="177.77777777777777" r="16.666666666666668" fill="url(#inner-eye-gradient)"></circle>
    </g>
    
    <g fill="none" stroke="hsla(31,62%,10%, 1)" stroke-width="20" filter="url=(#shadow-bocca)">
        <path class="eyebrow" d="M 170 90 Q 140 90 110 100"></path>
        <path class="eyebrow" d="M 230 90 Q 260 90 290 100"></path>
    </g>
    
    <g>
        <path id="mouth" fill="url(#mouth-gradient)" stroke="" filter="url(#shadow-bocca)"></path>
    </g>
</svg>

Mouth expressions with SVG and GSAP，演员基本功。

svg, mouth, morph

编辑器支持Emmet

快捷键

Mouth expressions with SVG and GSAP，演员基本功。

svg, mouth, morph

使用Vue和GSAP实现的柱状图动画图表

使用SVG和GSAP实现的弹性绳索动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：