网站设计页面如何做居中,品牌网站建设流程图,百度推广入口登录,友情链接联盟文章目录 1、效果预览2、代码2.1、定义数组写下祝福语2.2、模拟雪花落下的效果2.3、设置背景粒子2.4、操作动画效果2.5、定义闪烁效果2.6、定义粒子对象2.7、粒子对象播放2.8、绘制星星2.9、绘制圣诞树2.10、绘制星星背景动画2.11、定义初始化函数并调用 3、结尾 1、效果预览 圣… 文章目录 1、效果预览2、代码2.1、定义数组写下祝福语2.2、模拟雪花落下的效果2.3、设置背景粒子2.4、操作动画效果2.5、定义闪烁效果2.6、定义粒子对象2.7、粒子对象播放2.8、绘制星星2.9、绘制圣诞树2.10、绘制星星背景动画2.11、定义初始化函数并调用 3、结尾 1、效果预览 圣诞 2、代码
2.1、定义数组写下祝福语 分析 定义了一个名为myLabels的数组其中包含了三个字符串元素分别是“Merry Christmas”, “健健康康平安喜乐”, “一定要站在你所热爱的世界里闪闪发光”。 代码 let myLabels [Merry Christmas,健健康康平安喜乐,一定要站在你所热爱的世界里闪闪发光,
];2.2、模拟雪花落下的效果 分析 创建了一个div元素用于表示雪花设置其样式为绝对定位颜色为白色并设置雪花字符为 “❆”。
然后获取了页面的高度和宽度用于确定雪花的起始和结束位置。
接下来定义了生成一片雪花的毫秒数以及一个定时器定期生成一片雪花。
在每个定时器回调函数中随机生成雪花的起始和结束位置、大小、持续时间、透明度等参数。
然后克隆出一个雪花并根据上述参数设置其样式并插入到页面中。
接下来设置了一个一次性定时器用于在雪花生成后一段时间后修改雪花的样式使其具有下落效果。
最后在雪花落下后一段时间再次设置一个定时器将雪花从页面中删除。 代码 function snow() {// 1、定义一片雪花模板var flake document.createElement(div);// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺flake.innerHTML ❆;flake.style.cssText position:absolute;color:#fff;;//获取页面的高度 相当于雪花下落结束时Y轴的位置var documentHieght window.innerHeight;//获取页面的宽度利用这个数来算出雪花开始时left的值var documentWidth window.innerWidth;//定义生成一片雪花的毫秒数var millisec 100;//2、设置第一个定时器周期性定时器每隔一段时间millisec生成一片雪花setInterval(function () {//页面加载之后定时器就开始工作//随机生成雪花下落 开始 时left的值相当于开始时X轴的位置var startLeft Math.random() * documentWidth;//随机生成雪花下落 结束 时left的值相当于结束时X轴的位置var endLeft Math.random() * documentWidth;//随机生成雪花大小var flakeSize 5 20 * Math.random();//随机生成雪花下落持续时间var durationTime 4000 7000 * Math.random();//随机生成雪花下落 开始 时的透明度var startOpacity 0.7 0.3 * Math.random();//随机生成雪花下落 结束 时的透明度var endOpacity 0.2 0.2 * Math.random();//克隆一个雪花模板var cloneFlake flake.cloneNode(true);//第一次修改样式定义克隆出来的雪花的样式cloneFlake.style.cssText left: ${startLeft}px;opacity: ${startOpacity};font-size:${flakeSize}px;top:-25px;transition:${durationTime}ms;;//拼接到页面中document.body.appendChild(cloneFlake);//设置第二个定时器一次性定时器//当第一个定时器生成雪花并在页面上渲染出来后修改雪花的样式让雪花动起来setTimeout(function () {//第二次修改样式cloneFlake.style.cssText left: ${endLeft}px;top:${documentHieght}px;opacity:${endOpacity};;//4、设置第三个定时器当雪花落下后删除雪花。setTimeout(function () {cloneFlake.remove();}, durationTime);}, 0);}, millisec);
}调用函数 snow();2.3、设置背景粒子 分析 使用MorphSVGPlugin插件来将指定的多边形转换为路径。
首先调用MorphSVGPlugin.convertToPath(polygon)方法将ID为“polygon”的多边形元素转换为路径元素。
然后定义了两个命名空间常量xmlns和xlinkns分别用于设置XML命名空间和Xlink命名空间。
接下来定义了两个辅助函数select和selectAll用于选择一个或多个元素。
然后通过select函数选择了一些DOM元素例如.pContainer、.mainSVG、#star、.sparkle、#tree等。
接下来定义了一些变量showParticle为true表示显示粒子particleColorArray是一个颜色数组particleTypeArray是一个粒子类型数组用于指定粒子的形状。
然后定义了一个粒子池数组particlePool、一个粒子计数器particleCount以及一个粒子数量numParticles。 代码 MorphSVGPlugin.convertToPath(polygon);var xmlns http://www.w3.org/2000/svg,xlinkns http://www.w3.org/1999/xlink,select function (s) {return document.querySelector(s);},selectAll function (s) {return document.querySelectorAll(s);},pContainer select(.pContainer),mainSVG select(.mainSVG),star select(#star),sparkle select(.sparkle),tree select(#tree),showParticle true,particleColorArray [#E8F6F8,#ACE8F8,#F6FBFE,#A2CBDC,#B74551,#5DBA72,#910B28,#910B28,#446D39,],particleTypeArray [#star, #circ, #cross, #heart],// particleTypeArray [#star],particlePool [],particleCount 0,numParticles 201;2.4、操作动画效果 分析 使用GSAP动画库GreenSock Animation Platform来操作SVG元素的动画效果。
首先通过gsap.set设置了SVG的可见性为“visible”表示将SVG元素设置为可见状态。
接下来使用gsap.set设置了sparkle元素的transformOrigin为50% 50%并将其y坐标设置为-100这将影响后续的动画效果。
然后定义了一个函数getSVGPoints用于获取SVG路径中的点坐标。该函数接受一个路径元素作为参数通过MotionPathPlugin.getRawPath方法获取路径的原始数据并将其转换为点坐标的数组。
接着使用getSVGPoints函数分别获取了.treePath和.treeBottomPath的点坐标并存储在treePath和treeBottomPath变量中。
最后创建了一个mainTl的GSAP时间轴和一个starTl的动画时间轴用于控制整体的动画效果。 代码 // gsap动画库
gsap.set(svg, {visibility: visible,
});gsap.set(sparkle, {transformOrigin: 50% 50%,y: -100,
});let getSVGPoints (path) {let arr [];var rawPath MotionPathPlugin.getRawPath(path)[0];rawPath.forEach((el, value) {let obj {};obj.x rawPath[value * 2];obj.y rawPath[value * 2 1];if (value % 2) {arr.push(obj);}//console.log(value)});return arr;
};
let treePath getSVGPoints(.treePath);var treeBottomPath getSVGPoints(.treeBottomPath);//console.log(starPath.length)
var mainTl gsap.timeline({ delay: 0, repeat: 0 }),starTl;2.5、定义闪烁效果 分析 定义一个名为flicker的函数用于实现一个闪烁效果。
该函数接受一个参数p表示要应用闪烁效果的对象。
首先通过gsap.killTweensOf方法停止对象p的所有关于透明度的动画效果。
然后使用gsap.fromTo方法设置对象p的透明度动画效果。
初始状态下设置透明度为1即完全可见。
然后设置动画的持续时间为0.07秒并将透明度设置为一个随机值范围在0到1之间。
最后设置动画重复播放使得闪烁效果无限循环。 代码 function flicker(p) {//console.log(flivker)gsap.killTweensOf(p, { opacity: true });gsap.fromTo(p,{opacity: 1,},{duration: 0.07,opacity: Math.random(),repeat: -1,});}2.6、定义粒子对象 分析 定义了一个名为createParticles的函数用于创建和初始化粒子particles。
首先注释掉了变量step的初始化代码和打印starPath.length的语句。
接着定义了变量i初始值为numParticles。变量p表示粒子的元素particleTl是粒子的动画时间轴step用于确定粒子在treePath路径中的位置pos用于存储具体的粒子位置。
然后使用while循环逐个创建粒子对象。在每次循环中通过select方法选择一个粒子的类型使用cloneNode(true)方法对其进行克隆并将克隆的粒子对象添加到mainSVG中。
接下来设置粒子的填充颜色通过particleColorArray数组来循环设置粒子的颜色属性。
然后为粒子设置class属性为particle并将其添加到particlePool数组中以便后续使用。
最后使用gsap.set方法将粒子对象的初始位置设置为(-100, -100)并设置transformOrigin为50% 50%。 代码 function createParticles() {//var step numParticles/starPath.length;//console.log(starPath.length)var i numParticles,p,particleTl,step numParticles / treePath.length,pos;while (--i -1) {p select(particleTypeArray[i % particleTypeArray.length]).cloneNode(true);mainSVG.appendChild(p);p.setAttribute(fill,particleColorArray[i % particleColorArray.length]);p.setAttribute(class, particle);particlePool.push(p);//hide them initiallygsap.set(p, {x: -100,y: -100,transformOrigin: 50% 50%,});}
}2.7、粒子对象播放 分析 定义一个名为getScale的函数用于生成一个随机的缩放比例。该函数使用了gsap.utils.random方法传入了最小值0.5、最大值3、步长0.001和布尔值参数true。这意味着生成的随机数将在0.5到3之间并以0.001为步长。
接下来定义了一个名为playParticle的函数用于播放粒子动画。在函数内部首先判断是否允许显示粒子如果不允许则直接返回。
然后通过particlePool数组获取当前要播放的粒子对象。
接下来使用gsap.set方法设置粒子的初始位置为.pContainer元素的x和y属性的值并设置缩放比例为通过getScale函数生成的随机数。
然后创建一个时间轴对象tl并使用tl.to方法对粒子对象进行动画操作。
在动画过程中设置了动画的持续时间为0.61到6秒之间的随机数。
使用physics2D属性实现了一个物理引擎效果具体的速度、角度和重力值通过gsap.utils.random方法生成。
同时设置了粒子的缩放比例和旋转角度为随机的范围值。
设置了动画的缓动函数为power1。
在动画开始时调用了flicker函数并传入了粒子对象作为参数。
在动画重复时通过onRepeat方法设置了粒子的缩放比例为通过getScale函数生成的随机数。 代码 var getScale gsap.utils.random(0.5, 3, 0.001, true); // 圣诞树开始绘画时小光点动画的特效参数最小值最大值延迟function playParticle(p) {if (!showParticle) {return;}var p particlePool[particleCount];gsap.set(p, {x: gsap.getProperty(.pContainer, x),y: gsap.getProperty(.pContainer, y),scale: getScale(),});var tl gsap.timeline();tl.to(p, {duration: gsap.utils.random(0.61, 6),physics2D: {velocity: gsap.utils.random(-23, 23),angle: gsap.utils.random(-180, 180),gravity: gsap.utils.random(-6, 50),},scale: 0,rotation: gsap.utils.random(-123, 360),ease: power1,onStart: flicker,onStartParams: [p],//repeat:-1,onRepeat: (p) {gsap.set(p, {scale: getScale(),});},onRepeatParams: [p],});////particlePool[particleCount].play();particleCount;//mainTl.add(tl, i / 1.3)particleCount particleCount numParticles ? 0 : particleCount;
}2.8、绘制星星 分析 定义一个名为drawStar的函数用于绘制星星动画。在函数内部首先创建了一个时间轴对象starTl并设置了更新回调函数为playParticle。
接下来使用to方法对.pContainer和.sparkle元素进行动画操作。在动画过程中设置了动画的持续时间为6秒并使用motionPath属性指定了动画的路径为.treePath元素并禁用了自动旋转效果。设置了动画的缓动函数为linear。
接着使用to方法对.pContainer和.sparkle元素进行动画操作。在动画开始时通过onStart函数将showParticle变量设置为false表示不显示粒子。设置了动画的持续时间为1秒并将元素的x和y属性设置为treeBottomPath[0].x和treeBottomPath[0].y。
然后使用to方法对.pContainer和.sparkle元素进行动画操作。在动画开始时通过onStart函数将showParticle变量设置为true表示显示粒子。设置了动画的持续时间为2秒并使用motionPath属性指定了动画的路径为.treeBottomPath元素并禁用了自动旋转效果。设置了动画的缓动函数为linear。
最后使用from方法对.treeBottomMask元素进行动画操作。设置了动画的持续时间为2秒并使用drawSVG属性指定了路径的起始结束百分比为0% 0%即不显示路径同时设置了画笔的颜色为#FFF表示白色。设置了动画的缓动函数为linear。 代码 function drawStar() {starTl gsap.timeline({ onUpdate: playParticle });starTl.to(.pContainer, .sparkle, {duration: 6,motionPath: {path: .treePath,autoRotate: false,},ease: linear,}).to(.pContainer, .sparkle, {duration: 1,onStart: function () {showParticle false;},x: treeBottomPath[0].x,y: treeBottomPath[0].y,}).to(.pContainer, .sparkle,{duration: 2,onStart: function () {showParticle true;},motionPath: {path: .treeBottomPath,autoRotate: false,},ease: linear,},-0)// 圣诞树中间那条横线动画 .treeBottomMask 是绑定classtreeBottomMask这个标签.from(.treeBottomMask,{duration: 2,drawSVG: 0% 0%,stroke: #FFF,ease: linear,},-2);//gsap.staggerTo(particlePool, 2, {})
}2.9、绘制圣诞树 分析 定义了一个名为drawMain的函数用于绘制主要的圣诞树动画。在函数内部首先创建了一个时间轴对象mainTl。
接下来使用from方法对.treePathMask和.treePotMask元素进行动画操作。设置了动画的持续时间为6秒并使用drawSVG属性指定了路径的起始结束百分比为0% 0%即不显示路径同时设置了画笔的颜色为#FFF表示白色。设置了动画的缓动函数为linear。
然后使用from方法对.treeStar元素进行动画操作。设置了动画的持续时间为3秒并设置了元素的scaleY属性为0、scaleX属性为0.15表示缩放比例使用transformOrigin属性指定了缩放的基点在元素的中心。设置了动画的缓动函数为elastic(1,0.5)。
接着使用to方法对.sparkle元素进行动画操作。设置了动画的持续时间为3秒并将元素的透明度设置为0使用了rough缓动函数该缓动函数会在动画期间以随机方式改变元素的透明度值。该动画将在前一个动画的结束点之后开始。
最后使用to方法对.treeStarOutline元素进行动画操作。设置了动画的持续时间为1秒并将元素的透明度设置为0.3使用了rough缓动函数该缓动函数会在动画期间以随机方式改变元素的透明度值。该动画将在前一个动画的结束点之后开始。 代码 function drawMain() {mainTl// 圣诞树上半身轮廓动画.from([.treePathMask, .treePotMask], {duration: 6,drawSVG: 0% 0%,stroke: #FFF,stagger: {each: 6,},duration: gsap.utils.wrap([6, 1, 2]),ease: linear,})// 圣诞树头上的星星动画.from(.treeStar,{duration: 3,//skewY:270,scaleY: 0,scaleX: 0.15,transformOrigin: 50% 50%,ease: elastic(1,0.5),},-4)// 当绘画圣诞树的小光点绘制完时让小光点消失.to(.sparkle,{duration: 3,opacity: 0,ease: rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false}),},-0)// 给圣诞树头上的星星加个白色特效.to(.treeStarOutline,{duration: 1,opacity: 0.3,ease: rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false}),},1);/* .to(.whole, {
opacity: 0
}, 2) */
}2.10、绘制星星背景动画 分析 定义一个名为drawStars的函数用于绘制星星背景动画。在函数内部首先获取了stars元素然后创建了一个canvas元素并将其上下文赋给ctx变量。接着设置了canvas的宽度和高度为窗口的宽度和高度并分别赋给w和h变量。
然后定义了一些变量包括色调色彩hue、保存星星对象的数组stars、计数器count和最大星星数量maxStars。
接下来创建了一个用于绘制星星的源图像canvas2并获取其上下文赋给ctx2变量。设置了canvas2的宽度和高度为100并创建了径向渐变gradient2以半径为0的圆开始到半径为half的圆结束。根据色调色彩hue的不同设置了不同的颜色。然后使用路径arc创建了一个圆并使用fill方法填充了渐变。
接着定义了一个random函数用于生成指定范围内的随机数。
定义了一个maxOrbit函数用于根据屏幕宽高计算星星的移动范围。
创建了一个Star构造函数用于实例化星星对象。在构造函数中设置了星星的移动半径、大小、圆心位置、初始角度、移动速度和透明度等属性并将新创建的星星对象存入stars数组。
Star对象定义了一个draw方法用于绘制星星。在该方法中根据星星的移动半径和角度计算出星星在屏幕上的位置。根据随机数判断星星是否变亮或变暗并根据透明度绘制星星。最后更新星星的角度。
然后使用循环创建了指定数量的星星对象。
最后定义了一个animation函数用于执行星星的动画效果。在该函数中首先绘制了一个半透明的背景颜色然后使用for循环调用每个星星对象的draw方法进行绘制。最后通过window.requestAnimationFrame方法不断循环调用animation函数实现动画效果。 代码 function drawStars() {let canvas document.getElementById(stars),ctx canvas.getContext(2d),w (canvas.width window.innerWidth),h (canvas.height window.innerHeight),hue 37, //色调色彩stars [], //保存所有星星count 0, //用于计算星星maxStars 1300; //星星数量//canvas2是用来创建星星的源图像即母版//根据星星自身属性的大小来设置var canvas2 document.createElement(canvas),ctx2 canvas2.getContext(2d);canvas2.width 100;canvas2.height 100;//创建径向渐变从坐标(halfhalf)半径为0的圆开始//到坐标为(half,half)半径为half的圆结束var half canvas2.width / 2,gradient2 ctx2.createRadialGradient(half, half, 0, half, half, half);gradient2.addColorStop(0.025, #CCC);//hsl是另一种颜色的表示方式//h-hue,代表色调色彩0为red120为green240为blue//s-saturation代表饱和度0%-100%//l-lightness代表亮度0%为black100%位whitegradient2.addColorStop(0.1, hsl( hue , 61%, 10%));gradient2.addColorStop(0.25, hsl( hue , 64%, 2%));gradient2.addColorStop(1, transparent);ctx2.fillStyle gradient2;ctx2.beginPath();ctx2.arc(half, half, half, 0, Math.PI * 2);ctx2.fill();// End cachefunction random(min, max) {if (arguments.length 2) {max min;min 0;}if (min max) {var hold max;max min;min hold;}//返回min和max之间的一个随机值return Math.floor(Math.random() * (max - min 1)) min;}function maxOrbit(x, y) {var max Math.max(x, y),diameter Math.round(Math.sqrt(max * max max * max));//星星移动范围值越大范围越小return diameter / 2;}var Star function () {//星星移动的半径this.orbitRadius random(maxOrbit(w, h));//星星大小半径越小星星也越小即外面的星星会比较大this.radius random(60, this.orbitRadius) / 8;//所有星星都是以屏幕的中心为圆心this.orbitX w / 2;this.orbitY h / 2;//星星在旋转圆圈位置的角度,每次增加speed值的角度//利用正弦余弦算出真正的x、y位置this.timePassed random(0, maxStars);//星星移动速度this.speed random(this.orbitRadius) / 50000;//星星图像的透明度this.alpha random(2, 10) / 10;count;stars[count] this;};Star.prototype.draw function () {//星星围绕在以屏幕中心为圆心半径为orbitRadius的圆旋转var x Math.sin(this.timePassed) * this.orbitRadius this.orbitX,y Math.cos(this.timePassed) * this.orbitRadius this.orbitY,twinkle random(10);//星星每次移动会有1/10的几率变亮或者变暗if (twinkle 1 this.alpha 0) {//透明度降低变暗this.alpha - 0.05;} else if (twinkle 2 this.alpha 1) {//透明度升高变亮this.alpha 0.05;}ctx.globalAlpha this.alpha;//使用canvas2作为源图像来创建星星//位置在x - this.radius / 2, y - this.radius / 2//大小为 this.radiusctx.drawImage(canvas2,x - this.radius / 2,y - this.radius / 2,this.radius,this.radius);//没旋转一次角度就会增加this.timePassed this.speed;};//初始化所有星星for (var i 0; i maxStars; i) {new Star();}function animation() {//以新图像覆盖已有图像的方式进行绘制背景颜色ctx.globalCompositeOperation source-over;ctx.globalAlpha 0.9; //尾巴ctx.fillStyle hsla( hue , 64%, 6%, 2);ctx.fillRect(0, 0, w, h);//源图像和目标图像同时显示重叠部分叠加颜色效果ctx.globalCompositeOperation lighter;for (var i 1, l stars.length; i l; i) {stars[i].draw();}//调用该方法执行动画并且在重绘的时候调用指定的函数来更新动画//回调的次数通常是每秒60次window.requestAnimationFrame(animation);}animation();
}2.11、定义初始化函数并调用 分析 执行了init函数接着依次执行了createParticles、drawStar、drawMain和drawStars等函数并将它们添加到了mainTl时间轴中。最后通过gsap.globalTimeline.timeScale(1.5)方法设置了全局时间轴的绘画速率。 代码 function init() {let element document.getElementById(header);for(let i 0; i myLabels.length; i) {let _p document.createElement(p);_p.className header-item;_p.innerHTML myLabels[i];element.appendChild(_p);}let labels document.getElementsByClassName(header-item);for(let i 0; i myLabels.length; i) {setTimeout(() {labels[i].classList.add(show);}, 1000 * i);}
}
init();
createParticles()
drawStar();
drawMain();
mainTl.add(starTl, 0);
gsap.globalTimeline.timeScale(1.5); // 圣诞树开始绘画时小光点动画的绘画速率越大越快
drawStars();3、结尾
大部分都是js代码其实还有一些html和css需要自己研究一下需要源码私信祝大家平安夜圣诞夜快乐
