iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Software Development

Swift 新手上路之30天復刻版型系列 第 28

Day 28 - Instagram 登入畫面 Gradient Animation & Custom fonts

Gradient Animation

一開始先來實作上面漸層背景的動畫,從 storyboard 這裡看得出來,實際上我們的 image 是這麼大張,預計是藉由漸層圖片的左右移動來達到效果。
https://ithelp.ithome.com.tw/upload/images/20180116/20107699L8AuJJ7X6J.png
https://ithelp.ithome.com.tw/upload/images/20180116/201076998QZEp70c3p.png

加上背景圖片之後利用 @IBOutlet 連結,接下來利用程式碼來達到動畫效果

func animateBackgroundColour() {
    UIView.animate(withDuration: 9, delay: 0, options: [.autoreverse, .curveLinear, .repeat], animations: {
    let x = -(self.gradientView.frame.width - self.view.frame.width)
    self.gradientView.transform = CGAffineTransform(translationX: x, y: 0 )
    })
}
options 效果
.autoreserve If repeat, run animation back and forth
.curveLinear Causes an animation to occur evenly over its duration.
.curveEaseIn Causes the animation to begin slowly, and then speed up as it progresses.
.curveEaseOut Causes the animation to begin quickly, and then slow as it completes.
.curveEaseInOut Causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.

Custom fonts

當在 label 上顯示的文字想使用自己想要的,又或是系統已經安裝但是 xcode 裡抓不到的字型,我們利用以下方法將字型顯示在 label 上:

  1. 將字型檔(.otf or .ttf) 拉進專案中。
  2. Add to targets 到自己的專案名要打勾。
  3. 在 Info.plist 中新增 "Fonts provided by application",並將 String 的值指定為字型檔。
  4. https://ithelp.ithome.com.tw/upload/images/20180118/20107699I9OfySs918.png
  5. 新增 label 並且切到 Attribute inspecter 中 font 的部分選擇 custom,再選到自己新增的字型。
    https://ithelp.ithome.com.tw/upload/images/20180118/20107699XKNEVwiZHT.png

上一篇
Day 27 - Instagram 登入畫面版型檢視
下一篇
Day 29 - Instagram 串接 Facebook 登入
系列文
Swift 新手上路之30天復刻版型30

尚未有邦友留言

立即登入留言