加入购物车动画

#import "ViewController.h"

 

@interface ViewController ()

{

    UIImageView *_shop;

    UIBezierPath *_path;

    CALayer *_layer;

}

@end

 

@implementation ViewController

 

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    self.title = @"测试";

    self.view.backgroundColor = [UIColor whiteColor];

    [self createUI];

}

-(void)createUI

{

    _shop = [[UIImageView alloc] initWithFrame:CGRectMake(300, 300, 50, 50)];

    _shop.image = [UIImage imageNamed:@"[email protected]"];

    _shop.center = CGPointMake(270, 320);

    [self.view addSubview:_shop];

    

    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(50, self.view.frame.size.height-100, 80, 30)];

    [btn setTitle:@"加入购物车" forState:UIControlStateNormal];

    btn.backgroundColor = [UIColor cyanColor];

    btn.titleLabel.font = [UIFont systemFontOfSize:15.0];

    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:btn];

    

    //路径曲线

    _path = [UIBezierPath bezierPath];

    [_path moveToPoint:CGPointMake(50, 150)];

    [_path addQuadCurveToPoint:_shop.center controlPoint:CGPointMake(150, 20)];

    

}

//按钮点击事件

-(void)btnClick

{

    if (_layer == nil)

    {

        _layer = [CALayer layer];

        _layer.contents = (__bridge id)([UIImage imageNamed:@"test01.jpg"].CGImage);

        _layer.contentsGravity = kCAGravityResizeAspectFill;

        _layer.bounds = CGRectMake(0, 0, 50, 50);

        [_layer setCornerRadius:CGRectGetHeight([_layer bounds]) / 2];

        _layer.masksToBounds = YES;

        _layer.position =CGPointMake(50, 150);

        [self.view.layer addSublayer:_layer];

    }

    [self groupAnimation];

}

 

-(void)groupAnimation

{

    /*

     CAAnimation可分为以下四种：

     1.CABasicAnimation

     通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

     2.CAKeyframeAnimation

     Keyframe顾名思义就是关键点的frame，你可以通过设定CALayer的始点、中间关键点、终点的frame，时间，动画会沿你设定的轨迹进行移动

     3.CAAnimationGroup

     Group也就是组合的意思，就是把对这个Layer的所有动画都组合起来。PS：一个layer设定了很多动画，他们都会同时执行，如何按顺序执行我到时候再讲。

     4.CATransition

     这个就是苹果帮开发者封装好的一些动画

     */

    

    //关键帧动画

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    animation.path = _path.CGPath;

    animation.rotationMode = kCAAnimationRotateAuto;

    

    //缩放

    CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    expandAnimation.duration = 0.5f;

    expandAnimation.fromValue = [NSNumber numberWithFloat:1];

    expandAnimation.toValue = [NSNumber numberWithFloat:2.0f];

    expandAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    

    CABasicAnimation *narrowAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    narrowAnimation.beginTime = 0.5;

    narrowAnimation.fromValue = [NSNumber numberWithFloat:2.0f];

    narrowAnimation.duration = 1.5f;

    narrowAnimation.toValue = [NSNumber numberWithFloat:0.5f];

    narrowAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    

    /*

     Autoreverses

     当你设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到 开始的值。

     

     Duration

     Duration 这个参数你已经相当熟悉了。它设定开始值到结束值花费的时间。期间会被速度的属性所影响。 

     

     RemovedOnCompletion

     这个属性默认为 YES,那意味着,在指定的时间段完成后,动画就自动的从层上移除了。这个一般不用。

     

     假如你想要再次用这个动画时,你需要设定这个属性为 NO。这样的话,下次你在通过-set 方法设定动画的属性时,它将再次使用你的动画,而非默认的动画。

     

     Speed

     默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2 倍的速度播放。 这样的影响就是使持续时间减半。如果你指定的持续时间为6 秒,速度为 2.0,动画就会播放 3 秒钟---一半的 持续时间。

     

     BeginTime

     这个属性在组动画中很有用。它根据父动画组的持续时间,指定了开始播放动画的时间。默认的是 0.0.组 动画在下个段落中讨论“Animation Grouping”。

     

     TimeOffset

     如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝 了。

     

     RepeatCount

     默认的是 0,意味着动画只会播放一次。如果指定一个无限大的重复次数,使用 1e100f。这个不应该和 repeatDration 属性一块使用。

     

     RepeatDuration

     这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间流逝完。它不应该和 repeatCount 一起使用。

     */

     //关键帧，缩放，缩放组合起来执行

    CAAnimationGroup *groups = [CAAnimationGroup animation];

    groups.animations = @[animation,expandAnimation,narrowAnimation];

    groups.duration = 2.0f;

    groups.removedOnCompletion=NO;

    groups.fillMode=kCAFillModeForwards;

    groups.delegate = self;

    [_layer addAnimation:groups forKey:@"group"];

}

 

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

{

    if (anim == [_layer animationForKey:@"group"])

    {

//        _btn.enabled = YES;

        [_layer removeFromSuperlayer];

        _layer = nil;

//        _cnt++;

//        if (_cnt) {

//            _cntLabel.hidden = NO;

//        }

//        CATransition *animation = [CATransition animation];

//        animation.duration = 0.25f;

//        _cntLabel.text = [NSString stringWithFormat:@"%d",_cnt];

//        [_cntLabel.layer addAnimation:animation forKey:nil];

        

        CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];

        shakeAnimation.duration = 0.25f;

        shakeAnimation.fromValue = [NSNumber numberWithFloat:-5];

        shakeAnimation.toValue = [NSNumber numberWithFloat:5];

        shakeAnimation.autoreverses = YES;

        [_shop.layer addAnimation:shakeAnimation forKey:nil];

    }

}