如何畫3D旋轉效果或者衛星圍繞旋轉效果,當然這個也是工作中的一個任務,我在網上翻了一下,並沒有找到類似的東西,所以寫下來還是費了一番功夫,因此我把它拿出來記錄一下,當然替換了一部分內容。好了,話不多說,進入正題。
我們都知道,瀏覽器是一個平面的視覺效果,如何在一個平面上看出立體的3D效果呢,其實就是一個視覺差的問題。那我們就從一個平面視覺效果一步一步畫出立體的3D效果來。
衛星的軌跡一般都是圓的或者橢圓的,我們就先以一個圓形的軌跡為例。
非常簡單,就是畫一個圓形的軌跡,然后利用弧度公式計算出每個衛星在軌跡上的位置。比如:
三個衛星,弧度就是 var radian =2 * Math.PI /360 *60,更多的衛星就同理計算弧度
它們三個組成的三角形邊長就是:var langWidth = Math.sin(radian) * rWidth
利用勾股定理是不是就可以計算出每個衛星的位置了。 現在我們把樣式加上,就可以看到旋轉的衛星了。 如代碼中所示,我們在13s內,讓整個div自轉一周(360度),為了兼容更多的瀏覽器,所以寫了一大坨,如果不明白可以看一下 CSS3 之動畫及兼容性調優
涉及的知識點: 動畫的過程拆分,三角形邊長位置計算
.r1{ animation:rotate 13s linear infinite; -webkit-animation:rotate 13s linear infinite; -moz-animation:rotate 13s linear infinite; -o-animation:rotate 13s linear infinite; } @keyframes rotate{ 0%{ transform:rotate(0deg)skew(0deg)scale(1); -ms-transform:rotate(0deg)skew(0deg)scale(1); -moz-transform:rotate(0deg)skew(0deg)scale(1); -webkit-transform:rotate(0deg)skew(0deg)scale(1); -o-transform:rotate(0deg)skew(0deg)scale(1); } 100%{ transform:rotate(360deg)skew(0deg)scale(1); -ms-transform:rotate(360deg)skew(0deg)scale(1); -moz-transform:rotate(360deg)skew(0deg)scale(1); -webkit-transform:rotate(360deg)skew(0deg)scale(1); -o-transform:rotate(360deg)skew(0deg)scale(1); } }
現在我們要把這個平面的圓形以一條直徑為轉軸,旋轉76度,是不是就了一點點的立體感覺了。其實它還是一個平面,為什么能看到立體的感覺呢? 因為我們都知道一個遠小近大的道理:當衛星轉向內圈的時候,我們讓球體逐漸變大;當衛星轉向外圈的時候,我們讓球體逐漸變小,這樣就會產生一個遠近景深的效果,也就產生了立體的感覺。
涉及的知識點:3D 元素距視圖的距離(perspective),圖形的角度處理立體的旋轉效果有了,但是我們的眼睛其實無法分辨哪個是內圈,哪個是外圈,我們需要在中間放一個參照物來告訴我們的眼睛,哪個在前,哪個在后。這樣,一個完整的衛星圍繞旋轉效果就出來了。
涉及的知識點:讓轉換的子元素保留3D轉換(transform-style: preserve-3d;)什么意思呢,就是讓兩個元素可以保持相對的立體空間效果。比如,土星圖片和衛星軌道平面是垂直的,需要用這個屬性來保持這個的空間效果。<body> <div class="star-animate"> <div class="out_circle"> <div class="nav_circle r1"> <img class="center-img1" src={require("Images/animateList/1/star.png")}/> <div class="img_top img"> <img src={require("Images/animateList/1/star1.png")}/> </div> <div class="img_bottom img"> <img src={require("Images/animateList/1/star2.png")}/> </div> <div class="img_bottom2 img"> <img src={require("Images/animateList/1/star3.png")}/> </div> </div> </div> </div> </body>
本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。