整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
近被天貓年貨節(jié)H5刷屏了。坊間傳聞它和騰訊16年出品的火影H5很像，對比如上。
然而其實一個是視頻，一個是互動頁面。
剛好這陣子iH5要籌備年終報告，小伙伴排出60多頁AI靜態(tài)源素材，得做成一版H5。如果為素材一頁頁分組、導出成分層圖、導入iH5、加動效，做起來得哭死……
還好天貓這個刷屏H5出現(xiàn)了！好看、熱門、而且實用（自動翻書的設計，能承載很多信息容量），所以幾乎在天貓刷屏的第二天我們就趁熱打鐵做出以下致敬版。
（報告H5鏈接：http://465048564698.ih5.cn/idea/iMYBC_H）
想學嗎？接下來進入劇透時間！
使用工具：www.iH5.cn（一個云端制作平臺，功能強大）
（一）、弄幾張圖，透明的！
1、用于展示的鏤空圖（PNG）
圖片要鏤空！其實就是去背景，比如上面是我們報告的原圖，背景的留白都是透明的，因此才能在H5中看到前后播放的其他圖片，制造出立體空間。
2、用于銜接的鏤空圖（PNG）
銜接的圖片，需要在中心處完全鏤空，才不會遮擋住前后的展示圖層，比如從上面天貓的案例后臺可以看到，采取的是中心全透明的形式。
注意：導出為Web所用格式時，需要設為640×1040像素（剛好是手機上微信顯示頁面的標準尺寸），并建議采用PNG-8格式（更節(jié)省體積）、雜邊“無”。
（二）來個走馬燈特效！
走馬燈背后涉及兩種旋轉(zhuǎn)，一種是需要控制圖片平面上沿頁面邊緣進行y軸旋轉(zhuǎn)，一種是立體上給人帶來沿頁面邊緣進行y軸旋轉(zhuǎn)的感覺，涉及視距變換。
需注意在蘋果設備上，圖片如果有重疊會導致閃屏，所以需要對圖層進行旋轉(zhuǎn)角度的區(qū)分。
（1）新建時間軸
注：為了方便編輯，報告H5每個軌跡的間隔設為1秒，但播放起來有點快，最后播放速度設為0.7倍。
（2）新建容器——新建容器——新建透明按鈕——新建軌跡
簡單地說，連續(xù)兩次點擊“容器”組件那個按鈕，建立2層容器，用于旋轉(zhuǎn)角度的區(qū)分。
然后新建一個透明按鈕1，用于確保圖片沿y軸旋轉(zhuǎn)時，y軸以透明按鈕1的中點為準。因此要控制透明按鈕1的“x坐標”（比如630）、“寬”（比如20），剛好能讓它的中點處于H5的右邊緣。
透明按鈕1視距設為300，并為它新建軌跡（開始顯示YES，結(jié)束顯示NO），用于確保圖片具備3D變換效果。
注：視距指以父對象的中心為旋轉(zhuǎn)中心時，子對象3D翻轉(zhuǎn)時的變形距離，必須在3D旋轉(zhuǎn)的父對象上設置。視距設置越大，3D透視效果越小。
（3）新建透明按鈕——新建軌跡——拖入圖片
再新建一個透明按鈕2，也是用于確保圖片沿y軸旋轉(zhuǎn)、立體變換時，y軸以透明按鈕2的中點為準。由于透明按鈕1是透明按鈕2的父對象，因此要控制透明按鈕2的“x坐標”為前者的負值（比如-630）、“寬”與前者一致（比如20），讓它的中點與透明按鈕1重合。
為透明按鈕2新建軌跡，拖一張圖片到透明按鈕下面。這樣一來，讓透明按鈕2沿y軸旋轉(zhuǎn)，其實就是讓圖片沿右側(cè)邊緣旋轉(zhuǎn)了。
注：沿y軸旋轉(zhuǎn)，指以對象的垂直中心軸為旋轉(zhuǎn)軸，進行3D透視旋轉(zhuǎn)。上面的軌跡建議采用“貝塞爾曲線”選項，變換時會遵循快-慢-快的原則。
（4）為軌跡設置關鍵幀
分別選中透明按鈕1、透明按鈕2軌跡，為它們各添加以上3個參數(shù)的關鍵幀，并保持兩個按鈕3個關鍵幀的位置一致。
如果同組內(nèi)關鍵幀的間隔設為1秒，后面添加新的關鍵幀比較節(jié)省時間（只需選中關鍵幀，在幀位置的輸入框內(nèi)填寫1、2、3類似的值就行）。
組與組之間間隔可設為0.5秒（即展示組和銜接組的時間間隔）。
（5）多組圖片的變化
以此類推，比如要做6個展示頁面，就需要11個組（包括5個銜接的圖片組）。
這時需要回到開頭，復制第2個容器，粘貼在第1個容器上，就會有11個包含各種內(nèi)容的二層容器。然后逐一為各層容器設置關鍵幀，替換圖片就行。
（6）避免各組之間的層疊
最后，把所有展示組的頂層容器（相當于二層容器），“y軸旋轉(zhuǎn)”這個參數(shù)設為1。
注：這樣一來，所有銜接組的“y軸旋轉(zhuǎn)”仍為0，就不會導致間隔的兩組同時旋轉(zhuǎn)時，兩組之間重疊后產(chǎn)生閃屏。（這個問題據(jù)說只在蘋果設備會出現(xiàn)，一開始我也沒注意，后來多虧交互工程師Young跑來提醒。）
（三）滑動要智能！
左右滑動的速度需要實時記錄，并反映為播放速度，交互上的體驗才會更真實。
此外，為避免一次性進行播放的圖片太多，導致卡頓，最好進行分頁播放，而不是一個頁面播到底。
（1）新建變量
需要2個變量，一個輸出向左滑動的速度（v1），一個輸出向右滑動的速度（v2）。
（2）新建透明按鈕——添加事件
透明按鈕的x、y坐標為0，寬、高和設備一致，確保蓋住整個屏幕，然后需要的事件如下：
上面的播放速度，$v1*0.0001+0.5，0.5表示的是最低的播放速度，可以根據(jù)實際滑動情況靈活設置；*0.0001，是因為比較快的速度可以高達4位數(shù)，這樣賦值可以確保它不會一下子超過原定的播放速度（0.7）。
你，做出來了嗎？
擊“了解更多”獲取工具
Telerik UI for ASP.NET Core是用于跨平臺響應式Web和云開發(fā)的最完整的UI工具集，擁有超過60個由Kendo UI支持的ASP.NET核心組件。它的響應式和自適應的HTML5網(wǎng)格，提供從過濾、排序數(shù)據(jù)到分頁和分層數(shù)據(jù)分組等100多項高級功能。
它保存有關Http請求的當前信息，包含諸如授權、身份驗證、請求、響應、會話、項目、用戶、formOptions等信息。每個HTTP請求都會使用當前信息創(chuàng)建HttpContext的新對象。
控制器公開了ControllerBase.HttpContext屬性，因此我們可以直接訪問當前Http請求的HttpContext屬性，最佳的方法是始終使用默認的HttpContextAccessor通過DI訪問HttpContext。
要在服務中使用HttpContext，我們需要執(zhí)行以下兩個步驟：
Step 1：使用.NET Core內(nèi)置依賴項注入容器注冊依賴項，如下所示，在ConfigureServices方法的Startup.cs類中：
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
//IHttpContextAccessor register
services.AddHttpContextAccessor();
services.AddTransient<IUserService, UserService>();
}Step 2：接下來，將IHttpContextAccessor注入到創(chuàng)建的服務構造函數(shù)中，并如下所示訪問HttpContext的屬性：
namespace Get_HttpContext_ASP.NET_Core
{
using Microsoft.AspNetCore.Http;
public class UserService : IUserService
{
private readonly IHttpContextAccessor _httpContextAccessor;
public UserService(IHttpContextAccessor httpContextAccessor)
{
_httpContextAccessor=httpContextAccessor;
}
public string GetLoginUserName()
{
return _httpContextAccessor.HttpContext.User.Identity.Name;
}
}
}現(xiàn)在，您可以訪問服務中HttpContext的所有屬性，如以上兩個步驟所示。
注意：在.NET中，它被稱為HttpContext.Current，但是在ASP.NET Core中已棄用。
兩天微信被天貓年貨節(jié)H5刷屏了，和稍遠的網(wǎng)易娛樂畫報H5一樣，也是因為交互形式出彩。
鏤空書的設計、滑動控制翻頁的巧思都可圈可點。一查，制作方居然是以交互創(chuàng)意聞名的VML上海？
是去年做出淘寶造物節(jié)全景H5的VML！
是為天貓策劃出一鏡到底H5的VML！
是一出手就引發(fā)行業(yè)潮流的VML！
然而，有人開始指責他們抄襲——
起因是天貓H5和16年初TGideas做的火影H5，視覺上很像：
（1）紙雕設計（傳聞源自日本）；
（2）走馬燈式的3D輪播。
對比如下：
“大贊的火影光影！”
“VML又搞天貓！”
所以，這次干脆為大家請來天貓年貨節(jié)H5的創(chuàng)意總監(jiān)鳥崔，聊聊臺前幕后的故事，以及這次爭議的始末！
當然，鑒于前兩天我們快速學習了VML這次的神創(chuàng)意，做出一版走馬燈式的年終報告H5，后面還有非常詳細的制作教程！
一、天貓年貨節(jié)H5專訪
受訪者：鳥崔（天貓年貨節(jié)H5創(chuàng)意總監(jiān)）
訪談時間：17年1月12日
Q：天貓年貨節(jié)這個H5，反響怎么樣？
鳥崔：年貨節(jié)這個呈現(xiàn)形式鏤空書有很強的識別性，做出來后周圍反響還不錯。PV的話，活動還沒有結(jié)束，我已經(jīng)進入下一個項目了，這幾天還真沒有關注。我們的客戶團隊更清楚。
Q：H5花了多長時間完成？
鳥崔：這個項目brief進的時候時間很緊，不到一個月就需要上線。
在之前應該沒有人用純H5的適量圖形可交互的方式去做過，所以提的時候客戶滿擔憂的，中間我們也消耗掉不少時間做出一部分demo放進程序內(nèi)演示給客戶看，這導致了我們最后的動畫時間不足，也是我們故事講得不順的一個大問題。
但是我已經(jīng)不能要求制作部門做到更多，那時候程序員連續(xù)通宵只睡了2個小時，所以非常無奈。作品出去了，大家看的時候是不會考慮實際的制作時間和難度，這也提醒我，時間估量的時候還是要留夠足夠的余量。
Q：前面消耗時間的主要原因是？
鳥崔：素材。
最開始我們的場景更多，畫了非常多的插圖，也安排了很多的動畫在里面。最后提交的時候限制K數(shù)和故事長度，拿掉了很多，動畫內(nèi)容來不及做，年貨節(jié)就要開始了，這個時間是死的誰也不能更改，于是……就上線了，哈哈。
Q：你們這次工作是多少人，怎么分工的？
鳥崔：制作團隊這里程序比較新，需要研發(fā)，所以雖然投入兩個人，但是事實上大量的開發(fā)只有核心的一位可以搞定。這個最開始考慮過3D建模做視頻，后來Shrek說他可以嘗試程序?qū)崿F(xiàn)，結(jié)果真就弄出來了。
創(chuàng)意組這里2-4位art和1位copy在進行，最趕的時候有多投人力。但是和程序一樣的問題，art投入太多的時候畫面風格開始出現(xiàn)比較大的偏差，所以也是圍繞核心其他盡量接近的方式進行。
Q：網(wǎng)上有人說天貓年貨節(jié)抄襲騰訊火影H5，你怎么看？
鳥崔：一些廣告門戶上發(fā)布以后好多人說抄襲，我去看了下（那個作品），形式確實都是一樣，而且那個項目是用實物拍攝的方式制作的，也相當好。
但是很多留言都在說抄襲的時候，我覺得有必要澄清一下。畢竟一個形式就是形式，這個做法先有國外一個化妝品類的video做過，也有日本設計師做過實物。我們把這項目實現(xiàn)成一個H5虛擬3D的，卻被認為是抄襲同行的作品，這個結(jié)論非常的武斷。
雖然非常遺憾，但是我覺得有質(zhì)疑是好事，提醒我們下次走得更遠做得更好，也同時去關注同行里更多的好作品，才不會出現(xiàn)這樣的事情。
Q：其實在H5廣告的創(chuàng)作上，交互、內(nèi)容上形式的相似是很常見的，你們行內(nèi)有沒有默認的真正談得上抄襲的界限？
鳥崔：應該沒有一個默認的，就像你看到的樣子，大家會就一個相似的形式說抄襲。即使故事內(nèi)容和idea本身，也有容易撞車的時候。但是真撞了就一定是抄襲嗎，這個只能說創(chuàng)意走得不夠遠，需要繼續(xù)努力，比如我。哈哈。
大家很容易就一個形式而去質(zhì)疑一件作品抄襲，這很吊詭。
比如網(wǎng)易那個無限放大也被認為抄襲，但是那個形式其實很早前有一個雞頭無限放大到宇宙的圖也是一樣的形式，Nike和本田當年也有網(wǎng)站做成這樣的形式。被說成抄襲我估計創(chuàng)作者是有點委屈的，但是這也提醒我們，不要太倚重形式，或者說形式大過內(nèi)容。
Q：和很多講究內(nèi)容創(chuàng)新的互動團隊不一樣，VML在交互上做了很多創(chuàng)新，為行業(yè)立起很多標桿。你們是以交互創(chuàng)新為創(chuàng)作方向？
鳥崔：制作團隊確實實力非常棒。
我們在想案子的時候，也是盡量讓技術的探索也往前走。有時候發(fā)散idea的時候，我們會和技術團隊時不時一起碰撞一下，看有沒有更好的方式之類。現(xiàn)在信息這么龐雜的狀況下，總是需要抓住一切機會讓案子能夠讓人眼前一亮。
Q：能透露你們下一步的創(chuàng)作目標和計劃嗎？
鳥崔：短期我們有一個不錯的案子在進行，也是屬于那種讓大家一腔熱血投入的案子。就稍長遠點，以后可能會結(jié)合更多的視頻內(nèi)容和技術手段。
這個應該很容易想到，網(wǎng)站走過這樣的一個周期，移動端也一樣，技術平臺和流量在加大，大家的碎片化時間需要更高效的溝通，形式就會被藏在下一層，故事或者說內(nèi)容會更高效的到達用戶。這個應該不會很久吧，大家現(xiàn)在移動端隨便訂個1、2G的流量都很常見。
其他的，我覺得平臺和講故事的地方可能會有變化，但是用戶用時間消費好內(nèi)容的需求不會變。
二、好形式，參考參考？
騰訊火影那個H5，是TGideas歷時三天實拍完成，光影實效非常精致，但因為是視頻，沒有什么交互上的設計（這也是TGideas出品的純動畫H5曾被詬病的原因）。
VML上海這個H5，自主設計了很多交互細節(jié)，包括左右滑動對輪播往前往后的控制、滑動幅度對輪播速度的影響等，這些也是H5刷屏的重要原因。
兩個團隊實際上創(chuàng)意的著重點不同。不過對于我們來說，VML又開創(chuàng)了一種新的互動形式啊！
還好天貓這個刷屏H5出現(xiàn)了！好看、熱門、而且實用（自動翻書的設計，能承載很多信息容量），所以幾乎在天貓刷屏的第二天我們就趁熱打鐵做出以下致敬版。
“曬曬iH5年終報告”
接下來進入劇透時間！
三、《原來H5這行水這么深！》制作攻略
（一）、弄幾張圖，透明的！
1、用于展示的鏤空圖（PNG）
圖片要鏤空！其實就是去背景，比如上面是我們報告的原圖，背景的留白都是透明的，因此才能在H5中看到前后播放的其他圖片，制造出立體空間。
2、用于銜接的鏤空圖（PNG）
銜接的圖片，需要在中心處完全鏤空，才不會遮擋住前后的展示圖層，比如從上面天貓的案例后臺可以看到，采取的是中心全透明的形式。
注意：導出為Web所用格式時，需要設為640×1040像素（剛好是手機上微信顯示頁面的標準尺寸），并建議采用PNG-8格式（更節(jié)省體積）、雜邊“無”。
（二）來個走馬燈特效！
走馬燈背后涉及兩種旋轉(zhuǎn)，一種是需要控制圖片平面上沿頁面邊緣進行y軸旋轉(zhuǎn)，一種是立體上給人帶來沿頁面邊緣進行y軸旋轉(zhuǎn)的感覺，涉及視距變換。
需注意在蘋果設備上，圖片如果有重疊會導致閃屏，所以需要對圖層進行旋轉(zhuǎn)角度的區(qū)分。
1、新建時間軸
注：為了方便編輯，報告H5每個軌跡的間隔設為1秒，但播放起來有點快，最后播放速度設為0.7倍。
2、新建容器——新建容器——新建透明按鈕——新建軌跡
簡單地說，連續(xù)兩次點擊“容器”組件那個按鈕，建立2層容器，用于旋轉(zhuǎn)角度的區(qū)分。
然后新建一個透明按鈕1，用于確保圖片沿y軸旋轉(zhuǎn)時，y軸以透明按鈕1的中點為準。因此要控制透明按鈕1的“x坐標”（比如630）、“寬”（比如20），剛好能讓它的中點處于H5的右邊緣。
透明按鈕1視距設為300，并為它新建軌跡，用于確保圖片具備3D變換效果。
注意：視距指以父對象的中心為旋轉(zhuǎn)中心時，子對象3D翻轉(zhuǎn)時的變形距離，必須在3D旋轉(zhuǎn)的父對象上設置。視距設置越大，3D透視效果越小。
3、新建透明按鈕——新建軌跡——拖入圖片
再新建一個透明按鈕2，也是用于確保圖片沿y軸旋轉(zhuǎn)、立體變換時，y軸以透明按鈕2的中點為準。由于透明按鈕1是透明按鈕2的父對象，因此要控制透明按鈕2的“x坐標”為前者的負值（比如-630）、“寬”與前者一致（比如20），讓它的中點與透明按鈕1重合。
為透明按鈕2新建軌跡，拖一張圖片到透明按鈕下面。這樣一來，讓透明按鈕2沿y軸旋轉(zhuǎn)，其實就是讓圖片沿右側(cè)邊緣旋轉(zhuǎn)了。
注意：沿y軸旋轉(zhuǎn)，指以對象的垂直中心軸為旋轉(zhuǎn)軸，進行3D透視旋轉(zhuǎn)。上面的軌跡建議采用“貝塞爾曲線”選項，變換時會遵循快-慢-快的原則。
4、為軌跡設置關鍵幀
分別選中透明按鈕1、透明按鈕2軌跡，為它們各添加以上3個參數(shù)的關鍵幀，并保持兩個按鈕3個關鍵幀的位置一致。
如果同組內(nèi)關鍵幀的間隔設為1秒，后面添加新的關鍵幀比較節(jié)省時間（只需選中關鍵幀，在幀位置的輸入框內(nèi)填寫1、2、3類似的值就行）。
組與組之間間隔可設為0.5秒（即展示組和銜接組的時間間隔）。
5、多組圖片的變化
以此類推，比如要做6個展示頁面，就需要11個組（包括5個銜接的圖片組）。
這時需要回到開頭，復制第2個容器，粘貼在第1個容器上，就會有11個包含各種內(nèi)容的二層容器。然后逐一為各層容器設置關鍵幀，替換圖片就行。
6、避免各組之間的層疊
最后，把所有展示組的頂層容器（相當于二層容器），“y軸旋轉(zhuǎn)”這個參數(shù)設為1。
注意：這樣一來，所有銜接組的“y軸旋轉(zhuǎn)”仍為0，就不會導致間隔的兩組同時旋轉(zhuǎn)時，兩組之間重疊后產(chǎn)生閃屏。
（三）滑動要智能！
左右滑動的速度需要實時記錄，并反映為播放速度，交互上的體驗才會更真實。
此外，為避免一次性進行播放的圖片太多，導致卡頓，最好進行分頁播放，而不是一個頁面播到底。
1、新建變量
需要2個變量，一個輸出向左滑動的速度（v1），一個輸出向右滑動的速度（v2）。
2、新建透明按鈕——添加事件
透明按鈕的x、y坐標為0，寬、高和設備一致，確保蓋住整個屏幕，然后需要的事件如下：
上面的播放速度，$v1*0.0001+0.5，0.5表示的是最低的播放速度，可以根據(jù)實際滑動情況靈活設置。
“*0.0001”，是因為比較快的速度可以高達4位數(shù)，這樣賦值可以確保它不會一下子超過原定的播放速度（0.7）。
最后，請大家自動忽略本文的標題黨。其實昨天我還在TGideas粉絲群做了個小調(diào)查，發(fā)現(xiàn)大家和我一樣也認為“抄襲”二字有點過了，而且VML主創(chuàng)事先并沒有注意到那個作品。
-END-
無非創(chuàng)意，H5研究創(chuàng)作團隊與案例資訊分享平臺
更多精彩案例敬請關注「無非創(chuàng)意」公眾號（ID：wufaecy）
文章來源：數(shù)英網(wǎng)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
