亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

iOS實(shí)現(xiàn)日歷翻頁(yè)動(dòng)畫(huà)

 更新時(shí)間:2016年08月04日 09:12:31   投稿:daisy  
本文的內(nèi)容主要是在IOS中實(shí)現(xiàn)日歷翻頁(yè)的動(dòng)畫(huà),界面簡(jiǎn)單但效果很好,以后可以運(yùn)用到app中,下面一起來(lái)看看。

本文我主要描述兩方面:

    1.日歷(簡(jiǎn)單描述原理)

    2.翻頁(yè)動(dòng)畫(huà)(重點(diǎn))

最終的效果如下圖:

    圖中沿四個(gè)對(duì)角的翻頁(yè)動(dòng)畫(huà),代表對(duì)應(yīng)方向手勢(shì)的滑動(dòng)

1. 日歷

要實(shí)現(xiàn)一個(gè)日歷,其實(shí)原理很簡(jiǎn)單,我們只要知道三個(gè)數(shù)據(jù):

    1.今天是哪一天

    2.這個(gè)月的第一天是星期幾(哪天)

    3.這個(gè)月總共有多少天

根據(jù)這個(gè)三個(gè)數(shù)據(jù),就可以把得到的日期顯示在日歷上了,至于日歷用什么來(lái)顯示,我個(gè)人比較喜歡用UICollectionView,一個(gè)cell代表一天,當(dāng)然也可以用很多個(gè)label,button來(lái)顯示。

1.獲取今天是哪一天

這個(gè)應(yīng)該是最簡(jiǎn)單的: NSDate() , 就可以獲取當(dāng)前的日期

2.獲取這個(gè)月的第一天是星期幾(哪天)

下面的方法都是作為NSDateextension擴(kuò)展的

//當(dāng)前月第一天
func firstDateOfCurrentMonth() ->NSDate{
  let calendar = NSCalendar(identifier:NSCalendarIdentifierGregorian )
  let currentDateComponents = calendar!.components([.Year,.Month], fromDate: self)
  let startOfMonth = calendar!.dateFromComponents(currentDateComponents)
  let date = startOfMonth?.dateByAddingTimeInterval(8*60*60)
  return date!
}

//當(dāng)前月的第一天是星期幾
func firstDayOfCurrentMonth() -> Int {
  let calendar = NSCalendar.currentCalendar()
  let components = calendar.components(.Weekday, fromDate: firstDateOfCurrentMonth())
  return components.weekday-1
}

3.獲取這個(gè)月總共有多少天

根絕上面這些數(shù)據(jù),就可以得到日歷里面每個(gè)格子應(yīng)該顯示的日期,具體的顯示和有關(guān)日期的三個(gè)主要的類: NSDate, NSCalendar, NSDateComponents 由于不是本文的重點(diǎn),我這里就不詳細(xì)說(shuō)了,如果有不明白的可以去看一下文檔,或者如果我下次寫(xiě)一個(gè)詳細(xì)的關(guān)于這三個(gè)類的(又挖一個(gè)坑。。)。

2. 翻頁(yè)動(dòng)畫(huà)

動(dòng)畫(huà)思路:

上面的動(dòng)畫(huà)屬于轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的一種,所以我們可以利用CATrasition進(jìn)行動(dòng)畫(huà),CATransition的使用非常簡(jiǎn)單,只要設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng),時(shí)間函數(shù),fillMode等,就可以得到想要的動(dòng)畫(huà),CATransitiontype代表的是過(guò)渡時(shí)候的動(dòng)畫(huà)效果,subType一般代表動(dòng)畫(huà)的方向,但是查看了一下CATransitiontype屬性,官方文檔里面只描述了下面四種預(yù)定義的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果:

NSString * const kCATransitionFade;
NSString * const kCATransitionMoveIn;
NSString * const kCATransitionPush;
NSString * const kCATransitionReveal;

我們需要的翻頁(yè)動(dòng)畫(huà)并不在里面,在google了一下之后,找到了一個(gè)比較理想的效果,通過(guò)直接設(shè)置CATransitiontype為"pageCurl"或"pangeUnCurl"進(jìn)行動(dòng)畫(huà),這兩個(gè)值官方文檔沒(méi)有提供,我也不知道為啥這些大神能找到。。。

但是默認(rèn)的朝上翻頁(yè)只有左上角方向的動(dòng)畫(huà),朝下翻頁(yè)只有右下角方向的動(dòng)畫(huà)

做出來(lái)的效果如下圖:

無(wú)法達(dá)到四個(gè)對(duì)角都能進(jìn)行翻頁(yè)動(dòng)畫(huà)的效果。

為了得到可以沿著四個(gè)對(duì)角方向翻頁(yè)的效果,我們可以先在最底部添加一個(gè)containerView,然后在containerView中添加dayView(下面提到的dayView和代碼中的dayView都代表的是作為日歷的collectionView)。

如果要進(jìn)行朝右上角翻頁(yè),我們只要把containerViewlayer先沿y軸翻轉(zhuǎn)M_PI,這樣,最開(kāi)始的右下角就變成左下角了,翻頁(yè)時(shí)就會(huì)變成向右上角翻頁(yè)

但是為了日歷顯示正確,我們需要把dayViewlayer重新翻轉(zhuǎn)過(guò)來(lái),這樣,containerView是反的,但是我們看到的日期顯示是正的

左下角翻頁(yè)也是同樣的道理。

具體代碼如下:

//為dayView(代表日歷的collectionview)添加一個(gè)滑動(dòng)手勢(shì)
func addPanGestureToDayView() {
  let swipe = UIPanGestureRecognizer(target: self, action: #selector(self.panOnDayView(_:)))
  dayView.addGestureRecognizer(swipe)
}

//當(dāng)在dayView上滑動(dòng)時(shí)觸發(fā)
func panOnDayView(pan: UIPanGestureRecognizer) {
  //如果手勢(shì)的狀態(tài)是結(jié)束狀態(tài)
  //或者當(dāng)前動(dòng)畫(huà)已經(jīng)結(jié)束(防止上一個(gè)翻頁(yè)動(dòng)畫(huà)還沒(méi)結(jié)束,就開(kāi)始下一個(gè))
  //添加翻頁(yè)的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)到dayView上
  if pan.state == .Ended && !animatiing{
    addAnimationToDayView(pan)
  }
}

let pageCurlDuration = 0.5  //動(dòng)畫(huà)時(shí)間
let kPageCurlKey = "pageCurl"   //往上翻頁(yè)的的type
let kPageUnCurlKey = "pageUnCurl"  //往下翻頁(yè)的type

//添加動(dòng)畫(huà)到日歷
func addAnimationToDayView(pan: UIPanGestureRecognizer) {
  let translation = pan.translationInView(dayView)
  //創(chuàng)建一個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
  let transitioin = CATransition()
  transitioin.duration = pageCurlDuration
  transitioin.timingFunction = CAMediaTimingFunction(name: "default")
  //在動(dòng)畫(huà)結(jié)束之后保證狀態(tài)不被移除(這個(gè)兩個(gè)屬性得同時(shí)設(shè)置)
  transitioin.fillMode = kCAFillModeForwards
  transitioin.removedOnCompletion = false
  //設(shè)置代理,在動(dòng)畫(huà)開(kāi)始和結(jié)束的代理方法中可以處理一些事情
  transitioin.delegate = self
  if translation.y < 0 {//手勢(shì)向上
  *
  *
    if translation.x > 0 {//手勢(shì)朝右上角滑動(dòng),朝右上翻頁(yè)
      //沿y軸對(duì)containerView進(jìn)行M_PI角度翻轉(zhuǎn),使containerView的右下角變?yōu)樽笙陆?
      animationContainerView.layer.transform = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0)
      //因?yàn)閐ayView是加在containerView上面的,如果不把dayView重新翻轉(zhuǎn)回去,顯示出來(lái)的界面都是反的
      dayView.layer.transform = CATransform3DMakeRotation(CGFloat(-M_PI), 0, 1, 0)
    }
    //轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的效果
    transitioin.type = kPageCurlKey
    //轉(zhuǎn)場(chǎng)動(dòng)畫(huà)方向
    transitioin.subtype = kCATransitionFromBottom
    //設(shè)置一個(gè)month的key,為了在動(dòng)畫(huà)結(jié)束時(shí)判斷動(dòng)畫(huà)代表的是上一個(gè)月,還是下一個(gè)月
    transitioin.setValue("next", forKey: "month")
  }else{//下
    if translation.x < 0 {//手勢(shì)朝左下角滑動(dòng),朝左下翻頁(yè)
      animationContainerView.layer.transform = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0)
      dayView.layer.transform = CATransform3DMakeRotation(CGFloat(-M_PI), 0, 1, 0)
    }
    transitioin.type = kPageUnCurlKey
    transitioin.subtype = kCATransitionFromTop
    transitioin.setValue("pre", forKey: "month")
  }
  dayView.layer.addAnimation(transitioin, forKey: "pageCurl")
}

動(dòng)畫(huà)開(kāi)始和停止時(shí),進(jìn)行一些處理:

//因?yàn)樯厦嬖O(shè)置了 transitioin.delegate = self,這兩個(gè)代理方法會(huì)自動(dòng)調(diào)用
override func animationDidStart(anim: CAAnimation) {
  //動(dòng)畫(huà)開(kāi)始時(shí),判斷當(dāng)前動(dòng)畫(huà)是代表往上翻頁(yè),還是往下翻頁(yè),來(lái)刷新日歷時(shí)間
  animatiing = true
  let components = GregorianCalendar?.components([.Year,.Month,.Day], fromDate: date)
  if anim.valueForKey("month") as! String == "next" {
    components?.month += 1
  }else if anim.valueForKey("month") as! String == "pre"{
    components?.month -= 1
  }
  date = (GregorianCalendar?.dateFromComponents(components!))!
  dateDidChaged!(date: date)
}

//動(dòng)畫(huà)結(jié)束時(shí),將layer的transform屬性設(shè)置為初始值,并移除dayView的layer上翻頁(yè)的動(dòng)畫(huà)
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
  if flag {
    animatiing = false
    animationContainerView.layer.transform = CATransform3DIdentity
    dayView.layer.transform = CATransform3DIdentity
    dayView.layer.removeAnimationForKey("pageCurl")
  }
}

總結(jié):

這篇文章沒(méi)有介紹太多詳細(xì)的內(nèi)容,其實(shí)翻頁(yè)的動(dòng)畫(huà)實(shí)現(xiàn)還有別的方法,但是因?yàn)槲蚁雽?shí)現(xiàn)的是可以沿著四個(gè)對(duì)角進(jìn)行動(dòng)畫(huà)的效果,所以最終選擇了這個(gè)方法,上面說(shuō)的好像不是很具體,如果不是很明白,可以先查看一下CATranstion的使用方法。以上就是本文的全部?jī)?nèi)容,希望對(duì)大家開(kāi)發(fā)IOS動(dòng)畫(huà)的時(shí)候能有所幫助。

相關(guān)文章

  • IOS 圓球沿著橢圓軌跡做動(dòng)畫(huà)

    IOS 圓球沿著橢圓軌跡做動(dòng)畫(huà)

    這篇文章主要介紹了IOS 圓球沿著橢圓軌跡做動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • iOS中多線程的入門(mén)使用教程(Swift)

    iOS中多線程的入門(mén)使用教程(Swift)

    這篇文章主要給大家介紹了關(guān)于iOS中多線程入門(mén)使用的相關(guān)資料,一個(gè)進(jìn)程中可以開(kāi)啟多條線程,每條線程可以并行執(zhí)行不同的任務(wù),本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-11-11
  • iOS第三方框架二維碼生成與掃描

    iOS第三方框架二維碼生成與掃描

    這篇文章主要為大家詳細(xì)介紹了iOS第三方框架二維碼生成與掃描,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-10-10
  • 如何去掉Xcode工程中某種類型的警告

    如何去掉Xcode工程中某種類型的警告

    這篇文章主要給大家介紹了關(guān)于如何去掉Xcode工程中某種類型的警告,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Xcode具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • iOS中生成指定大小、指定顏色的二維碼和條形碼方法詳解

    iOS中生成指定大小、指定顏色的二維碼和條形碼方法詳解

    本文主要介紹了iOS中生成指定大小、指定顏色的二維碼和條形碼的具體實(shí)現(xiàn)方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2016-12-12
  • IOS中的target action控件的實(shí)現(xiàn)

    IOS中的target action控件的實(shí)現(xiàn)

    這篇文章主要介紹了IOS中的target action控件的實(shí)現(xiàn)的相關(guān)資料,這里提供實(shí)現(xiàn)target action的簡(jiǎn)單實(shí)例幫助大家學(xué)習(xí)理解該如何實(shí)現(xiàn),需要的朋友可以參考下
    2017-08-08
  • iOS使用UICollectionView實(shí)現(xiàn)列表頭部拉伸效果

    iOS使用UICollectionView實(shí)現(xiàn)列表頭部拉伸效果

    這篇文章主要介紹了iOS使用UICollectionView實(shí)現(xiàn)列表頭部拉伸效果,OC和Swift兩個(gè)版本,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-05-05
  • iOS圖片實(shí)現(xiàn)可拉伸不變形的處理操作

    iOS圖片實(shí)現(xiàn)可拉伸不變形的處理操作

    這篇文章主要為大家詳細(xì)介紹了iOS圖片實(shí)現(xiàn)可拉伸不變形的處理操作,通過(guò)UIImage對(duì)象調(diào)用該方法,并且傳入要拉伸的圖片的名字作為參數(shù),實(shí)現(xiàn)返回一個(gè)可拉伸不變形的圖片,感興趣的小伙伴們可以參考一下
    2016-05-05
  • IOS 中XAMPP配置問(wèn)題及解決方法

    IOS 中XAMPP配置問(wèn)題及解決方法

    這篇文章主要介紹了IOS 中XAMPP配置問(wèn)題及解決方法的相關(guān)資料,需要的朋友可以參考下
    2017-06-06
  • ios設(shè)計(jì)模式--委托模式

    ios設(shè)計(jì)模式--委托模式

    這篇文章主要介紹了ios設(shè)計(jì)模式中的委托模式,希望對(duì)大家學(xué)習(xí)ios框架有所幫助,下面讓我們一起來(lái)了解一下吧
    2023-03-03

最新評(píng)論