我目前正在一个项目中,必须在其中构建一个包含百分比和定制svgs动画的加载屏幕.我已经遍及整个互联网,但是找不到我所需要的东西？我似乎什至无法获得一个简单的加载栏来工作！
我在下面列出了我目前拥有的东西.我一直在使用this walkthrough作为progressbar.Js,因为它包含动画和百分比,但是任何指导将不胜感激！
(我的想法是让南瓜种子在栏杆加载时彼此旋转,然后连接在一起,一旦栏杆达到100％,南瓜就会d出)
var Progressbar = required('progressbar.Js')var line = new Progressbar.line('#container');var bar = new Progressbar.line('#container',{ strokeWIDth: 4,easing: 'easeInOut',duration: 1400,color: '#92D4CE',trailcolor: '#78BA43',trailWIDth: 1,svgStyle: {wIDth: '100%',height: '100%'},text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#999',position: 'absolute',right: '0',top: '30px',padding: 0,margin: 0,transform: null },autoStyleContainer: false },from: {color: '#92D4CE'},to: {color: '#78BA43'},step: (state,bar) => { bar.setText(Math.round(bar.value() * 100) + ' %'); }});bar.animate(1.0); // Number from 0.0 to 1.0body{ #container { margin: 20px; wIDth: 400px; height: 8px; position: relative;}}<body><div ID="container"></div><div ID="animated"> <svg xmlns="http://www.w3.org/2000/svg" vIEwBox="0 0 144 144"> <style> .st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-wIDth:.3793;stroke-miterlimit:10} </style> <g ID="seeds"> <g ID="seedThree"> <path d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/> <path d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/> <ellipse transform="rotate(-18.558 40.64 90.84)" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/> <ellipse transform="rotate(-18.558 40.319 88.068)" cx="40.33" cy="88.07" rx=".21" ry=".36"/> </g> <g ID="seedTwo"> <path d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/> <path d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/> <ellipse transform="rotate(-18.558 65.931 50.743)" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/> <ellipse transform="rotate(-18.558 65.61 47.97)" cx="65.62" cy="47.97" rx=".21" ry=".36"/> </g> <g ID="seedOne"> <path d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/> <path d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/> <ellipse transform="rotate(-18.558 89.215 89.095)" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/> <ellipse transform="rotate(-18.558 88.895 86.322)" cx="88.9" cy="86.32" rx=".21" ry=".36"/> </g> </g> <g ID="pumpkin"> <path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/> <path d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/> <path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/> <path d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/> <path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-wIDth=".576" stroke-miterlimit="10"/> <circle cx="70.07" cy="41.27" r="1.92"/> <path d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/> </g> </svg></div><!-- jquery --><script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><!-- Greensock --><script src="https://cdnjs.cloudflare.com/AJAX/libs/gsap/2.0.2/TweenMax.min.Js"></script><script src="Js/progressbar.Js/dist/progressbar.Js"></script><script src="Js/scripts.Js"></script></body>但是,使用CSS动画和过渡非常简单.结合了少量的JavaScript.
为了演示设置越来越多的进度,我使用了一个简单的requestAnimationFrame()动画循环.
其余代码的工作方式在代码中.
var mysvg = document.querySelector("#animated svg");//// Call this function to set the amount of progress (0 .. 1)// function setProgress(progress){ // For deBUG purposes only: show the progress amount in a div so we can see the progress document.getElementByID("test").textContent = progress.toFixed(2); // When progress is complete (1) start the pumpkin animation by adding a class to the SVG if (progress >= 1) { mysvg.classList.add("show-pumpkin"); } else { mysvg.classList.remove("show-pumpkin"); }}// Set the initial state of the progress to 0setProgress(0);// Everything else below is just to simulate you calling setProgress() with an increasing value.//// A little animation that increments the progress amount for us.// In a real situation you would be setting this yourself based on how much of your initialisation is complete etc.//var amt = 0;function incrementPogress() { amt += 0.005; setProgress(amt); if (amt <= 1) window.requestAnimationFrame(incrementPogress);}// Start our progress incrementing simulationwindow.requestAnimationFrame(incrementPogress);svg { wIDth: 500px;}/* pumkin starts out very small and invisible */#pumpkin { transform-Box: fill-Box; transform-origin: 50% 50%; transform: scale(0.0001); opacity: 0;}/* When the "show-pumkin" class is added to the SVG,wait 0.5s,then make the pumkin visible,and scale it up with a bounce easing function. */.show-pumpkin #pumpkin { opacity: 1; Transition: transform 0.5s; Transition-delay: 0.45s; transform: scale(1); Transition-timing-function: cubic-bezIEr(0.550,1.650,0.615,0.840);}/* The group of seeds rotates constantly */#seeds { transform-origin: 72px 72px; animation: rotate-clockwise 2s linear infinite;}/* The indivIDual seeds have their own rotations. With varying durations and directions. */#seeds g { transform-Box: fill-Box; transform-origin: 50% 50%; animation: rotate-clockwise 1.8s linear infinite; animation-direction: reverse;}#seeds #seedTwo { animation-direction: normal; animation-duration: 10s;}#seeds #seedThree { animation-duration: 1s;}/* Keyframe deFinition to cause a 360 degree rotation. Used for the group and indivIDual seed rotations. */@keyframes rotate-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}/* When the "show-pumkin" class is added to the SVG,start shrinking the seeds towards the centre of the SVG. We apply this transform to a new "seed-container" group so that it doesn't interfere with the rotation transform that's already happening to "#seeds". */.show-pumpkin #seeds-container { transform-origin: 72px 72px; Transition: transform 0.5s; transform: scale(0.1); Transition-timing-function: ease-out;}<div ID="animated"> <svg xmlns="http://www.w3.org/2000/svg" vIEwBox="0 0 144 144"> <style> .st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-wIDth:.3793;stroke-miterlimit:10} </style> <g ID="seeds-container"> <g ID="seeds"> <g ID="seedThree"> <path d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/> <path d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/> <ellipse transform="rotate(-18.558 40.64 90.84)" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/> <ellipse transform="rotate(-18.558 40.319 88.068)" cx="40.33" cy="88.07" rx=".21" ry=".36"/> </g> <g ID="seedTwo"> <path d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/> <path d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/> <ellipse transform="rotate(-18.558 65.931 50.743)" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/> <ellipse transform="rotate(-18.558 65.61 47.97)" cx="65.62" cy="47.97" rx=".21" ry=".36"/> </g> <g ID="seedOne"> <path d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/> <path d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/> <ellipse transform="rotate(-18.558 89.215 89.095)" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/> <ellipse transform="rotate(-18.558 88.895 86.322)" cx="88.9" cy="86.32" rx=".21" ry=".36"/> </g> </g> </g> <g ID="pumpkin"> <path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/> <path d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/> <path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/> <path d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/> <path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-wIDth=".576" stroke-miterlimit="10"/> <circle cx="70.07" cy="41.27" r="1.92"/> <path d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/> </g> </svg></div><div ID="test"></div>以上是内存溢出为你收集整理的javascript-使用百分比和svgs创建预加载屏幕 全部内容，希望文章能够帮你解决javascript-使用百分比和svgs创建预加载屏幕 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）