iOS 購物車動畫
動畫效果:
Demo
一、計算動畫開始結束位置
方法:
- (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view;
1) 動畫開始位置fromCenter
CGPoint fromCenter = [animationView convertPoint:CGPointMake(animationView.frame.size.width * 0.5f, animationView.frame.size.height * 0.5f) toView:keyWindow];
2)動畫結束位置endCenter
CGPoint endCenter = [endView convertPoint:CGPointMake(endView.frame.size.width * 0.5f, endView.frame.size.height * 0.5f) toView:keyWindow];
二、計算貝塞爾曲線(拋物線)的兩個控制點
controlPoint1
是控制點1controlPoint2
是控制點2A
是controlPoint1
和controlPoint2
的中點controlPointC
是fromCenter
和B
的中點
1)先設定控制點距最高點(fromCenter
或endCenter
)的水平距離controlPointEY
,本篇預設controlPointEY = 100
,即圖1中點controlPointC
到點A
的距離。
2)計算控制點相對於點A
的距離controlPointEX
,即controlPoint1
到A
距離或controlPoint2
到A
距離,本篇設定為fromCenter.x
到endCenter.x
的1/4,即controlPointEX = (endCenter.x - fromCenter.x) * 0.25f;
3)計算兩個控制點
CGPoint controlPoint1 = CGPointMake(controlPointCX - controlPointEX, controlPointCY - controlPointEY);
CGPoint controlPoint2 = CGPointMake(controlPointCX + controlPointEX, controlPointCY - controlPointEY);
三、複製動畫的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];
四、動畫組合
1)運動軌跡(拋物線)
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:fromCenter];
[path addCurveToPoint:endCenter controlPoint1:controlPoint1 controlPoint2:controlPoint2];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
2)旋轉起來
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)縮放動畫
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.removedOnCompletion = NO;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.2];
4)透明度動畫
CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
alphaAnimation.removedOnCompletion = NO;
alphaAnimation.fromValue = [NSNumber numberWithFloat:1.0];
alphaAnimation.toValue = [NSNumber numberWithFloat:0.1];
5)動畫組合
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"];
五、其他
相關文章
- 加入購物車動畫效果實現動畫
- jQuery新增到購物車動畫特效外掛jQuery動畫特效
- 用Provider實現商品加入購物車的動畫效果IDE動畫
- 使用二階貝塞爾曲線實現新增購物車動畫動畫
- day83:luffy:新增購物車&導航欄購物車數字顯示&購物車頁面展示
- flutter 購物車功能Flutter
- 購物車模組
- ATM+購物車
- JavaScript 購物車自動計算價格JavaScript
- 貝塞爾曲線的css實現——淘寶加入購物車基礎動畫CSS動畫
- 淘寶買家授權API系列:新增購物車商品、刪除購物車商品、獲取購物車商品列表API
- 購物車自動計算商品總價格
- python之購物車程式Python
- iOS 動畫iOS動畫
- JavaScript商城購物車價格自動計算功能JavaScript
- jQuery 加入購物車 彈窗jQuery
- 購物車的實現原理
- vue例項-購物車功能Vue
- 購物車原理以及實現
- Vue實現購物車效果Vue
- IOS動畫使用iOS動畫
- JS動畫效果——多物體動畫JS動畫
- iOS 動畫之Spring動畫、Block動畫、GIF圖iOS動畫SpringBloC
- 使用Vue做一個購物車Vue
- python-購物車程式練習Python
- 購物車(OK HTTP方法請求)HTTP
- VUE-書籍購物車案例Vue
- Android實現商城購物車功能Android
- 改版後前端購物車系統前端
- 【jquery】實現購物車加減jQuery
- 活動| 白帽子雙十一清空購物車的祕籍...
- iOS動畫全面解析iOS動畫
- iOS UIView基本動畫iOSUIView動畫
- iOS 動畫技巧 (一)iOS動畫
- 仿餓了麼加入購物車旋轉控制元件 – 自帶閃轉騰挪動畫 的按鈕控制元件動畫
- vue2.0實現購物車功能Vue
- 原生js實現購物車結算JS
- 微信小程式的購物車功能微信小程式
- Redis 購物車 - 刪除商品與更新購買數量Redis