amcharts实现太阳照射地球日夜更替三维地球动画效果代码
代码语言:html
所属分类:动画
代码描述:amcharts实现太阳照射地球日夜更替三维地球动画效果代码
代码标签: amcharts 太阳 照射 地球 日夜 更替 三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(34,42,63,1) 50%, rgba(14,75,131,1) 100%) } #chartdiv { width: 100%; height: 98vh } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.index.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.map.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.continentsLow.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.Animated.js"></script> <div id="chartdiv"></div> <script > /** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */ // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var root = am5.Root.new("chartdiv"); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root)]); // Create the map chart // https://www.amcharts.com/docs/v5/charts/map-chart/ var chart = root.container.children.push(am5map.MapChart.new(root, { panX: "rotateX", panY: "rotateY", projection: am5map.geoOrthographic() })); // Create series for background fill // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon var backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {})); backgroundSeries.mapPolygons.template.setAll({ fill: am5.color(0x0975da), fillOpacity: 1, strokeOpacity: 0 }); // Add background polygon // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon backgroundSeries.data.push({ geometry: am5map.getGeoRectangle(90, 180, -90, -180) }); // graticule series var graticuleSeries = chart.series.push(am5map.GraticuleSeries.new(root, {})); graticuleSeries.mapLines.template.setAll({ stroke: am5.color(0xffffff), strokeOpacity: 0.08 }); // Create main polygon series for countries // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/ var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, { geoJSON: am5geodata_continentsLow })); polygonSeries.mapPolygons.template.setAll({ stroke: am5.color(0x222a3f), fill: am5.color(0x303950), fillOpacity: 0.6 }); // Create point series for Sun icon // https://www.amcharts.com/docs/v5/charts/map-chart/map-point-series/ var sunSeries = chart.series.push(am5map.MapPointSeries.new(root, {})); sunSeries.bullets.push(function () { var circle = am5.Circle.new(root, { radius: 18, fill: am5.color(0xffba00), filter: "blur(5px)" }); circle.animate({ key: "radius", duration: 2000, to: 23, loops: Infinity, easing: am5.ease.yoyo(am5.ease.linear) }); return am5.Bullet.new(root, { sprite: circle }); }); sunSeries.bullets.push(function () { return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: 14, fill: am5.color(0xffba00) }) }); }); var sunDataItem = sunSeries.pushDataItem({}); // Create polygon series for night-time polygons // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/ var nightSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {})); nightSeries.mapPolygons.template.setAll({ fill: am5.color(0x000000), fillOpacity: 0.25, strokeOpacity: 0 }); var nightDataItem0 = nightSeries.pushDataItem({}); var nightDataItem1 = nightSeries.pushDataItem({}); var nightDataItem2 = nightSeries.pushDataItem({}); // Create controls var container = chart.children.push( am5.Container.new(root, { y: am5.percent(95), centerX: am5.p50, x: am5.p50, width: am5.percent(80), layout: root.horizontalLayout })); var playButton = container.children.push( am5.Button.new(root, { themeTags: ["play"], centerY: am5.p50, marginRight: 15, icon: am5.Graphics.new(root, { themeTags: ["icon"] }) })); playButton.events.on("click", function () { if (playButton.get("active")) { slider.set("start", slider.get("start") + 0.0001); } else { slider.animate({ key: "start", .........完整代码请登录后点击上方下载按钮下载查看
网友评论0