国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5頁面內使用JSON動畫

anonymoussf / 2424人閱讀

摘要:問題背景有一天我們的設計師找到我說,要把頁面中我自己用程序寫的動畫,換成他們給的動畫,原因是有的動畫很復雜,自己寫起來達不到他們的預期效果寫到這里我突然想到一個問題,這么復雜的動畫為什么不使用。。。。

問題背景

有一天我們的UI設計師找到我說,要把頁面中我自己用程序寫的動畫,換成他們給的json動畫,原因是有的動畫很復雜,自己寫起來達不到他們的預期效果(寫到這里我突然想到一個問題,這么復雜的動畫為什么不使用gif。。。。坐我對面的安卓開發小哥答因為gif播放的時候可能質量不高不流暢,好吧我信了)
我:????客戶端可以加json動畫,H5頁面沒聽說過可以讀json動畫哎
設計師一臉肯定,說可以的,有web版本。
寫到這里,我真的要好好夸一波我們的設計師妹子了,幾乎很多蠻好的解決方法都是在他們的“逼迫”之下找到的(哦,她們還會寫H5頁面。。。要我有何用系列
那問題來了,怎么在H5頁面里面使用json動畫呢

如何在H5頁面內使用json動畫

這時候設計師甩了一個鏈接給我,看這里lottie-web ;我點進去了解了一下,是Airbnb開源的一個動畫庫,該庫可以完成很多酷炫動畫,使用起來也很簡單,設計師只需要通過AE做成的動畫導出JSON文件,然后前端使用Lottie直接加載JSON文件生成動畫,既不需要設計師切N多gif,也不需要前端去進行復雜繪制了,一舉兩得,并且,Lottie全平臺可用,ios、Android、web、React Native都可以,且占用內存少,加載流暢。(這么個神仙東西我為什么現在才發現。。

說了這么多,那怎么在H5頁面里面使用呢?
很簡單了,設計師生成的文件夾發給你(設計師那邊只用在AE中加個lottie插件,導出就行了),打開之后應該是這樣子的,打開demo.html就知道是怎么用的了(所以我還在這里寫什么技術文章

玩笑歸玩笑,其實在使用中還是碰到了很多坑的,這里記錄幾個使用時注意的地方

1.demo.html里面有很多內聯的東西,使用時堆積在頁面內不好看

仔細看一下,其實demo.html把js和json都放進去了,這時候我們可以把js和json多帶帶分出來,js的話可以使用cdn上提供的地址

動畫需要的json數據放在data.json文件里面,但是給出的json文件里面的數據格式是這樣的(太長了 截不完

那如果你要在多帶帶的一個html里面使用script的方式引入json文件的話,會報錯,所以需要修改json文件,在前面加上變量,賦值。如下圖:

這樣你可以通過像引入js文件的方式一樣的引入該json

這樣可用的demo.html就縮減成了下面這樣




    




當然,你如果使用的是js模塊化編程的話,可以不用更改data.json,直接import進來就行了,如下:

import animationData from "./data.json"
2.使動畫適配移動端

之所以覺得這是個坑是因為,設計師給我的動畫是全屏且非透明底的,然后她要求我將這個動畫以寬度100% 高度垂直居中截取的方式定位,我在瀏覽器里面試了下,360*640屏幕下,寬度100%,表現形式是這樣的(看上去是高度100% 寬度適配居中 兩邊漏出了黑色的背景色,見下圖藍色框起來的部分)

換成iPhone X的屏幕下,相反,表現出來是寬度100% 高度適配居中,上下漏出黑色背景色,見下圖藍色框起來的部分(究其原因是因為iphonex屏幕較長

這個布局好熟悉哇,跟img的object-fit屬性取值為contain的時候表現一致(object-fit也是寶藏,有興趣的同學可以去研究一下,非常好用)

我這里解決設計師的需求主要增加下面的代碼:

js部分:
setTimeout(function() {
    document.getElementsByTagName("svg")[0].style.height = "auto";
}, 50);
css部分:(給lottie增加flex布局)
#lottie {
    width:100%;
    height:100%;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

最終效果:

總結

以上圖片截圖都是靜態的,實際是有一個動態效果的,我不知道怎么添加動圖就沒弄了,感興趣的可以試一下。
適用范圍:
我感覺一般全屏的或者局部很復雜的動畫可以使用這個方法一試,比gif要流暢,兼容性也做得不錯,一些安卓產品比較酷炫的開屏就是使用的這個方法,H5頁面的話,簡單動畫一般自己程序實現就可以,還可以避免踩坑。

參考鏈接:
lottie官網
lottie-web github地址

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/117300.html

相關文章

  • H5頁面使用JSON動畫

    摘要:問題背景有一天我們的設計師找到我說,要把頁面中我自己用程序寫的動畫,換成他們給的動畫,原因是有的動畫很復雜,自己寫起來達不到他們的預期效果寫到這里我突然想到一個問題,這么復雜的動畫為什么不使用。。。。 問題背景 有一天我們的UI設計師找到我說,要把頁面中我自己用程序寫的動畫,換成他們給的json動畫,原因是有的動畫很復雜,自己寫起來達不到他們的預期效果(寫到這里我突然想到一個問題,這么...

    TwIStOy 評論0 收藏0
  • H5頁面使用JSON動畫

    摘要:問題背景有一天我們的設計師找到我說,要把頁面中我自己用程序寫的動畫,換成他們給的動畫,原因是有的動畫很復雜,自己寫起來達不到他們的預期效果寫到這里我突然想到一個問題,這么復雜的動畫為什么不使用。。。。 問題背景 有一天我們的UI設計師找到我說,要把頁面中我自己用程序寫的動畫,換成他們給的json動畫,原因是有的動畫很復雜,自己寫起來達不到他們的預期效果(寫到這里我突然想到一個問題,這么...

    netmou 評論0 收藏0
  • Hybrid APP架構設計思路

    摘要:本文將從以下幾個方面闡述架構設計的一些經驗和思考。原文及討論請到通訊作為一種跨語言開發模式,通訊層是架構首先應該考慮和設計的,往后所有的邏輯都是基于通訊層展開。 關于Hybrid模式開發app的好處,網絡上已有很多文章闡述了,這里不展開。 本文將從以下幾個方面闡述Hybrid app架構設計的一些經驗和思考。 原文及討論請到 github issue 通訊 作為一種跨語言開發模式,通訊...

    hiyayiji 評論0 收藏0
  • HTML5 活動宣傳頁「My Flyme 獨家記憶」開發實踐總結

    摘要:年前放假的最后一天,我們上線了獨家記憶活動宣傳頁。微信分享主要代碼參考獨家記憶當時光凝固,當回憶定格。這是屬于我和的獨家記憶。 年前放假的最后一天,我們上線了「My Flyme 獨家記憶」 H5 活動宣傳頁。 因種種原因,直到放假前幾天,才突然要求我們參與并開始項目的前端部分。此時大概的情況是:所有數據已計算完畢;后端接口已完成待聯調;交互視覺只出了不到四分之一(一共二十多個頁面);我...

    Anonymous1 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<