HTML5svg实现逼真的陨石流星坠落动画特效源码.zip资源-CSDN文库

共5个文件

js：4个

html：1个

版权申诉

179 浏览量 2022-11-03 23:38:00 上传评论收藏 47KB ZIP 举报

HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使他们能够创建出交互性强、视觉效果丰富的网页应用。在这个特定的压缩包"HTML5 svg实现逼真的陨石流星坠落动画特效源码.zip"中，我们关注的是HTML5如何与SVG（Scalable Vector Graphics）结合，来实现一种动态的、逼真的陨石流星坠落的视觉效果。 SVG是一种基于XML的矢量图形格式，它可以无损地放大，且在各种设备上保持清晰，因此非常适合创建高质量的图形和动画。在HTML5中，我们可以直接在文档中嵌入SVG元素，利用JavaScript或者CSS来控制这些元素的行为，从而实现动态效果。在这个项目中，可能包含以下关键知识点： 1. **SVG元素**：如`<svg>`定义画布，`<circle>`或`<path>`绘制流星轨迹，`<rect>`创建背景等。每个元素都有其特定的属性，如`cx`, `cy`, `r`用于定义圆形的中心和半径，`d`用于定义路径数据。 2. **CSS动画**：使用CSS的`@keyframes`规则可以定义流星从天空到地面的运动过程，包括速度、方向、透明度等变化。`animation`属性将这些关键帧绑定到元素上，实现动态效果。 3. **JavaScript事件处理**：通过JavaScript，我们可以监听用户的交互，比如页面加载完成或点击事件，然后触发流星坠落动画的开始。JavaScript也可以用来随机生成流星的位置、大小和速度，增加真实感。 4. **变换属性**：SVG的`transform`属性允许我们在JavaScript中动态改变元素的位置、旋转角度和缩放，以此模拟流星的坠落轨迹和碰撞时的爆炸效果。 5. **DOM操作**：JavaScript可以用来动态创建SVG元素，比如每颗流星都是一个独立的SVG对象。在流星坠落后，可能需要将其从DOM树中移除，或者改变其样式表示已消失。 6. **性能优化**：由于大量流星可能同时出现，使用requestAnimationFrame API可以确保动画流畅且不会过度消耗CPU资源。同时，通过合理设置动画帧率和优化计算逻辑，可以进一步提升用户体验。 7. **响应式设计**：为了适应不同屏幕尺寸和设备，流星坠落的动画应该具备响应性。这可能涉及到根据窗口大小调整陨石的数量、大小或速度，以保持视觉效果的一致性。这个源码示例对于学习HTML5动画和SVG应用是一个很好的实践项目。通过深入研究源代码，开发者可以了解如何结合使用这两种技术，创造出令人印象深刻的网页互动体验。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 svg实现逼真的陨石流星坠落动画特效源码.zip （5个子文件）

132689862445625355

index.html 9KB

CustomEase.min.js 13KB

DrawSVGPlugin.js 3KB

CustomWiggle.min.js 2KB

TweenMax.min.js 109KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5逼真的陨石流星动画特效</title> <style> body { background-color: #1C121D; overflow: hidden; text-align: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg { position: absolute; width: 100%; height: 100%; visibility: hidden; transform: translate(-50%, 0%); } </style> </head> <body> <svg viewBox="200 150 400 300" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="asteroidGrad" cx="400" cy="304.08" r="9" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#2d1e2f" stop-opacity="0" /> <stop offset="1" stop-color="#1c121d" /> </radialGradient> <radialGradient id="asteroidGlowGrad" cx="400" cy="304.08" r="162" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#2d1e2f" stop-opacity="0" /> <stop offset="1" stop-color="#A9E5BB" stop-opacity="1" /> </radialGradient> <linearGradient id="tailGrad" x1="400" y1="380.2" x2="400" y2="0" gradientUnits="userSpaceOnUse"> <stop class="tailColor" offset="0" stop-color="#00a9e5" stop-opacity="0.3" /> <stop class="tailGradOffset" offset="1" stop-color="#1C121D" stop-opacity="0" /> </linearGradient> <radialGradient id="burnupGrad" cx="401.11" cy="271.93" fy="214" r="69.63" gradientTransform="translate(0 -160.37) scale(1 1.52)" gradientUnits="userSpaceOnUse"> <stop offset="0.51" stop-color="#1C121D" stop-opacity="0" /> <stop class="burnupStop" offset="0.94" stop-color="#fbb03b" stop-opacity="0.4" /> </radialGradient> <pattern id="asteroidPattern" x="0" y="0" width="18" height="18" patternUnits="userSpaceOnUse" viewBox="0 0 18 18"> <g fill="#1C121D"> <rect width="18" height="18" fill="none" /> <path d="M11,19.88c-.34.28-1.37-.35-2-1s-1.27-1.71-1-2,2.49.47,3,2C11,19,11.26,19.67,11,19.88Z" /> <path d="M2,1.88a2.86,2.86,0,0,0,0,3c.64.72,1.57.31,2,1s-.34,1.45,0,2c.57.94,4.16,1,5-1a3.32,3.32,0,0,0-2-4c-.81-.22-1.19.32-2,0-1.19-.48-1.27-2-2-2C2.53.88,2.2,1.51,2,1.88Z" /> <path d="M11,14.88c0,.64-.09.75,0,1a1.71,1.71,0,0,0,2,1,1.84,1.84,0,0,0,1-2c-.22-1.57-2.51-2.43-3-2C10.77,13.08,11.06,13.45,11,14.88Z" /> <path d="M1,10.88c.39-.46,1.4-.29,2,0,.27.13.9.44,1,1s-.77.92-1,2c-.19.89.31,1.21,0,2,0,.08-.36.87-1,1-.89.18-2-1-2-2,0-.81.78-.91,1-2S.63,11.32,1,10.88Z" /> <path d="M15,1.88c-.1,0,.1.41,0,1-.15.87-.74,1-1,2a1.23,1.23,0,0,0,0,1,1.46,1.46,0,0,0,2,0c.4-.44.23-1.12,0-2C15.72,2.8,15.16,1.82,15,1.88Z" /> <path d="M11,1.88c-.34.28-1.37-.35-2-1s-1.27-1.71-1-2,2.49.47,3,2C11,1,11.26,1.67,11,1.88Z" /> </g> </pattern> <clipPath id="tailMask"> <polygon class="tailMask" points="409,304 391,304 400,4 " /> </clipPath> </defs> <title>ballSpeed</title> <g class="wholeBall"> <g class="ballShake"> <rect clip-path="url(#tailMask)" class="tail" x="391" y="4" width="18" rx="12" ry="12" height="300" fill="url(#tailGrad)" opacity="0.6" /> <circle class="ball" cx="400" cy="300" r="9" fill="#483127" /> <circle class="patt" cx="400" cy="300" r="9" fill="url(#asteroidPattern)" /> <circle class="asteroidGrad" cx="400" cy="300" r="9" fill="url(#asteroidGrad)" opacity="0.9" />  <ellipse class="burnup" cx="400" cy="261" rx="33.5" ry="51" fill="url(#burnupGrad)" opacity="0.4" /> </g> </g> <g class="speedLines" fill="none" stroke="#FCF6B1" opacity="0.24" stroke-width="1"> <line x1="149.5" y1="471" x2="149.5" y2="237" />  <line x1="582.5" y1="496" x2="582.5" y2="301" /> <line x1="353.5" y1="248.5" x2="353.5" y2="107.5" /> <line x1="460.5" y1="540" x2="460.5" y2="294" /> <line x1="423.5" y1="104" x2="423.5" y2="23" /> <line x1="709.5" y1="319.5" x2="709.5" y2="107.5" /> <line x1="509.5" y1="231.5" x2="509.5" y2="126.5" /> <line x1="306.5" y1="568.5" x2="306.5" y2="423" /> <line x1="604.5" y1="168.5" x2="604.5" y2="12.5" /> <line x1="61.5" y1="519" x2="61.5" y2="433" />  <line x1="771.5" y1="517.5" x2="771.5" y2="375.5" /> </g> </svg> <script src='js/TweenMax.min.js'></script> <script src='js/CustomWiggle.min.js'></script> <script src='js/DrawSVGPlugin.js?r=12'></script> <script src='js/CustomEase.min.js'></script> <script> 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); }, allSpeedLines = selectAll('.speedLines line'), tailColor = select('.tailColor'), burnupStop = select('.burnupStop'), tailGradOffset = select('.tailGradOffset'), ball = select('.ball'), tail = select('.tail'), burnup = select('.burnup'), wholeBall = select('.wholeBall'), ballShake = select('.ballShake'), lineColorsArr = ['#A9E5BB', '#FCF6B1', '#F72C25', '#F7B32B'], tailColorsArr = ['#F72C25', '#A9E5BB', '#FCF6B1', '#F72C25', '#F7B32B', '#00a9e5'], burnupColorsArr = ['#F72C25', '#F72C25', '#FBEB22', '#FBEB22', '#FBEB22', '#FFF', '#FFF', '#FFF'] //console.log(allSpeedLines.length) TweenMax.set('svg', { visibility: 'visible' }) TweenMax.set(allSpeedLines, { drawSVG: '0% 0%' }) TweenMax.set(ballShake, { transformOrigin: '50% 50%' }) CustomWiggle.create("ballDrop", { wiggles: 60, type: "random" }); var gradShakeTl = new TimelineMax({ repeat: -1 }); var burnupTl = new TimelineMax({ repeat: -1 }); var ballPatternXTl = new TimelineMax({ repeat: -1, yoyo: false }).timeScale(2); var ballPatternYTl = new TimelineMax({ repeat: -1, yoyo: false }).timeScale(2.82); var ballShakeTl = new TimelineMax({ repeat: -1, onUpdate: function() { tailColor.setAttribute('stop-color', tailColorsArr[Math.floor(Math.random() * tailColorsArr.length)]) burnupStop.setAttribute('stop-color', burnupColorsArr[Math.floor(Math.random() * burnupColorsArr.length)]) burnupStop.setAttribute('stop-opacity', Math.random()) } }); var ballTl = new TimelineMax({ repeat: -1, yoyo: true }); var linesTl = new TimelineMax({ repeat: -1 }); ballShakeTl.to(ballShake, 1, { y: '-=5', scale: 1.02, ease: 'ballDrop' }) gradShakeTl.to(tailGradOffset, 2, { attr: { offset: 0 }, ease: 'ballDrop' }) burnupTl.to(burnup, 2, { attr: { rx: 23 }, ease: 'ballDrop' }) ballTl.to(wholeBall, 2, { y: 73, ease: Sine.easeInOut }) .to(wholeBall, 4, { y: -70, ease: Sine.easeInOut }, '+=3') .to(wholeBall, 8, { y: 110, ease: Sine.easeInOut }) .to(wholeBall, 6, { y: 0, ease: Sine.easeInOut }) ballPatternYTl.to('#asteroidPattern', 1.05, { attr: { x: '-=18' }, ease: Linear.easeNone }) ballPatternXTl.to('#asteroidPattern', 0.87, { attr: { y: '-=18' }, ease: Linear.easeNone }) function makeLines() { var tl, l

评论收藏

内容反馈

版权申诉