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;i<length;i++){
                    let result = scale(fontArray[i]);
                    /*
                    如果数组中移除元素,改变长度及当前值
                     */
                    if(result){
                        length-=1;
                        i-=1;
                    }
                }
            }

            function create(){
                /*
                每秒执行60次requestAnimationFrame,所以这是每秒画30个字母
                 */
                if(tick%2!=0){
                    return
                }
                /*
                创建svg的text
                 */
                let text = document.createElementNS('http://www.w3.org/2000/svg','text');
                let newFont = {
                    id:'text'+new Date().getTime(),
                    font:80
                }
                /*
                获取随机的x,y
                 */
                let x = randInt(0,countWidth)*20;
                let y = randInt(1,countHeight)*40;
                let color = Math.floor(tick);
                /*
                随机字母或者是数字
                 */
                let content = Math.random()>0.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<length;i++){
                        let text = document.getElementById(fontArray[i].id);
                        remove(text)
                    }
                }
                create();
                draw();
                tick++;
            }

            /*
            初始化
             */
            function init(){
                if(fontLoop.start){
                    return
                }
                svg = document.getElementById("svg");
                let width = svg.clientWidth;
                let height = svg.clientHeight;
                /*
                按照字母的大小把界面划分成网格
                 */
                countHeight = Math.ceil(height/40);
                countWidth = Math.ceil(width/20);
                fontLoop.stop=false;
                fontLoop.start=true;
                tick = 0;
                /*
                进入循环
                 */
                loop();
            }

            function randInt(min, max) {
                return Math.floor(min + Math.random() * (max - min + 1));
            };

            /*
            获取随机字母
             */
            function randCode(){
                let ranNum = Math.ceil(Math.random() * 25);
                return String.fromCharCode(65+ranNum);
            }

            /*
            开始执行
             */
            init();
        }

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