下面给大家说一个将敬业福加入购物车的方法
在项目过程中所涉及到的一个需求,效果和天猫京东等的那种控制器下沉,然后具体商品型号类型等的展示view弹出,加入购物车时图片的动画效果差不多,经过一些研究查阅之后做了一个非常标准的实现,并且在此基础上做了稍稍一些扩展.大体效果如下:
实现方式是通过 UIImageView + Category 的方式实现的,用分类的方式来实现不会对原有类产生任何影响.
动画过程是以UIBezierPath, CABasicAnimation及其子类CAKeyframeAnimation等来实现的,并且通过运行时 runtime 的特性为分类增加了一些属性,更加方便我们去调用设置.大体想法是通过贝塞尔路径画出图片所要做的位移路径,并且在图片做位移动画的过程中,通过CABasicAnimation核心动画的控制,让图片的旋转,缩放,抛物线,移动速率等的动画同时发生.
已经写过一篇文章讲述了控制器的3D下沉上升效果,这里就不多说了.主要分析下图片动画的过程.整个图片的位移路径首先是通过贝塞尔路径来控制的,先说一下简单的一个中心控制点的路径,大多数电商APP图片的移动路径也都是这种的:
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint startPoint = [self convertPoint:self.center toView:nil];
CGPoint endPoint = [[[self endPointAndHadianHeightByTransformEndType:transformType] firstObject] CGPointValue];
简单方式: 为路径设置一个中心控制点(抛物线单顶点):######
CGFloat radianHeight = [[[self endPointAndHadianHeightByTransformEndType:transformType] lastObject] floatValue];
float sx = startPoint.x, sy = startPoint.y, ex = endPoint.x, ey = endPoint.y;
float x = sx + (ex - sx)/3, y = sy + (ey - sy)*0.5 - radianHeight;
CGPoint centerPoint=CGPointMake(x,y);
然后将起始点和中心点都加入贝塞尔路径中,同时调用自定义的CAAnimation核心动画方法:
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:centerPoint];
[self transformWithBezierPath:path duration:duration];
两个控制点的方式: 为路径设置两个控制点(一上一下两个顶点):######
CGFloat radianHeight = [[[self endPointAndHadianHeightByTransformEndType:transformType] lastObject] floatValue];
CGPoint controlPoint1 = [[[self controlPointsByParabolaType:parabolaType startPoint:startPoint endPoint:endPoint radianHeight:radianHeight] firstObject] CGPointValue];
CGPoint controlPoint2 = [[[self controlPointsByParabolaType:parabolaType startPoint:startPoint endPoint:endPoint radianHeight:radianHeight] lastObject] CGPointValue];
[path moveToPoint:startPoint];
[path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
自定义的CAAnimation核心动画方法- (void)transformWithBezierPath:(UIBezierPath *)path duration:(NSTimeInterval)duration;内,
首先要确定一件事:该部分执行动画的图层全部都以 keyWindow 为参考系进行的,并且要为图层新建一个layer对象作为执行动画的图层,让图片在新的layer上进行位移,不然会直接作用于原图片.
然后在此基础上实现三个动画:图层的抛物线,图层的旋转和图层的尺寸缩放:
- (void)transformWithBezierPath:(UIBezierPath *)path duration:(NSTimeInterval)duration{
//该部分动画的imageview 全部都以 keyWindow 为参考系进行
UIWindow *window = [UIApplication sharedApplication].keyWindow;
CGRect rect = [self convertRect:self.bounds toView:window];
CALayer *layer = [[CALayer alloc] init];
layer.contents = self.layer.contents;
layer.frame = rect;
layer.opacity = 1;
[window.layer addSublayer:layer];
//抛物线
CAKeyframeAnimation *parabolaPathAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
parabolaPathAnimation.path = path.CGPath; //pao
parabolaPathAnimation.autoreverses = NO; //自动复位为NO
parabolaPathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
parabolaPathAnimation.duration = duration;
parabolaPathAnimation.fillMode = kCAFillModeForwards; //动画状态是否保持
parabolaPathAnimation.removedOnCompletion = NO; //完成后移除
//旋转
CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 8];
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
rotationAnimation.cumulative = YES;
rotationAnimation.duration = duration;
rotationAnimation.fillMode = kCAFillModeForwards;
rotationAnimation.removedOnCompletion = NO;
//尺寸缩放
CAKeyframeAnimation *transformAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
CATransform3D scale1 = CATransform3DMakeScale(1.0, 1.0, 1),
scale2 = CATransform3DMakeScale(0.65, 0.65, 1),
scale3 = CATransform3DMakeScale(0.2, 0.2, 1),
scale4 = CATransform3DMakeScale(.0, .0, 1);
NSArray *frameValues = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:scale1],
[NSValue valueWithCATransform3D:scale2],
[NSValue valueWithCATransform3D:scale3],
[NSValue valueWithCATransform3D:scale4], nil];
[transformAnimation setValues:frameValues];
//两种速率控制方式均可
NSArray *frameTimes = [NSArray arrayWithObjects:@0,@0.5,@0.8,@1,nil];
[transformAnimation setKeyTimes:frameTimes];
// transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transformAnimation.duration = duration;
transformAnimation.fillMode = kCAFillModeForwards;
transformAnimation.removedOnCompletion = NO;
[layer addAnimation:parabolaPathAnimation forKey:@"parabolaPathAnimation"];
[layer addAnimation:transformAnimation forKey:@"transformAnimation"];
[layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
}
分类里具体提供了三个方法供大家来调用:
/**
* 图片做贝塞尔路径的形变位移便捷方法
*
* @param transformType 位移的结束点类型
*/
- (void)animationWithBezierPathTransformEndType:(TransformEndType)transformType duration:(NSTimeInterval)duration;
/**
* 图片做多控制点贝塞尔路径的形变位移标准方法
*
* @param parabolaType 贝塞尔抛物线类型
* @param view 目标view
*/
- (void)animationWithBezierPathTransformParabolaType:(ParabolaType)parabolaType toView:(UIView *)view duration:(NSTimeInterval)duration;
/**
* 图片做多控制点贝塞尔路径的形变位移扩展方法
*
* @param transformType 位移的结束点类型
* @param parabolaType 贝塞尔抛物线类型
*/
- (void)animationWithTwoControlPointsBezierPathTransformEndType:(TransformEndType)transformType parabolaType:(ParabolaType)parabolaType duration:(NSTimeInterval)duration;
便捷方法只需要传入动画时间duration以及
/** 位移的结束点类型 */
typedef NS_ENUM(NSInteger, TransformEndType) {
/** 结束点 : 导航条的右上角 */
TypeNavRightItemPoint = 0,
/** 结束点 : Tabbar的第3个(从0开始) */
TypeTabBarIndex3Point = 1,
/** 结束点 : 与选中图片对称 */
TypeSymmetricWithImage = 2,
/** 结束点 : 自定义结束点,需要设提前置endPoint与radianHeight */
TypeCustomPoint = 3,
};
的枚举值,通常情况下直接选定比如TypeNavRightItemPoint就好;
标准方法需要传入我们的位移目标位置出的小视图,比如导航条的右侧按钮,tabbar的第几个按钮等,因为一旦选用控制器3D下沉效果的话,导航条的右侧按钮相对于keyWindow的位置是会改变的,如果继续选择第一个方法,最终的位置会出现偏差:
看到没,敬业福我们可以直接购买了
换上标准方法就好了,传入目标view:
// [self.goodImage animationWithBezierPathTransformEndType:TypeNavRightItemPoint duration:duration];
UIView *view = self.currentVc.navigationItem.rightBarButtonItem.customView;
[self.goodImage animationWithBezierPathTransformParabolaType:ParabolaTypeUp toView:view duration:duration];
可以看到不管控制器有没有下沉,导航条右按钮相对window的frame跑到哪里,都可以准确地定位到其中:
扩展方法主要是多了一个```/** 贝塞尔抛物线类型 /
typedef NS_ENUM(NSInteger, ParabolaType) {
/* 上顶点 /
ParabolaTypeUp = 0,
/* 先下后上 /
ParabolaTypeDownAndUp = 1,
/* 先上后下 */
ParabolaTypeUpAndDown = 2,
};
[self.goodImage animationWithTwoControlPointsBezierPathTransformEndType:TypeNavRightItemPoint parabolaType:ParabolaTypeDownAndUp duration:duration];
最终效果:
这里也做了一份完整的demo,放在了github上,大家可以去看一下:[传送门](https://github.com/coderlinxx/XXBezierTransform) ,如果能帮助到您或有兴趣,帮忙点个赞就更好了,谢谢️
Ps:gif软件做出来的图片动画效果都不太顺畅，dome里做出的效果都是挺顺滑的，去下一个看看就好了。另外哪位兄弟给推荐一个比较好的录制gif图片的软件。。