preface

Mid-Autumn festival three days so sleep in the past ~~ this can not blame me, I heard that Shenzhen even the plane have blown away, scared to death baby. The e holiday will always leave a hangover, but in order to make money, we are to stand up straight, then knock code.

Customize refresh animations with Sketch and MJRefresh

Today, I’m going to share with you the iOS implementation of custom pull-down refresh animations. We usually see a lot of apps with a drop refresh style in the chrysanthemum, because many apps use MJRefresh to implement the default drop refresh. However, we can also see that many apps have distinctive pull-down refresh features, such as Meituan, Fenile, Miaobo and so on.

Their refresh style is also implemented using MJRefresh, which has a class called MJRefreshGifHeader that can be customized to animate collections of GIF images as pull-down refreshes. But his premise is to create a collection of GIFs.

In my last article, Essential Software for iOS Engineers on Mac, I introduced a UI software called Sketch. This is a software that most of you probably have (if you don’t know how to use it, check out my last article for a tutorial link). This software can not only do static UI images, but also can do dynamic GIF images. Some time ago, I tried to create a GIF animation with Sketch, and I accidentally found a very good plug-in AnimateMate, which is written in javaScript, but it does not affect our use. For the use of this plug-in, you can go to this website to see the video AnimateMate tutorial. After we install the plug-in with Sketch ToolBox, we can use it.

Here I take the refresh animation of installment music as an example to explain. This is the effect that was finally integrated into the project:




Final render.gif

Here are two big steps to explain how to make your APP have a dedicated drop-down refresh animation:

2. Use MJRefreshGifHeader to integrate pull-down refresh animationsCopy the code

2. Create GIF animations with Sketch

1. Install the plug-in with SketchAnimateMate
2. Open Sketch, create a new drawing board, name it Refresh, and place the graphics you want to draw on the canvas



PNG new canvas

3. The next step is to draw the owl in stages according to the figure

Analyze this owl first:

1. First draw the shape of the head and face with the pen Tool, then perform the Baez curve deformation 2. Use the pencil tool to draw the hair. 3. The nose is two triangles. The wings are a rectangle with rounded corners. 6. The body is three circles. 7Copy the code

  1. Select pen tool




    Select the Bates curve. PNG

  2. Use the pen Tool (V) to trace 7 points along the top of the head until the first and seventh points overlap




    Use pen Tool to trace dot. PNG

  3. Edit the lines




    Select the line and click Edit.png

  4. The third point and the sixth point were selected respectively for the Bates curve deformation




    Baez curve deformation of the head. PNG

  5. Then trace the key points of the face in the same way




    Use the pen Tool to trace the key points of the face

  6. The second, fifth and seventh points of the face were deformed by the Baez curve




    Baez curve deformation of the face. PNG

  7. Draw the eyes and nose




    Draw nose and eyes. PNG

  8. Draw the wings with a rectangle




    Draw wings. PNG

  9. Change the rounded corners of the wings to 100




    Modified wing fillet. PNG

  10. Draw the body with three circles




    .Body PNG

  11. Draw the feet with six rectangles




    Draw feet. PNG

  12. Next is the hair, we use the pencil tool to draw the hair directly, the pencil tool is not easy to grasp, there is a little deviation is ok




    Draw hair with pencil. PNG




    Draw hair. PNG

  13. Finally, move the bottom shape to the side, fill in each area with color, and remove all the boundaries (pay attention to the position of the layer, if it is blocked, move the layer to the correct one).




    I’m going to move the next image.png

  14. So you draw the owl, and then you animate it.




    The final image. PNG

4. Use AnimationMate to animate

  1. First, scale the whole owl to a width of 56 and the drawing board to a width and height of 60




    Modify owl size and canvas size. PNG

  2. Make a group of the black part of the eye and the big white circle




    Group. PNG

  3. Select all layers ->plugins->AnimateMate->Creat Animateion




    Create animation 1.png

  4. Create the animation for frame 0. KeyframeNumber is 0, EasingType animation type is linear animation linearEase.




    Create animation 2.png

  5. Transform eye_right and eye_left to 369°




    Create animation 3.png

  6. Select all layers ->plugins->AnimateMate->Creat Animateion and we rotated the owl’s eyes from 0° to 359° into 20 keyframes. KeyframeNumber is 20, EasyingType is linear animation linearEase, OK.




    Create animation 4.png

  7. Select Refresh layer ->plugins->ExportAnimation to export the animation




    Export animation 1.png

  8. As you can see, here we can export GIF Aniamtion GIF, or directly export 20 PNG images. We checked them all and prefixed the exported GIF and PNG images with the name Fenqile_refresh. Select export to the Fenqile_Refresh folder




    Export animation 2.png

  9. The exported result is shown in the following figure. There are 20 PNG images and one GIF.




    The final exported result.png

  10. Open the GIF in your browser to see the final result.




    The final effect of.gif

This GIF has been created using Sketch, and now it’s time to use itMJRefreshCustomize the drop-down refresh style

Customize the drop-down refresh style with MJRefreshGifHeader

  1. Import 20 PNG images into the Xcode project




    Import the image into project. PNG

  2. Create a class CustomRefreshGifHeader that inherits from MJRefreshGifHeader.

import UIKit import MJRefresh class CustomRefreshGifHeader: MJRefreshGifHeader { // MARK: */ override func prepare() {super.prepare() var images = [UIImage]() for I in 0... 20 { if i < 10 { images.append(UIImage.init(named: "fenqile_refresh_0\\\\\\\\(i)")!) }else { images.append(UIImage.init(named: "fenqile_refresh_\\\\\\\\(i)")!) }} self. SetImages (images, duration: 1.2, forState: MJRefreshState. Refreshing) self. SetImages ([UIImage. Init (named: "fenqile_refresh_00")!] , forState: MJRefreshState.Pulling) self.setImages([UIImage.init(named: "fenqile_refresh_00")!] , forState: MJRefreshState.Idle) self.lastUpdatedTimeLabel.hidden = true self.stateLabel.font = UIFont.systemFontOfSize(10) Self. setTitle(" drop to refresh ", forState: mjrefreshState. Pulling) self.setTitle(" drop to refresh ", forState: Mjrefreshstate. Idle) self.setTitle(" refresh ", forState: MJRefreshState. Refreshing)} / * * set here child controls the position and size of * / override func placeSubviews () {super. PlaceSubviews () self.gifView.contentMode = UIViewContentMode.Center self.gifView.frame = CGRect.init(x: 0, y: 4, width: self.mj_w, height: 34) self.stateLabel.frame = CGRect.init(x: 0, y: 40, width: self.mj_w, height: 14) } }Copy the code

3. Add a drop-down refresh to the TableView

override func viewDidLoad() {
        super.viewDidLoad()
        tableView = UITableView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT), style: UITableViewStyle.Grouped)
        view.addSubview(tableView)
        tableView.mj_header = MBRefreshGifHeader.init { 
            // loading data
        }
}Copy the code

Summary Sketch can not only create UI graphics, but also create GIF animations. As an example, using AnimationMate to animate giFs is really convenient, but it has a lot of limitations. Currently, the plugin can only do linear animation effects, such as Position, Size, Transform, Opacity, etc. AnimationMate is not suitable for more complex animations. This article does not focus on other uses of AnimationMate. A detailed tutorial on how to use this plugin will follow.

Make a cool refresh animation for your APP and maybe your boss will give you a raise.

Give it a thumbs up if you like.