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的知识或者是动画源码.
