脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → ios购物车动画效果

iOS添加购物车动画效果示例

 更新时间：2017年02月27日 10:29:41   作者：Mr_Wendao  
本篇文章主要介绍了iOS 购物车动画效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、计算动画开始结束点位置

方法： 

- (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是控制点1
  • controlPoint2是控制点2
  • A是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"];

动画效果：

下载地址：ShoppingCartAnimation_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • iOS 生成图片验证码绘制实例代码

    iOS 生成图片验证码绘制实例代码

    本篇文章主要介绍了iOS 图片验证码绘制实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Flutter之TabBarView组件项目实战示例

    Flutter之TabBarView组件项目实战示例

    这篇文章主要为大家介绍了Flutter之TabBarView组件项目实战示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • iOS中Label实现显示不同颜色与字体的方法

    iOS中Label实现显示不同颜色与字体的方法

    这篇文章主要给大家介绍了关于在iOS中Label实现显示不同颜色与字体的相关资料，文中分别介绍了利用range或者文字两种实现的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-11-11
  • iOS 封装导航栏及返回,获取控件所在控制器的实例

    iOS 封装导航栏及返回,获取控件所在控制器的实例

    下面小编就为大家分享一篇iOS 封装导航栏及返回,获取控件所在控制器的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS开发使用UITableView制作N级下拉菜单的示例

    iOS开发使用UITableView制作N级下拉菜单的示例

    这篇文章主要介绍了iOS开发使用UITableView制作N级下拉菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • IOS多线程实现多图片下载(二)

    IOS多线程实现多图片下载(二)

    这篇文章主要介绍了IOS多线程实现多图片下载(二)的相关资料,需要的朋友可以参考下
    2016-03-03
  • iOS小技能之字典转模及对象相等性示例详解

    iOS小技能之字典转模及对象相等性示例详解

    这篇文章主要为大家介绍了iOS小技能之字典转模及对象相等性示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • iOS仿网易新闻滚动导航条效果

    iOS仿网易新闻滚动导航条效果

    这篇文章主要为大家详细介绍了iOS仿网易新闻滚动导航条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 深入解析iOS应用开发中九宫格视图布局的相关计算方法

    深入解析iOS应用开发中九宫格视图布局的相关计算方法

    这篇文章主要介绍了iOS应用开发中九宫格视图布局的计算方法,包括item尺寸和坐标等一系列影像布局的数值相关计算的讲解,需要的朋友可以参考下
    2016-03-03
  • IOS本地日志记录解决方案

    IOS本地日志记录解决方案

    我们在项目中日志记录这块也算是比较重要的，有时候用户程序出什么问题，光靠服务器的日志还不能准确的找到问题。本文详细介绍了IOS本地日志记录解决方案。下面跟着小编一起来看下吧
    2017-03-03

最新评论