做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

Origami教程06-列表數(shù)據(jù)循環(huán)生成方法

2016-11-10    用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

來源:UI中國

Origami 的教程已經(jīng)出到第六期了,前5期都是基礎(chǔ),而第6期開始,會慢慢復雜,同時也會加大學習量,加油~共勉!

請打開教程文件同步進行學習。



學前思考

先忽略動效,提出幾個問題,大家可以嘗試以前面學習的經(jīng)驗來思考一下。

  1. List 不用圖片來代替,怎么實現(xiàn)?
  2. 所有List內(nèi)容都不一樣,怎么實現(xiàn)?
  3.   所有List 都能保持一個統(tǒng)一的操作,怎么實現(xiàn)?
  4. …… 

OK,如果僅前2個問題來說,用“笨”方法都是很簡單,到第3之后,就有點坑了,是要復制N個重復Patchs?簡直要瘋掉有木有~ 當然Origami 沒這么傻,是有專門的Patch 解決這樣的情況的,這就是今天學習的重點,Loop 系列的Patch,效果類似 Craft 的 Duplicete


Image title


教程文件理解

大家可以看到這次教程文件除了Origami文件,還有2個文件夾,有什么用暫且不說,教程詳細會告訴大家有什么用。

Origami文件里面,Notification文件夾是主要操作對象,其他可以不用太在意,會一步步講解。


Step 1:添加Loop patch

搜索Loop 并添加,然后連線到Notification 文件夾的Y軸,為啥是Y軸,因為是要重復循環(huán)往下面復制,然后修改Count數(shù)值為6,看下圖:

Image title

然后此時你會發(fā)現(xiàn)Notification 不見了,別擔心,只是被Top Bars 擋住而已,看一下Notification 的Y軸坐標就知道了。此時的Patch已經(jīng)表示復制了6個一樣的Notification,看下圖,你可以看到有6行數(shù)據(jù),左側(cè)的0~5代表的是復制后每個列表內(nèi)容的序號,右側(cè)分別代表了復制后的每個個體所處于的Y軸坐標,如下圖:

Image title

添加 X patch, 乘以80,也就是Notification 的高度,這里可以自己調(diào)整數(shù)值來熟悉這個屬性,此時看Y軸坐標,已經(jīng)都是乘以80之后的結(jié)果,所以此時你在預(yù)覽應(yīng)該能看到列表的出現(xiàn),如下圖:

Image title

此時還有一個問題,就是默認的坐標還是不對,應(yīng)該是位于Top Bars下才對,怎么辦?其實也很簡單,主要是思路要對。從前面的教程中,大家也知道元素界面在Origami中排版的方法,那在這種場景下原理也是一樣的,都是要讓Y軸坐標在Top Bars下,也就是Top Bars的高度值116。

思路清晰,怎么達到,也簡單,在 X patch后面再添加一個 + patch即可,看圖:

Image title


到這里,界面的第一階段結(jié)束,我們從1個現(xiàn)有的List樣式,復制了多個。希望大家不要囫圇吞棗,要理解和明白其中的原理,以此舉一反三,類似Loop中Count 的數(shù)值也是可以由外部輸入控制數(shù)量,等等等等。


Step 2:更替元素

好,目前看預(yù)覽,美中不足的就是每個內(nèi)容都是一樣的,從模擬真實體驗來說,簡直是災(zāi)難。這時候教程文件中的文件夾就得出場了,先更替頭像,直接把Profile Pictures文件夾拖到Origami 的界面中,如下圖:

Image title

此時你發(fā)現(xiàn)Origami 已經(jīng)自動把文件夾轉(zhuǎn)換成Loop Builder patch,里面有好幾張不同的頭像。然后,我可以比較遺憾地告訴你,這個操作Sketch中拖過去是沒用的,不過不知道以后會不會有。點擊 Images 可以看到每張圖片對應(yīng)的序號,一般不用管,理解即可,請看圖:

Image title

然后就是連線,找到Notification文件夾中的Profle Picture,連線到屬性中的Image ,完事,在預(yù)覽中立即看到變化了,簡單的操作,這里就不貼圖啦。


Step 3:依次更替元素

替換完頭像,依次還有小圖標Timestamp Glyph,標題Notification Text,時間Timestamp Text,3個內(nèi)容也是需要替換的,其中小圖標和頭像一樣,請看圖:

Image title

標題 & 時間是文案,需要改變Loop Builder patch的屬性,右鍵 > Type > Text,在這里按住”ALT+左鍵”拖動復制Loop Builder patch即可,最后如下圖:

Image title

里面的文案我提供給大家:

標題

  1. John Anthony Evans likes your comment: "Loops in Origami Studio are sweet!"
  2. Julius Tarng likes your post in Loop Enthusiasts: "Have you checked out loo...
  3. Kara Fong reacted to your post in Loop Enthusiasts: "Just made this using loop...
  4. Matej Hrescak loves your photo in Infinite Loops: "Did you know you can drag and...
  5. Myles Larson reacted to your post in Puss 'n' Loops: "Cross-posting from Lo...
  6. Shali Nguyen likes your comment "What's the deal with repeating things over and..."

時間

  1. 8 minutes ago
  2. 16 minutes ago
  3. 2 hours ago
  4. Yesterday at 7:12 PM
  5. Yesterday at 3:19 PM
  6. Yesterday at 11:46 AM

界面部分結(jié)束,下面開始制作相關(guān)的動效。首先大家要理解,Loop的目的在界面搭建而言不是純粹為了方便,更重要的是為了方便動效的統(tǒng)一處理,還有后期針對動效方面做不同狀態(tài)的處理,后面就是動效部分,請大家好好理解。

在制作之前,請先把Top Bars 和Notification 合成到一個文件夾,并命名為Screen 1,方便后面我們做效果。這里要注意一下在合成文件夾時前面的Loop自動加了一個patch,導致List的坐標錯亂了,刪掉即可。

Image title



Step 4:添加基礎(chǔ)動效

首先添加最基礎(chǔ)的效果,當點擊列表內(nèi)容,背景 & 標題發(fā)生顏色變化,表示信息已讀,都是簡單的動效添加,請大家自行設(shè)計,過程就不啰嗦啦,參考如下圖:

Image title



Step 5:Loop中的指定項交互

通過上面簡單的動效添加,大家在預(yù)覽中可以體驗到每一個Loop的內(nèi)容都是一樣的交互效果。那我想指定第2個內(nèi)容有不一樣的交互呢?這個時候怎么辦?


插個題外話,這個時候大家也許已經(jīng)在預(yù)覽中操作過了,點擊Restar按鈕就可以回到原始狀態(tài),如下圖:

Image title


OK,回到主題。在這里定義的交互為,當點擊第2個內(nèi)容時,頁面進行跳轉(zhuǎn),大家留意一下圖層列表中的Screen 2,這個就是我們要跳轉(zhuǎn)進來的頁面,此時X坐標為360,所以屏幕中是看不到的,可以改為0看看里面是啥,哈哈


不廢話,先搜索并添加Loop Select patch,并連線,看下圖:

Image title

修改,Index Loop的值為1,不是說好的第2個內(nèi)容嗎?為啥不是2?額,不是我懵逼,因為我們的序號都是從 0 開始的,這個大家要記住,不要搞錯了以為交互無效。


然后,接下來又是比較常規(guī)的動畫交互,Screen 2的X坐標從360 到0,然后為了增加動效的豐富性,把Screen 1的尺寸從1 到0.94,因為都是常規(guī)動效,相信大家從前面的教程里面應(yīng)該都比較熟悉,在這里就不一一強調(diào)過程了,基本上最終的連線Patchs如下圖:

Image title

上圖中有個Interaction 是跳轉(zhuǎn)頁面然后返回的,在Screen 2的文件夾里的Back,添加Tab交互,然后連線到Turn off 即可,都是很簡單的操作,也不啰嗦囖。


教程到此為止,大家在預(yù)覽檢查一下,沒問題的話,恭喜你,再次學到了新東西。

看看最后的全部Patchs:

Image title


學習總結(jié):

  1. 初步認識Loop、Loop Builder、Loop Select等幾個Patchs的用法,觀察彼此的關(guān)系,明白并了解如何在交互過程中使用;
  2. 加強對于加減乘除算法Patch的認知; 頁
  3. 面跳轉(zhuǎn)的簡單實現(xiàn)方法;
  4. 加強開關(guān)Switch patch的使用認知;
  5.   合并文件夾時要注意對現(xiàn)有patch 排布的影響;

強調(diào)聲明,教程僅僅是提供了學習和思維,是本人學習官方案例后的總結(jié)。希望大家在實現(xiàn)自己實際的案例過程中,從學習過程中能攝取到新知識,從而舉一反三能有更加好的解決方案,共勉~!


藍藍設(shè)計91whvog3.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://91whvog3.cn

存檔