加入購物車動畫
@interface ShopViewController ()
{CALayer *_goodsImageLayer;
UIBezierPath *_goodsImagePath;
}
...
@end
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *cellID =@"myid";
ShopTableViewCell * cell =nil;
cell = [tableView
if(cell==nil)
{
cell = [[ShopTableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellID];
cell.contentView.backgroundColor=[UIColorwhiteColor];
cell.selectionStyle=UITableViewCellSelectionStyleNone;
cell.
}
... 傳資料...
//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
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上。