iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Software Development

iOS Swift x Layout x Animation x Transition 系列

鐵人鍊成 共 30 篇文章 | 11 人訂閱 訂閱系列文 團隊好想工作室第一屆鐵人賽
DAY 1

BankBalance ( Label Animation ) - 模仿「得到」儲值動畫

模仿「得到」App 的儲值動畫 這是「邏輯思維」團隊的「得到」App,把錢存進去會在「我的帳戶」裡面看到一個餘額的數字動畫。 而之前在「餘額寶」的App中也有...

2017-12-20 ‧ 由 Don 分享
DAY 2

StackViewAnimation

手機豎直、橫平時的動畫效果。 效果: 當收起其中一張圖片的時候,其他圖片平均的去補滿空餘的位置。 當一張圖片要回來的時候,回到原本的位置,並讓在畫面上的圖...

2017-12-21 ‧ 由 Don 分享
DAY 3

DrawingAnimation + CustomLoadingView

通過 UIBezier 在  Layer 上畫一個 Chat 的圖案 製作一個 Loading 畫面 DrawingAnimation + Custom...

2017-12-22 ‧ 由 Don 分享
DAY 4

Expandable Buttons - 折疊式按鈕

在 Web 應用中,我們常常會看到畫面的右下角會提供一個按鈕,點下去後會展開更多的按鈕,用來提供一些功能(例如分享到 Facebook/Line/Weibo)...

2017-12-23 ‧ 由 Don 分享
DAY 5

ImageSlider - 圖片轉換動畫

通過一些簡單的動畫,可以讓圖片在切換的過程變得有趣許多。 ImageSlider 在 ViewController 的正中央放置一個 UIImageView...

2017-12-24 ‧ 由 Don 分享
DAY 6

Parallax Scrolling - 橫向捲動視差

在 Web 應用中,尤其是「一頁式」網站裡我們常常會看到捲動視差的例子。 之前用 UICollectionView 實作過豎直的捲動視差,這次換 UIScro...

2017-12-25 ‧ 由 Don 分享
DAY 7

Scratch Card - 刮刮樂的做法

以前住在上海,冬天冷的時候常常到 0~2度之間,還記得小時候會在窗戶上吐氣弄出一團霧,然後在上面畫個笑臉,透過笑臉可以看到外面的景色。 這個效果和刮刮卡很像,...

2017-12-26 ‧ 由 Don 分享
DAY 8

Flip Card - 翻轉圖片

我們可以通過 Core Animation 來對圖片做各種翻轉的操作。 這次想要讓使用者可以通過手勢來翻轉卡片。 FlipCard 當使用者在畫面上滑動的時...

2017-12-27 ‧ 由 Don 分享
DAY 9

Image Filter - 濾鏡

現在很難找到一個相機應用甚至圖片應用沒有濾鏡功能的,而其實 Core Image 也能玩濾鏡。 Image Filter 在 App 的底部放一個可以橫...

2017-12-28 ‧ 由 Don 分享
DAY 10

Merry Christmas - 下雪 ( CAEmitterLayer )

聖誕節的氣氛籠罩著整個城市,這次想做個下雪的動畫。 查資料的過程發現,原來最近常見的直播應用中,很多愛心噴射的動畫也有用類似的方法實現。 Merry Chr...

2017-12-29 ‧ 由 Don 分享