快捷導(dǎo)航

iOS添加購物車動(dòng)畫效果示例

更新時(shí)間：2017年02月27日 10:29:41 作者：Mr_Wendao

本篇文章主要介紹了iOS 購物車動(dòng)畫效果示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、計(jì)算動(dòng)畫開始結(jié)束點(diǎn)位置

方法：

- (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view;

1）動(dòng)畫開始位置fromCenter

復(fù)制代碼代碼如下:

CGPoint fromCenter =  [animationView convertPoint:CGPointMake(animationView.frame.size.width * 0.5f, animationView.frame.size.height * 0.5f) toView:keyWindow];

2）動(dòng)畫結(jié)束位置endCenter

復(fù)制代碼代碼如下:

CGPoint endCenter = [endView convertPoint:CGPointMake(endView.frame.size.width * 0.5f, endView.frame.size.height * 0.5f) toView:keyWindow];

二、計(jì)算貝塞爾曲線（拋物線）的兩個(gè)控制點(diǎn)

controlPoint1是控制點(diǎn)1
controlPoint2是控制點(diǎn)2
A是controlPoint1和controlPoint2的中點(diǎn)
controlPointC是fromCenter和B的中點(diǎn)

1）先設(shè)置控制點(diǎn)距最高點(diǎn)（fromCenter或endCenter）的水平距離controlPointEY，本篇默認(rèn)controlPointEY = 100，即圖1中點(diǎn)controlPointC到點(diǎn)A的距離。

2）計(jì)算控制點(diǎn)相對于點(diǎn)A的距離controlPointEX，即controlPoint1到A距離或controlPoint2到A距離，本篇設(shè)置為fromCenter.x到endCenter.x的1/4，即controlPointEX = (endCenter.x - fromCenter.x) * 0.25f;

3）計(jì)算兩個(gè)控制點(diǎn)

CGPoint controlPoint1 = CGPointMake(controlPointCX - controlPointEX, controlPointCY - controlPointEY);
CGPoint controlPoint2 = CGPointMake(controlPointCX + controlPointEX, controlPointCY - controlPointEY);

三、復(fù)制動(dòng)畫的layer

NSString *str = ((UIButton *)animationView).titleLabel.text;
_animationLayer = [CATextLayer layer];
_animationLayer.bounds = animationView.bounds;
_animationLayer.position = fromCenter;
_animationLayer.alignmentMode = kCAAlignmentCenter;//文字對齊方式
_animationLayer.wrapped = YES;
_animationLayer.contentsScale = [UIScreen mainScreen].scale;
_animationLayer.string = str;
_animationLayer.backgroundColor = [UIColor redColor].CGColor;
[keyWindow.layer addSublayer:_animationLayer];

四、動(dòng)畫組合

1）運(yùn)動(dòng)軌跡（拋物線）

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:fromCenter];
[path addCurveToPoint:endCenter controlPoint1:controlPoint1 controlPoint2:controlPoint2];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;

2）旋轉(zhuǎn)起來

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotateAnimation.removedOnCompletion = YES;
rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
rotateAnimation.toValue = [NSNumber numberWithFloat:10 * M_PI];
rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]

3）縮放動(dòng)畫

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.removedOnCompletion = NO;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.2];

4）透明度動(dòng)畫

CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
alphaAnimation.removedOnCompletion = NO;
alphaAnimation.fromValue = [NSNumber numberWithFloat:1.0];
alphaAnimation.toValue = [NSNumber numberWithFloat:0.1];

5）動(dòng)畫組合

CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[pathAnimation,rotateAnimation, scaleAnimation, alphaAnimation];
groups.duration = kShoppingCartDuration;
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
groups.delegate = self;
[_animationLayer addAnimation:groups forKey:@"group"];

動(dòng)畫效果：