您当前位置:首页 > 文章中心 > HTML5+CSS3

SVG奥林匹克五环动画

稿件来源: 互联网   撰稿作者: whqet   发表日期: 2014-03-23   阅读次数: 138   查看权限: 游客查看

SVG奥林匹克五环动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SVG奥林匹克五环动画</title>
    <style type="text/css">
    body{background:#ccc}
    button {
        position: absolute;
        top: 10px;
        right: 5px;
    }
    #mySvg{width:550px;height:300px}
    path {
        fill: transparent;
        stroke-width: 12;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform-origin:center center;
        transition:all .5s;
    }
    path:hover {
        opacity:.8;
        stroke-width:14;
        cursor:pointer;
        animation:flip 1s ease-in;
    }
    @keyframes flip {
        0% {transform:translateX(0%)}
        15% {transform:translateX(-10%) rotate(-5deg)}
        30% {transform:translateX(8%) rotate(3deg)}
        45% {transform:translateX(-6%) rotate(-3deg)}
        60% {transform:translateX(4%) rotate(2deg)}
        75% {transform:translateX(-2%) rotate(-1deg)}
        100% {transform:translateX(0%)}
    }
    .blue {stroke: #0885C2;}
    .black {stroke: #292B2A;}
    .red {stroke: #ED334C;}
    .yellow {stroke: #FBB132;}
    .green {stroke: #1C8b3C}
    </style>
</head>
<body>
<button onclick="rerun();">Again!</button>
<svg id="mySvg"  version="1.1" viewBox="0 0 550 300">
    <path id="i0" class="blue"  d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
    <path id="i1" class="green" d="M 365, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
    <path id="i2" class="black" d="M 275, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
    <path id="i3" class="red" d="M 450, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
    <path id="i4" class="yellow" d="M 187.5, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
</svg>
<script type="text/javascript">
    var current_frame, total_frames, path, length, handle;
    var mysvg=document.getElementById('mySvg');
    var pathObj=document.getElementsByTagName('path');
    var init = function() {
        current_frame = 0;
        total_frames = 60;
        path = new Array();
        length = new Array();
        for(var i=0; i<pathObj.length;i++){
            path[i] = document.getElementById('i'+i);
            l = path[i].getTotalLength();
            length[i] = l;
            path[i].style.strokeDasharray = l + ' ' + l;
            path[i].style.strokeDashoffset = l;
        }
        handle = 0;
    };
    var draw = function() {
        var progress = current_frame/total_frames;
        if (progress > 1) {
            window.cancelAnimationFrame(handle);
        } else {
            current_frame++;
            for(var j=0; j<path.length;j++){
                path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
            }
            handle = window.requestAnimationFrame(draw);
        }
    };
    init();
    draw();
    function rerun() {
        var old = document.getElementById('mySvg');
        old.parentNode.removeChild(old);
        document.getElementsByTagName('body')[0].appendChild(mysvg);
        init();
        draw();
    }
</script>
</body>
</html>

 

总结

1.本效果主要利用strokeDashOffset属性的改变实现线绘动画,大家可以参考老外的animated-line-drawing-svg

2.利用js优化动画,大家可以参考Brian Suda的Animating Vectors with SVG

3.关于网页里使用svg的情况,大家可以参考Chris Coyier在css-ticiks的Using SVG

4.SVG动画教程,参阅10 BEST SVG ANIMATION TUTORIAL

摘自:http://blog.csdn.net/whqet/article/details/18982747

关键词: svg,奥林匹克,五环动画   编辑时间: 2014-03-23 11:59:52

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐