交互動畫怠惶,是一款吸引用戶的裝逼神技躺枕,這是最近弄了一個加入購物車的交互動畫苏遥,并封裝了一下奸例,效果圖如下
Untitled.gif
1 大致原理
這里是給屏幕 添加了一個 關鍵幀動畫 和旋轉(zhuǎn)動畫的圖層
(1)關鍵幀動畫
這個動畫主要描繪圖層下落的路徑 彬犯,大致要確定三個點,通過 a,b,c 三個點來確立圖層的下落路徑,a 點圖片 的圖片的中心x 和y , b 點 是圖片的屏幕一半作為 x 坐標 和 圖片的y-80作為y,c 點 則是要下落的位置 ,我的demo 是下落在 第三個tarbar 大致計算一下即可
873CBD05-1268-4A5D-9530-719EA62BE7DE.png
來看下關鍵代碼
_layer.position = CGPointMake(rect.origin.x+view.frame.size.width/2, CGRectGetMidY(rect)); //a 點
// 路徑
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_layer.position];
[path addQuadCurveToPoint:finishPoint controlPoint:CGPointMake(ScreenWidth/2, rect.origin.y-80)];
//關鍵幀動畫
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
(2)圖層旋轉(zhuǎn)動畫則比較簡單了,直接貼代碼估計就看懂了查吊,這里大致是轉(zhuǎn)體三周半
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotateAnimation.removedOnCompletion = YES;
rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
rotateAnimation.toValue = [NSNumber numberWithFloat:12];
rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
2相關調(diào)用
如果你的 superView 就是VC 的 self.view 那么你可以直接用
/**
* 開始動畫
*
* @param view 添加動畫的view
* @param rect view 的絕對frame
* @param finishPoint 下落的位置
* @param animationFinisnBlock 動畫完成回調(diào)
*/
-(void)startAnimationandView:(UIView *)view andRect:(CGRect)rect andFinisnRect:(CGPoint)finishPoint andFinishBlock:(animationFinisnBlock)completion;
其中 rect 如果你添加動畫的view 的superview 就是vc 的self.view 那么你可以直接動畫的frame 賦值 不是的話則要計算出來谐区,詳情可以看一下我的demo