GSAP+SVG 眨眼效果

Blinking Eye Effect with GSAP and SVG

GSAP, SVG

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/////////////////////////////////////////
// sun smily face blinking
var mc_lid_top_left = document.getElementById("mc_lid_top_left");
var mc_lid_bottom_left = document.getElementById("mc_lid_bottom_left");
var mc_lid_top_right = document.getElementById("mc_lid_top_right");
var mc_lid_bottom_right = document.getElementById("mc_lid_bottom_right");

function blinking() {

var tl = new TimelineMax({
        paused: true,
        repeat: 1,
        yoyo: true,
        onCompleteParams: ["{self}"],
        onComplete: function() {
            //delay, callback, params, scope
            TweenLite.delayedCall((3 * Math.random() + 0.6), tl.restart, [], tl);
        }
    });

var mc_lid_top = TweenMax.from([mc_lid_top_left, mc_lid_top_right], 0.2, {
        scaleY: 0,
        transformOrigin: "center top",
    });
    var mc_lid_bottom = TweenMax.from([mc_lid_bottom_left, mc_lid_bottom_right], 0.2, {
        scaleY: 0,
        transformOrigin: "center bottom",
    });

tl.add([mc_lid_top, mc_lid_bottom]);
    tl.progress(1).progress(0);
    tl.play();

return tl;
}

/////////////////////////////////////
// just eyes blinking
var lid_top_left = document.getElementById("lid_top_left");
var lid_bottom_left = document.getElementById("lid_bottom_left");
var lid_top_right = document.getElementById("lid_top_right");
var lid_bottom_right = document.getElementById("lid_bottom_right");

function justBlinking() {

var tl = new TimelineMax({
        paused: true,
        repeat: 1,
        yoyo: true,
        onCompleteParams: ["{self}"],
        onComplete: function() {
            TweenLite.delayedCall((3 * Math.random() + 0.6), tl.restart, [], tl);
        }
    });

var lid_top = TweenMax.from([lid_top_left, lid_top_right], 0.2, {
        scaleY: 0,
        transformOrigin: "center top",
    });
    var lid_bottom = TweenMax.from([lid_bottom_left, lid_bottom_right], 0.2, {
        scaleY: 0,
        transformOrigin: "center bottom",
    });

tl.add([lid_top, lid_bottom]);
    tl.progress(1).progress(0);
    tl.play();

return tl;
}

// run blink functions
// makes sure animation runs at next 
// frame to prevent layout trashing
window.requestAnimationFrame(function() {

blinking();
    justBlinking();

});

编译

CSS

HTML

<svg id="sun-smiley" x="0px" y="0px" width="162" height="600" overflow="visible">
    
    <g id="mc_sun" transform="matrix(1 0 0 1 81.5 82)">
        <g id="mc_sun_star_tips" transform="matrix(1 0 0 1 -0.5 -0.3)">
            <path fill="#FFDD4D" d="M47.3,-7.1L63.3,-16.6 45.3,-17.6 70.5,-40.6 38,-30.1 46.3,-46.1 30.5,-37.6 41,-70.9 17.8,-44.1 16.8,-62.9 7.3,-47.1 0.3,-81.6 -7.2,-47.9 -16.7,-63.1 -17.5,-44.1 -41,-71.1 -29.5,-37.4 -46.2,-46.4 -37.2,-29.9 -70.5,-40.6 -44.5,-17.1 -63,-16.9 -47.5,-6.9 -81,-0.1 -48,7.4 -63,17.4 -44.2,17.6 -70.7,41.1 -37.7,29.9 -45.7,46.1 -29.7,37.4 -40.5,70.6 -17.7,44.9 -17,62.9 -7,47.6 0,81.6 7.5,47.4 17,62.6 18,44.9 40.5,69.9 30,37.4 45.8,45.9 37.8,29.9 70.8,40.9 45,17.6 62.5,16.6 47.8,6.9 81,-0.1 47.3,-7.1"
            />
        </g>
        <g id="mc_sun_base" transform="matrix(1 0 0 1 0 0)">
            <path fill="#FFE009" d="M-27.8,-36Q-26.7,-38.6 -28.7,-34.6 -29.8,-32.6 -32.4,-25.6 -35,-18.7 -33.7,-3.1 -32.4,12.4 -16,24.3 0.4,36.2 16.6,35.1 28.1,34.3 31.7,31.9 31.8,31.8 31.8,31.8 32.3,31.3 32.8,30.8 33,30.6 33.2,30.4 33.6,29.9 34,29.5 34.4,29 34.8,28.6 34.9,28.5 35,28.4L35.1,28Q35.2,28.1 35.3,27.9 35.5,27.8 35.6,27.6 35.7,27.5 35.8,27.4 35.9,27.2 36,27.1 43.3,17.6 44.7,5.6 44.8,5.1 44.8,4.6 44.8,4.7 44.8,4.8 45,2.4 45,0 45,-8 42.6,-14.9 42.2,-16.1 41.8,-17.1 41.7,-17.2 41.7,-17.3 38.4,-25.2 31.8,-31.8 18.9,-44.8 0.6,-45L0,-45Q-9.6,-45 -17.8,-41.5 -23.4,-39.1 -28.2,-35 -28.1,-35.5 -27.8,-36"
            />
            <path fill="#FF0" d="M-31.7,-31.9Q-31.7,-31.9 -31.8,-31.8 -32.5,-31.1 -33.1,-30.4 -37.3,-25.9 -40,-20.8 -40.1,-20.6 -40.3,-20.3 -45,-11.1 -45,0 -45,18.7 -31.8,31.8 -18.6,45 0,45 5,45 9.7,44 22.2,41.4 31.7,31.9 28.1,34.3 16.6,35.1 0.4,36.2 -16,24.3 -32.4,12.4 -33.7,-3.1 -35,-18.7 -32.4,-25.6 -29.8,-32.6 -28.7,-34.6 -30.2,-33.4 -31.7,-31.9"
            />
            <path fill="none" stroke="#FC0" stroke-opacity="1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M-31.8,-31.8Q-32.5,-31.1 -33.1,-30.4 -37.3,-25.9 -40,-20.8 -40.1,-20.6 -40.3,-20.3 -45,-11.1 -45,0 -45,18.7 -31.8,31.8 -18.6,45 0,45 5,45 9.7,44 22.2,41.4 31.7,31.9 31.8,31.8 31.8,31.8 32.3,31.3 32.8,30.8 33,30.6 33.2,30.4 33.6,29.9 34,29.5 34.4,29 34.8,28.6 34.9,28.5 35,28.4L35.1,28Q35.2,28.1 35.3,27.9 35.5,27.8 35.6,27.6 35.7,27.5 35.8,27.4 35.9,27.2 36,27.1 43.3,17.6 44.7,5.6 44.8,5.1 44.8,4.6 44.8,4.7 44.8,4.8 45,2.4 45,0 45,-8 42.6,-14.9 42.2,-16.1 41.8,-17.1 41.7,-17.2 41.7,-17.3 38.4,-25.2 31.8,-31.8 18.9,-44.8 0.6,-45L0,-45Q-9.6,-45 -17.8,-41.5 -23.4,-39.1 -28.2,-35 -28.1,-35.5 -27.8,-36 -26.7,-38.6 -28.7,-34.6 -30.2,-33.4 -31.7,-31.9 -31.7,-31.9 -31.8,-31.8"
            />
        </g>
        <g id="mc_sun_mouth" transform="matrix(1 0 0 0.9 0.8 6.2)">
            <path fill="#333" d="M35.1,-1Q36.9,-7.4 36.1,-13.6 36,-9.8 34.9,-6 31.1,7.9 17.6,9.6 3.9,11.1 -10.5,11.9 -25,12.7 -31,3.5 -37,-5.8 -37.8,-12.9 -38.2,-3.1 -32.6,6.1 -24.7,18.6 -9.8,22.7 5.1,26.8 18.2,19.8 31.4,12.8 35.1,-1" />
        </g>
        <g id="mc_eye_right" transform="matrix(1 0.1 -0.2 1.6 12.3 -18.2)">
            <g id="mc_pupil_right">
                <circle fill="#333333" cx="0" cy="0" r="10" />
            </g>
            <g id="mc_lid_top_right">
                <polygon fill="#FFE009" points="-12,0 -5,-12 5,-12 12,0" />
            </g>
            <g id="mc_lid_bottom_right">
                <polygon fill="#FFE009" points="-12,0 12,0 5,12 -5,12" />
            </g>

</g>
        <g id="mc_eye_left" transform="matrix(1 -0.1 0.2 1.6 -13.7 -17.5)">
            <g id="mc_pupil_left">
                <circle fill="#333333" cx="0" cy="0" r="10" />
            </g>
            <g id="mc_lid_top_left">
                <polygon fill="#FFE009" points="-12,0 -5,-12 5,-12 12,0" />
            </g>
            <g id="mc_lid_bottom_left">
                <polygon fill="#FFE009" points="-12,0 12,0 5,12 -5,12" />
            </g>
        </g>

</g>
</svg>
<script src="/libs/gsap/TweenMax.min.js"></script>

Blinking Eye Effect with GSAP and SVG

GSAP, SVG

编辑器支持Emmet

快捷键

Blinking Eye Effect with GSAP and SVG

GSAP, SVG

CSS+SVG实现动画效果的APP图标

GSAP+SVG 有渐变动效的LOADING加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：