IOS to implement calendar page animation _ios

This article I mainly describe two aspects:

1. Calendar (Simple description principle)

2. Flip-page animation (emphasis)

The final effect of the following figure:

a page animation along four diagonal pages, representing the slide of a corresponding direction gesture.

1. Calendar

To implement a calendar, in fact, the principle is very simple, we only know three data:

1. What day is it today?

2. What day of the week is the first day of the month

3. How many days are there in this month

Based on this three data, you can get the date displayed on the calendar, as for the calendar with what to show, I personally prefer to use Uicollectionview, a cell for a day, of course, can also use a lot of label ,button to display.

1. Get What day is today

This should be the simplest: NSDate() to get the current date

2. To get the first day of the month is how many days of the week (which day)

The following methods are extended as nsdate extension

The first day of the current month
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!
}

The first day of the current month is the week
func firstdayofcurrentmonth ()-> Int {let
  calendar = Nscalendar.currentcalendar ()
  Let components = Calendar.components (. Weekday, Fromdate:firstdateofcurrentmonth ()) return
  components.weekday-1
}

3. How many days are there to get this month

Eradicate the above data, you can get the calendar inside each grid should show the date, the specific display and the date of the three main classes: NSDate , NSCalendar , NSDateComponents because it is not the focus of this article, I do not say in detail here, if there is not clear can go to see the document, Or if I write one more detail about these three classes next time (Dig a hole again.) ）。

2. Flip-page Animation

Animation ideas:

The above animation is a kind of transition animation, so we can use the CATrasition animation, CATransition the use is very simple, as long as the animation set, Time function, and fillMode so on, you can get the desired animation, CATransition the type representative is the transitional Time animation effect, subType Generally represents the direction of the animation, but look CATransition at the type properties, the official document only describes the following four predefined transitions animation effects:

NSString * Const Kcatransitionfade;
NSString * Const Kcatransitionmovein;
NSString * Const Kcatransitionpush;
NSString * Const kcatransitionreveal;

We need to flip the animation is not inside, after Google a bit, found a more ideal effect, through the direct set CATransition for " type pageCurl " or " pangeUnCurl " animation, these two values are not available official documents, I do not know why these great gods can find ...

But the default is to page up only the upper left corner of the animation, page down only the lower right corner of the animation

The effect of making the following figure:

The effect of turning the page animation on the four diagonal can not be achieved.

To get the effect of flipping the page in four diagonal directions, we can add one at the bottom and add it in containerView containerView (the dayView following and the dayView code dayView are all represented as calendars collectionView ).

If you want to turn the page in the upper-right corner, we just containerView layer flip the first y轴 M_PI , so that the beginning of the lower right corner will turn to the lower left corner, the page will turn to the right corner page

But for the calendar to display correctly, we need to dayView layer flip it over, so it's containerView reversed, but the date we see appears to be positive.

The bottom left corner of the page is the same reason.

The specific code is as follows:

Add a sliding gesture for Dayview (CollectionView for the calendar) Func Addpangesturetodayview () {Let swipe = Uipangesturerecognizer (Target:sel F, Action: #selector (Self.panondayview (_))) Dayview.addgesturerecognizer (Swipe)}///When sliding on Dayview trigger func
  Panondayview (Pan:uipangesturerecognizer) {//If the state of the gesture is the end state//or the current animation has ended (prevents the last page-flipping animation from ending, start next)//Add page Transitions animation to Dayview if pan.state = =. Ended &&!animatiing{Addanimationtodayview (PAN)}} Let Pagecurlduration = 0.5//animation time Let Kpagecurlkey = The type let Kpageuncurlkey = "pageuncurl"///Page DOWN type//Add animation to Calendar func Addanimationtodayview (Pan:uipang pagecurl) Esturerecognizer) {Let translation = Pan.translationinview (Dayview)//Create a transitions animation let Transitioin = Catransition () t Ransitioin.duration = pagecurlduration transitioin.timingfunction = camediatimingfunction (name: "Default")//Protect after animation Certificate Status not removed (this two attribute must be set at the same time) Transitioin.fillmode = Kcafillmodeforwards Transitioin.removedoncompletion = false//set agent, beginning of animation And the end of the proxy method can handle some things tRansitioin.delegate = self If translation.y < 0 {//gesture up * * If translation.x > 0 {//gesture to the upper right corner, page to right /M_PI angle Flip of Containerview along Y axis to make Containerview lower right corner to lower left corner animationContainerView.layer.transform =
      Catransform3dmakerotation (CGFloat (M_PI), 0, 1, 0)//Because Dayview is added to the Containerview, if you do not flip the Dayview back, the display of the interface is reversed DayView.layer.transform = Catransform3dmakerotation (CGFloat (-M_PI), 0, 1, 0)}//Transitions animation effect Transitioin.type = k 
    Pagecurlkey//Transitions animation direction Transitioin.subtype = Kcatransitionfrombottom//Set a month key, in order to determine at the end of the animation represents the one months, or the next month Transitioin.setvalue ("Next", Forkey: "Month")}else{//under if translation.x < 0 {//gesture toward the lower left corner, page down to the left side Animati OnContainerView.layer.transform = Catransform3dmakerotation (CGFloat (M_PI), 0, 1, 0) DayView.layer.transform = Catran Sform3dmakerotation (CGFloat (-M_PI), 0, 1, 0)} Transitioin.type = Kpageuncurlkey Transitioin.subtype = KCATran Sitionfromtop Transitioin.setvalue ("Pre",Forkey: "Month")} dayView.layer.addAnimation (Transitioin, Forkey: "Pagecurl")} 

When the animation starts and stops, do some processing:

Because the transitioin.delegate = self is set above, the two proxy methods automatically invoke
override Func Animationdidstart (anim:caanimation) {
  // When the animation begins, determine whether the current animation represents a page up or a page down to refresh the calendar time
  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)
}

At the end of the animation, set the Layer Transform property to the initial value and remove the animated override Func Animationdidstop (anim:caanimation) on the layer page of the Dayview.
Finished Flag:bool) {
  If flag {
    animatiing = false
    AnimationContainerView.layer.transform = catransform3didentity
    dayView.layer.transform = catransform3didentity
    DayView.layer.removeAnimationForKey ("Pagecurl")
  }
}

Summarize:

This article does not introduce too much detail, in fact, there are other ways to animate the page, but because I want to achieve is to be able to animate along the four diagonal, so finally chose this method, it seems to say is not very specific, if not very clear, You can see how catranstion is used first. This is the full content of this article, I hope that the development of iOS animation can help.