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的知識或者是動畫源碼.