1. 程式人生 > >加入購物車動畫

加入購物車動畫

@interface ShopViewController ()

{

    CALayer *_goodsImageLayer;

UIBezierPath *_goodsImagePath;

}

...

@end


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

NSString *cellID =@"myid";

ShopTableViewCell * cell =nil;

    cell = [tableView

dequeueReusableCellWithIdentifier:cellID];

if(cell==nil)

    {

        cell = [[ShopTableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellID];

        cell.contentView.backgroundColor=[UIColorwhiteColor];

        cell.selectionStyle=UITableViewCellSelectionStyleNone;

        cell.

delegate=self;

    }

... 傳資料...

//cell.model = ...

//新增購物車按鈕的block回撥

    cell.ShopTableViewCellBlock = ^(UIImageView *imageView){

CGRect rect = [tableViewrectForRowAtIndexPath:indexPath];//獲取cell的位置

        rect.origin.y = rect.origin.y - self.shopTableView.contentOffset.y;

CGRect imageRect =CGRectMake

(CGRectGetMidX(imageView.frame) -15, CGRectGetMinY(imageView.frame),30, 30);//動畫小圖的位置,自定義的

        imageRect.origin.y = imageRect.origin.y + rect.origin.y;

        [selfstartAnimatingWithRect:imageRectImageView:imageView];

    };

return cell;

}

#pragma add to shop cart Animating

- (void) startAnimatingWithRect:(CGRect)imageRect ImageView:(UIImageView *)imageView{

_goodsImageLayer = [CALayerlayer];

_goodsImageLayer.contents = imageView.layer.contents;

_goodsImageLayer.bounds = imageRect;

_goodsImageLayer.contentsGravity =kCAGravityResizeAspectFill;

_goodsImageLayer.position =CGPointMake(CGRectGetMidX(imageView.frame),CGRectGetMidY(imageRect));

    [self.view.layeraddSublayer:_goodsImageLayer];

//貝塞爾曲線實現拋物線動畫

_goodsImagePath = [UIBezierPathbezierPath];

//設定起點座標

    [_goodsImagePathmoveToPoint:_goodsImageLayer.position];

//畫拋物線,結束位置和拋物線頂底位置,自定義的

    [_goodsImagePathaddQuadCurveToPoint:CGPointMake(kScreenWidth*0.70,kScreenHeight -40 - 64) controlPoint:CGPointMake(CGRectGetMaxX(imageView.frame) + 30,imageRect.origin.y -CGRectGetMaxY(imageView.frame))];

    [self.layerArrayaddObject:_goodsImageLayer];

    [selfgroupAnimation];

}

- (void) groupAnimation{

//移動

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimationanimationWithKeyPath:@"position"];

    pathAnimation.path =_goodsImagePath.CGPath;

    pathAnimation.rotationMode =kCAAnimationRotateAuto;

    //翻轉

CABasicAnimation *rotationAnimation = [CABasicAnimationanimationWithKeyPath:@"transform.rotation"];

    rotationAnimation.toValue = @M_PI;

    rotationAnimation.duration =1.0f;

    //縮放

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

    narrowAnimation.toValue =@0.3;

    narrowAnimation.beginTime =0.5;

    narrowAnimation.duration =0.5f;

    narrowAnimation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseOut];

    //組動畫

CAAnimationGroup *groupAnimation = [CAAnimationGroupanimation];

    groupAnimation.animations =@[pathAnimation, rotationAnimation, narrowAnimation];

    groupAnimation.duration =1.0f;

    groupAnimation.fillMode =kCAFillModeForwards;

    groupAnimation.removedOnCompletion =NO;

    groupAnimation.delegate =self;

    [_goodsImageLayeraddAnimation:groupAnimationforKey:@"group"];//新增動畫

}

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

//動畫結束,處理因多次新增商品,引起_goodsImageLayer沒有移除的bug

if (anim == [_goodsImageLayeranimationForKey:@"group"]) {

        [self.layerArrayenumerateObjectsUsingBlock:^(id_Nonnull obj, NSUInteger idx,BOOL * _Nonnull stop) {

            [obj removeFromSuperlayer];

        }];

    }

}

還可以增加其他處理,比如圖片圓角處理,比如拋物線路徑,比如新增一些其他的動畫,如果後面有時間,會新增到Github上。