整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
孩子一起在家宅了十幾天，每天大門不出二門不邁，堅決做到不給國家添亂。在這特殊的親子時光里，除了在家看繪本、做手工、烹飪美食、玩游戲之外，其實還有另外一個更棒的假期選擇，那就是在家“逛”展。
小編特別篩選了一些適合小朋友們的線上展覽，在享受視覺+影音的同時，還能輕松漲知識。
在疫情期間，很多機構利用已有數字資源推出一批精彩網上展覽，孩子足不出戶就能觀看全國各地優秀展覽，快來和小編一起先睹為快吧！！
北京動物園在這個假期開啟了線上動物園，小朋友們在家里就能通過公眾號觀看各種可愛的動物啦！動物園的工作人員將動物的日常生活制作成短片，配以圖文，展示飼養員們消毒、訓練、喂食、觀察等工作，介紹動物相關的科普知識。
本期線上動物園里介紹的是咱們國家珍貴的金絲猴，喜歡的小朋友可以來“逛逛”。哦對了，還可以留言寫下喜歡的動物，官方推送呢！
觀看地址：北京動物園微信公眾號
國家海洋博物館位于天津，是中國首座國家級、綜合性、公益性的海洋博物館！同時它也是一座非常年輕且科技范十足的博物館，現在登錄官網，可以通過線上展覽板塊觀看遠古海洋、龍的時代、海洋與天文等不同主題的展覽，背景音自帶講解，還加有VR功能，完全跟在博物館里一模一樣！
遠古海洋
遠古海洋展廳包括洪荒海洋——前寒武紀海洋、生命海洋——古生代海洋、龍海滄桑——中生代海洋、新生海洋——新生代海洋四部分內容，是目前國內展品較全、面積最大的古海洋專題展廳。
以地質年代為軸，通過展覽疊層石、三葉蟲、鸚鵡螺等1158件化石標本，講述46億年以來地球、海洋和生命演化的故事。
觀看地址：https://www.hymuseum.org.cn/uploadfiles/360data/yuanguhaiyang/?scene_id=33889088
龍的時代
通過龍的時代這一展覽，小朋友們可以學習到關于恐龍的各種知識。
滑動鼠標就可以感受來自史前生命的強大氣息，看到展廳內距今2.5億年至6600萬年間中生代的爬行動物，如魚龍、翼龍化石及霸王龍化石等，揭示海洋是生命的搖籃這一主題。
觀看地址：
https://www.hymuseum.org.cn/uploadfiles/360data/longdeshidai/?scene_id=30550401
海洋與天文
海洋與天文的展廳給孩子們展現了宇宙星空的奧秘，讓他們探索天空中的星辰大海。小朋友肯定會問為什么海洋博物館會設置天文展區，它們之間有什么關系呢？
其實海洋與天文的關系非常緊密，就連組成海洋的水都極有可能來自彗星！展廳通過陳列的各種天文望遠鏡、探測儀以及八大行星等展品，詳細講解了海洋與天文之間的密切關系。
觀看地址：https://www.hymuseum.org.cn/exb?state=about
故宮博物院在網上“搞事情”可說是頗有經驗，線上訪問量一度是線下博物院參觀人數三倍多！今年還特別在春節期間推出了紫禁城里過大年，以及360°全景故宮，還有線上欣賞文物精品的數字文物庫，借助互聯網的力量，讓大家共同感受文物世界的精彩。
賀歲迎祥——紫禁城里過大年
故宮博物院特別推出了“賀歲迎祥——紫禁城里過大年”的網上活動。
采用賀歲時間軸的方式，詳細講解了從臘月初一的開筆書福，到二月初三撤天燈、門神、對聯的中國傳統春節習俗以及展示故宮里有關年味的珍貴藏品。
觀看地址：
https://www.dpm.org.cn/subject_hesui/guide.html
全景故宮
此次線上展覽，國家故宮博物院還推出了全景故宮版塊。真正做到足不出戶就可瀏覽故宮的全景，并且還有詳細的文字說明和語音解說。小朋友還可選擇雪景模式，欣賞從太和殿到御花園的不同場景，在線“云賞雪”。
在畫面中那些熱門打卡地，如延禧宮、慈寧宮、乾清宮等進行“云游覽”，還能看到更為神秘且未對外開放的宮殿，這可比去實地，人擠人啥也看不清楚要好太多了。提示：電腦看的效果更好。
觀看地址：
http://mob.visualbusiness.cn/gugong_app_pc/index.html
360°全景虛擬漫游
故宮博物院擁有龐大的宮廷建筑群以及數量眾多的珍貴文物，每年也有許多精彩的展覽。
此次線上展覽，對重要宮殿建筑和精品展覽進行360度全景虛擬再現，為觀眾提供身臨其境的游覽體驗。
觀看地址：
https://www.dpm.org.cn/360overallview/index.html
一個以“雷鋒，一個汽車兵的故事”為主題的展覽在北京汽車博物館亮相，帶領小朋友與雷鋒叔叔進行一場穿越時空的對話。
也許雷鋒對于現在的孩子來說已經有些久遠，但爸爸媽媽一定不陌生，在看展的同時，不妨和孩子講講有關他的故事……
觀看地址：
http://wangzhan.cntv.cn/
中國婦女兒童博物館之家和萬事興——家教家風主題展。
家，不僅是一個人情感的牽掛，更是一個人安身立命、修復立德的起點。家和萬事興—家教家風主題展通過300多張圖片、80多件實物展品和一個個感人至深的故事，討論了家與家族、家與國家、家與社會的三組關系。
小朋友按照圖片上地面提示的箭頭就即可進入展覽，在每一個展品旁都會有【+】符號和語音提示，可邊聽邊看展，點擊【+】符號還可看到展品的清晰大圖，非常棒。
觀看地址：
https://www.boyuntu.com/demo/zgfnet/web/pc.html
2019年3月23日，中意兩國代表在羅馬交換了796件中國流失文物藝術品的返還證書。此次《歸來——意大利返還中國流失文物展》線上展示了安返故鄉的精美文物，回顧兩國共同促成文物回歸的12年歷程。
展品可以說是件件精美絕倫，時間跨越長達5000年之久，是一場十分難得的文物展。同樣采用3D效果、音頻+文字圖片注解，更是增設了分享、點贊、評論等功能。
觀看地址：
https://webapp.vizen.cn/backhome/index.html
《律動世界——化學元素周期表專題展》濃縮了化學元素及元素周期律相關的科技知識，用新奇好玩、易于操作和理解的方式向小朋友展示了人們認識和利用化學元素周期律改變生活的過程。
線上展帶有VR功能，效果更加逼真。普通操作時只能點擊下面場景圖片，一張張切換，孩子自己完成有點難度，需要家長陪同。不過中國科技館官網的虛擬現實頻道還有其他不同主題的線上展覽，感興趣可以看看。
觀看地址：
https://xnmy.cdstm.cn/vr/78808/
最后，除了以上小朋友觀看的線上展覽外，小編為大朋友們也推薦一個看展的好去處——由國家文物局推送的博物館線上展覽，這里有更多更精彩的展覽集合信息，可點擊下方鏈接，繼續消磨假期時光。
觀看地址：
http://virtual.vizen.cn/exhibition/index.html
*文章配圖均來自網絡，版權歸作者所有
章相關引用及參考：映維網
利用了多視圖三維重建來渲染影像。
（映維網 2018年04月10日）谷歌在2015年推出了Jump，簡化從拍攝到播放的VR視頻制作流程。高質量VR相機能夠令拍攝變得更加簡單，好消息是映維網了解到Jump Assembler則將令自動拼接變得更快，減低投入的成本。借助成熟的計算視覺算法和谷歌數據中心的計算力量，Jump Assembler可以在沉浸式3D 360度視頻中實現清晰逼真的圖像拼接結果。
1. 拼接
今天谷歌正式為Jump Assembler帶來了了一個新的選項，支持系統采用基于多視圖三維重建（multi-view stereo）的全新高質量拼接算法。這種算法能夠產生與谷歌標準算法一樣的無縫3D全景圖，但能夠通過復雜的圖層和重復的圖案來減輕場景中的偽影。它同時能夠生成有更清晰對象邊界的深度圖，而這對VFX非常有用。
下面我們先來看看谷歌標準算法的工作原理。它基于光流概念，亦即將一幅圖像中的像素與另一幅圖像中的像素進行匹配。在匹配時，你可以知道像素是如何從一幅圖像“移動”或“流動”至另一幅圖像。在匹配每一個像素后，你就可以通過局部地移動像素來插值中間視圖。這意味著你可以在拍攝裝置上的相機之間“填補空白”，這樣在拼接時就能實現一個無縫，連貫的360度全景圖。
左：左側相機的圖像；中：在相機之間插值的圖像；右：右側相機的圖像
2. 基于視圖插值的光流
谷歌最新的高質量拼接算法利用了多視圖三維重建來渲染影像。區別何在？即便拍攝裝置上的其他相機也有可能看到相同的對象，但標準光流算法一次僅使用一對圖像；而谷歌的新方法可以同時在多幅圖像中尋找匹配。
這種全新的多視圖三維重建算法計算每一個像素的深度（如像素到對象的距離，一個3D點），而且拍攝裝置上任何能看到這個3D點的相機都可以幫助建立深度，令拼接過程變得更加可靠。
左邊是標準質量拼接：請留意右邊桿棍周圍的偽影；右邊則是高質量拼接：高質量算法消除了偽影。
左邊是標準質量深度圖：請注意對象邊緣十分模糊；右邊則是高質量深度圖：邊緣有著更多的細節，而且更加銳利。
谷歌的新方法還有助于解決所有拼接算法都在面臨的關鍵挑戰：遮擋，亦即處理在一幅圖像中可見，但在另一幅圖像不可見的對象。多視圖三維重建拼接在處理遮擋方面的效果更好，因為如果一個對象隱藏在一幅圖像中，這種算法可以利用拍攝裝置上的附近任意相機圖像來確定該點的正確深度。這有助于減少拼接偽影，并生成具有清晰對象邊界的深度圖。
如果你是一名VR電影拍攝工作者，并且希望嘗試這種全新的算法，只需在 Jump Manager的拼接質量下拉欄中圖選擇“high quality（高質量）”即可。
原文鏈接：https://yivian.com/news/43740.html
直以來，使用純 CSS 實現波浪效果都是十分困難的。
因為實現波浪的曲線需要借助貝塞爾曲線。
而使用純 CSS 的方式，實現貝塞爾曲線，額，暫時是沒有很好的方法。
當然，借助其他力量（SVG、CANVAS），是可以很輕松的完成所謂的波浪效果的，先看看，非 CSS 方式實現的波浪效果。
借助 SVG ，是很容易畫出三次貝塞爾曲線的。
看看效果：
代碼如下：
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
<!-- Wave -->
<g id="wave">
<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
<animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
</path>
</g>
<circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
<circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
</svg>
畫出三次貝塞爾曲線的核心在于這一段。感興趣的可以自行去研究研究。
使用 canvas 實現波浪效果的原理與 SVG 一樣，都是利用路徑繪制出三次貝塞爾曲線并賦予動畫效果。
使用 canvas 的話，代碼如下：
$(function() {
let canvas = $("canvas");
let ctx = canvas[0].getContext('2d');
let radians = (Math.PI / 180) * 180;
let startTime = Date.now();
let time = 2000;
let clockwise = 1;
let cp1x, cp1y, cp2x, cp2y;
// 初始狀態
// ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
// 末尾狀態
// ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
requestAnimationFrame(function waveDraw() {
let t = Math.min(1.0, (Date.now() - startTime) / time);
if(clockwise) {
cp1x = 90 + (55 * t);
cp1y = 28 + (72 * t);
cp2x = 92 - (51 * t);
cp2y = 179 - (79 * t);
} else {
cp1x = 145 - (55 * t);
cp1y = 100 - (72 * t);
cp2x = 41 + (51 * t);
cp2y = 100 + (79 * t);
}
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.moveTo(0, 100);
// 繪制三次貝塞爾曲線
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
// 繪制圓弧
ctx.arc(100, 100, 100, 0, radians, 0);
ctx.fillStyle = "rgba(154, 205, 50, .8)";
ctx.fill();
ctx.save();
if( t == 1 ) {
startTime = Date.now();
clockwise = !clockwise;
}
requestAnimationFrame(waveDraw);
});
})
主要是利用了動態繪制 ctx.bezierCurveTo() 三次貝塞爾曲線實現波浪的運動效果，感興趣的可以自行研究。
好，接下來才是本文的重點！使用純 CSS 的方式，實現波浪的效果。
你 TM 在逗我？剛剛不是還說使用 CSS 無能為力嗎？
是，我們沒有辦法直接繪制出三次貝塞爾曲線，但是我們可以利用一些討巧的方法，模擬達到波浪運動時的效果，姑且把下面這種方法看作一種奇技淫巧。
原理十分簡單，我們都知道，一個正方形，給它添加 border-radius: 50%，將會得到一個圓形。
border-radius：用來設置邊框圓角，當使用一個半徑時確定一個圓形。
好的，如果 border-radius 沒到 50%，但是接近 50% ，我們會得到一個這樣的圖形：
注意邊角，整個圖形給人的感覺是有點圓，卻不是很圓。額，這不是廢話嗎
好的，那整這么個圖形又有什么用？還能變出波浪來不成？
沒錯！就是這么神奇。:) 我們讓上面這個圖形滾動起來(rotate) ，看看效果：
可能很多人看到這里還沒懂旋轉起來的意圖，仔細盯著一邊看，是會有類似波浪的起伏效果的。
而我們的目的，就是要借助這個動態變換的起伏動畫，模擬制造出類似波浪的效果。
當然，這里看到是全景實現圖，所以感覺并不明顯，OK，讓我們用一個個例子看看具體實現起來能達到什么樣的效果。
我們利用上面原理可以做到的一種波浪運動背景效果圖：
CodePen Demo -- Pure CSS Wave[1]
后面漂浮的波浪效果，其實就是利用了上面的 border-radius: 45% 的橢圓形，只是放大了很多倍，視野之外的圖形都 overflow: hidden，只留下了一條邊的視野，并且增加了一些相應的 transform 變換。
注意，這里背景是藍色靜止的，運動是白色的橢圓形。
代碼也很簡單，SCSS 代碼如下：
body {
position: relative;
align-items: center;
min-height: 100vh;
background-color: rgb(118, 218, 255);
overflow: hidden;
&:before, &:after {
content: "";
position: absolute;
left: 50%;
min-width: 300vw;
min-height: 300vw;
background-color: #fff;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:before {
bottom: 15vh;
border-radius: 45%;
animation-duration: 10s;
}
&:after {
bottom: 12vh;
opacity: .5;
border-radius: 47%;
animation-duration: 10s;
}
}
@keyframes rotate {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
}
為了方便寫 DEMO，用到的長度單位是 VW 與 VH，不太了解這兩個單位的可以戳這里：vh、vw、vmin、vmax 知多少[2]
可能有部分同學，還存在疑問，OK，那我們把上面的效果縮小 10 倍，將視野之外的動畫也補齊，那么其實生成波浪的原理是這樣的：
圖中的虛線框就是我們實際的視野范圍。
值得注意的是，要看到，這里我們生成波浪，并不是利用旋轉的橢圓本身，而是利用它去切割背景，產生波浪的效果。那為什么不直接使用旋轉的橢圓本身模擬波浪效果呢？因為中間高，兩邊低的效果不符合物理學原理，看上去十分別扭；
可以點進去看看下面這個例子：
CodePen Demo -- pure css wave[3]
好，既然掌握了這種方法，下面我們就使用純 CSS 實現上面最開始使用 SVG 或者 CANVAS 才能實現的波浪進度圖。
HTML 結構如下：
<div class="container">
<div class="wave"></div>
</div>
.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
&::before,
&::after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
&::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
效果圖：
CodePen Demo -- Pure Css Wave Loading[4]
雖然效果差了一點點，但是相較于要使用學習成本更高的 SVG 或者 CANVAS，這種純 CSS 方法無疑可使用的場景更多，學習成本更低！
還能實現類似這樣的充電效果：
單純的讓一個 border-radius 接近 50 的橢圓形旋轉，動畫效果可能不是那么好，我們可以適當的添加一些其他變換因素，讓動畫效果看上去更真實：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
