svg动画-代码世界(附源码)

demo

demo2

demo3

demo4

本次带来的是一个动画--代码世界
在屏幕上随机出现0-9或A-Z的字符
核心思想:
在svg中随机的地方画TEXT文本并改变font-size
在外部设置控制对象,使svg动画能防止多次执行及随时停止
使用requestAnimationFrame使动画流畅
hsla颜色环使文本颜色循环渐进改变

hsla:
h:hue (色调) 数值为0-360,0:红色,120:绿色,240:蓝色.其实就是一个颜色环

s:Saturation (饱和度) 数值为0%-100%
l:Lightness(亮度) 数值为0%-100%
a:Alpha(透明度) 数值为0-1

        /*
        判断动画是否在执行
         */
        var fontLoop = {
            start:false,
            stop:false
        }
        function fontCode(){
            var svg,
                countWidth,
                countHeight,
                tick,
                fontArray=[]

            function scale(newFont){
                /*
                改变字号,缩小/改变横纵坐标使缩小到中央,
                 */
                let text = document.getElementById(newFont.id);
                let textX = parseInt(text.getAttribute('x'))+1.5/2;
                let textY = parseInt(text.getAttribute('y'))-1/2;
                text.setAttribute('font-size',newFont.font);
                text.setAttribute('x',textX);
                text.setAttribute('y',textY);
                newFont.font-=2;
                if(newFont.font<=0){ 
                    /*
                    如果字号小于0将数组移除该元素,svg移除该节点
                     */
                    text.parentNode.removeChild(text);
                    fontArray.shift();
                    return true;
                }
            }

            function draw(){
                /*
                循环数组中的text,对其进行渲染
                 */
                for(let i=0,length = fontArray.length;i0.5?randCode():randInt(0,9);
                text.setAttributeNS(null,'id',newFont.id);
                text.setAttributeNS(null,'x',x);
                text.setAttributeNS(null,'y',y);
                text.setAttributeNS(null,'fill','hsla('+color+',80%,35%,1)');
                text.setAttributeNS(null,'font-weight','bold');
                text.setAttributeNS(null,'stroke','#fff');
                text.innerHTML = content;
                svg.appendChild(text);
                /*
                将所有的文字放进数组
                 */
                fontArray.push(newFont);
            }

            function loop(){
                /*
                可以在外部改变fontLoop.stop的值停止动画
                 */
                if(!fontLoop.stop){
                    requestAnimationFrame(loop);
                }else{
                    for(let i=0,length = fontArray.length;i

原创代码:喜欢的可以点击关注我不叫奇奇,不定时带来svg的知识或者是动画源码.