ios-Download Animation

2 hours to teach you cobwebs caanimation core animation of the beautiful download animationHeader Design Inspiration

Author of the design of this effect Nick;

Images you need to know before you start.

First on a caanimation level chart:

Images

The graphs are just the common properties of some classes, and more code is going to talk about them.

How to break down animations

On the decomposition GIF, in fact, with the MAC preview Development GIF file, you can see all the pictures of the frame.

Images

Select a few of the animation nodes of the picture to save good spare. For example:

Images
Images
Images
Images
Images

Consider that the service class has been extracted for the adaptation problem.

How to consistently animate

Coherent animation is the ability to show that you are doing smooth, uncomfortable, and comfortable. In fact, I am also trying many times, so many people see this effect, have said awkward I change, I shun why. So it's important to make the animation coherent.

First, the animation node to choose accurate, positioning good animation and animation of the link.
Second, let the animation end, restore the natural state, rather than the default state. Try not to have too much difference and irregular place
Third, use the combination animation, pinch the time node.

Simply say so much, let's begin the walkthrough code ~~

Code implementation BASIC Implementation ideas

1. Customize the Uicontrol class, because it is the UIView subclass itself, the Click event View is better. (Another way to click the callback with block)
2. Click whether the area is within the circle
3. Two Cashapelayer rings + (a cashapelayer arrow and Cashapelayer vertical line) are combined into an arrow +label
4. A service class manages the path and animation used to create the

Service class Service Properties

@property (Nonatomic,AssignCGRect Viewrect;@property (Nonatomic,Strong)Uibezierpath *progresspath;/** Key Frame **/@property (Nonatomic,Strong)Uibezierpath *arrowstartpath;@property (Nonatomic,Strong)Uibezierpath *arrowdownpath;@property (Nonatomic,Strong)Uibezierpath *arrowmidtpath; @property (nonatomic, strong) Span class= "hljs-built_in" >uibezierpath *arrowendpath;  @property (nonatomic, strong) Span class= "hljs-built_in" >uibezierpath *arrowwavepath;  @property (nonatomic, strong) Span class= "hljs-built_in" >uibezierpath *verticallinestartpath;  @property (nonatomic, strong) Span class= "hljs-built_in" >uibezierpath *verticallineendpath;  @property (nonatomic, strong) Span class= "hljs-built_in" >uibezierpath *succespath;          

Service method

/** * Line to point animation * * @param values keyframe * * @return Animation Group */- (Caanimationgroup *)Getlinetopointupanimationwithvalues:(Nsarray *) values;/** * ARROW To line animation * * @param values keyframe * * @return Animation Group */- (Caanimationgroup *)Getarrowtolineanimationwithvalues:(Nsarray *) values;/** * Get Circle Progress * * @param progress Current Progress value * * @return Path */- (Uibezierpath *)Getcirclepathwithprogress:(cgfloat) Progress;/** * Draw wavy lines * * @param offset offset * @param height wave height * @param curvature wave * * @return Path * *- (Uibezierpath *)getwavepathwithoffset: (cgfloat) offset WaveHeight: (CGFloat ) Height Wavecurvature: (cgfloat) curvature; /** * Whether to show progress label * * @param isshow yes/no * * @return Elastic animation */-(caspringanimation *)  Getprogressanimationshow: (BOOL) Isshow; /** * Line becomes successful animation * * @param values keyframe * * @return Animation group */-(caanimationgroup *) Span class= "Hljs-rule" >getlinetosuccessanimationwithvalues:  (Nsarray *) values; /** * Get Progress Label rect * * @return rect */-( CGRect) getprogressrect;           

Service key

/*  animation key  */static NSString  * kLineToPointUpAnimationKey = @"kLineToPointUpAnimationKey";static NSString * kArrowToLineAnimationKey = @"kArrowToLineAnimationKey";static NSString * kProgressAnimationKey = @"kProgressAnimationKey";static NSString * kSuccessAnimationKey = @"kSuccessAnimationKey";

Service Scale Factor

Arrow ScaleStaticConstDouble Arrowhscale =130.00/250.00;High proportion of Arrowhead headStaticConstDouble Arrowtwscale =96.00/250.00;StaticConstDouble Arrowthscale =50.00/250.00;//StaticConstDouble Linewscale =176.00/250.00;StaticConstDouble Pointspacingscale =16.00/250.00;StaticConstDouble Successpoint1scalex =90.00/250.00;StaticConstDouble Successpoint1scaley =126.00/250.00;Staticconst double Successpoint2scalex = 120.00/250.00; Static const double Successpoint2scaley = 160.00/250.00; Static const double Successpoint3scalex = 177.00/250.00; Static const double Successpoint3scaley = 95.00/250.00; Static const nsinteger kspacing = 2;      

Download Class Properties

/** *  进度:0~1 */@property (nonatomic, assign) CGFloat progress;/** * 进度宽 */@property (nonatomic, assign) CGFloat progressWidth;/** * 停止动画 */- (void)stopAllAnimations;/** * block 形式点击回调 *///@property (nonatomic, strong) void (^ didClickBlock)();

All method Previews
Images

Methods more, in this does not show, there are interested in children's shoes can go directly to GitHub download, remember to point a star Oh ~ ~ ~?

Call

Add Event

[downloadView addTarget:self action:@selector(updateProgress) forControlEvents:UIControlEventTouchUpInside];

or block callback.

//        downloadView.didClickBlock = ^{//            //            _timer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(timeDown) userInfo:nil repeats:YES];//        };

This simulates the network request data

// 模拟网络请求数据进度- (void)timeDown{    _timeCount -= 1;    _progress += 0.005;    self.downloadView.progress = _progress; if (_timeCount <= 0) { [self initData]; [_timer invalidate]; _timer = nil; }}

Final effect

Reality and ideals or some gap, hope is not very big, here to share their own research experience, there are any problems can issues me,

Images

#

Reprint: http://www.jianshu.com/p/4142d92aa799

ios-Download Animation