zoukankan      html  css  js  c++  java
  • SVG动画实践篇-字母切换

    git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/letter.change

    说明

    这个页面实现了两个动画。

    字母切换

    字母切换的方式通过修改 stroke-dasharray 的值来实现动画。是从无到有的动画。

    css 代码如下:

    .txt{
        stroke:#FFEB3B;
        stroke-width:2px;
        -webkit-animation:animate1 3s ease-in-out forwards;
    }
    @keyframes animate1{
        0%{
            stroke-dasharray:0% 30%;
        }
        80%{
            stroke-dasharray:50% 0%;
            fill:#E91E63;
        }
        100%{
            stroke-dasharray:50% 0%;
            fill:#FFEB3B;
        }
    }

    html 代码如下:

    <svg version="1.2" xml:space="default">
        <symbol id="letter">
            <text x="38%" y="50%">A</text>
        </symbol>
    
        <g>
            <use xlink:href="#letter" class="txt"></use>
        </g>
    </svg>

    数字切换

    数字切换的方式是通过修改 path 路径来实现动画。是直接修改 path 的路径。

    css 代码如下:

    .path{
        -webkit-animation:animation2 10s ease-in-out infinite;
    }
    @keyframes animation2 {
        0%,
        7% {
            d: path('M0,100 L50,100 L50,50 L50,0 L0,0 L0,50 L50,50')
        }
        11%,
        17% {
            d: path('M0,0 L50,0 L50,100 L0,100 L0,0 L0,50 L50,50')
        }
        21%,
        27% {
            d: path('M0,0 L50,0 L50,20 L50,40 L50,60 L50,80 L50,100')
        }
        31%,
        37% {
            d: path('M50,0 L0,0 L0,50 L0,100 L50,100, L50,50 L0,50')
        }
        41%,
        47% {
            d: path('M50,0 L0,0 L0,50 L25,50 L50,50 L50,100 L0,100')
        }
        51%,
        57% {
            d: path('M0,0 L0,50 L50,50 L50,0 L50,35 L50,70 L50,100')
        }
        61%,
        67% {
            d: path('M0,0 L50,0 L50,100 L0,100 L50,100 L50,50 L0,50')
        }
        71%,
        77% {
            d: path('M0,0 L50,0 L50,50 L25,50 L0,50 L0,100 L50,100')
        }
        81%,
        87% {
            d: path('M50,0 L50,15 L50,30 L50,45 L50,60 L50,75 L50,100')
        }
        91%,
        96% {
            d: path('M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0')
        }
    }

    html 代码如下:

    <svg version="1.2" xml:space="default">
        <path class="path" fill="none" stroke="#FFEB3B" stroke-width="2px" d="M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0"></path>
    </svg>

    参考资料: http://www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animation/

  • 相关阅读:
    浏览器返回按钮不会触发onLoad事件
    js常用方法
    清除浮动
    Hbuilder快捷键
    页面跳转
    castapp.js颜色配置
    mui学习
    css 特殊使用技巧
    mui框架如何实现页面间传值
    从0到千万级访问量网站架构演变史
  • 原文地址:https://www.cnblogs.com/zourong/p/6771306.html
Copyright © 2011-2022 走看看