iOS实现点赞动画特效

本文实例为大家分享了iOS实现点赞动画特效的具体代码,供大家参考,具体内容如下

动画的基本使用

动画的实现基本上是基于对View控件和View的layer属性进行操作,对视图进行移动,尺寸变换,透明度变换,旋转等一系列操作。

关键帧动画:

动画的实现可以分为两个部分,一部分是规定动画的变化内容,比如view需要把scale从0变化到1,这个数字是相对值,即从尺寸为0变化到正常尺寸。另一个部分是规定动画的渐变时间。这样就实现了view在规定时间完成指定变化了,这个变化的过程也可以通过参数设置为非均匀变化的。上面的示例是关键帧动画的实现,实现的方式是把动画划分为几个部分,“第一帧”做一件事,“第二帧”再做另外一件事,这就使得变化连续且可控。Duration参数确定了时间,delay确定了延时多久执行,options确定了关键帧动画布局子控件。completion的参数是一个block,其中的内容是在内容执行结束后才调用。这里做了3帧,前两帧做了尺寸变为3倍然后恢复,后一帧使得其隐藏。结束后会调用block使其移除。

[UIView animateKeyframesWithDuration:self.animationDurtion * 4 delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{
   /*参数1:关键帧开始时间
    参数2:关键帧占用时间比例
    参数3:到达该关键帧时的属性值 */
   [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 * self.animationDurtion animations:^{
    giveLikeView.transform = CGAffineTransformMakeScale(3, 3);;
   }];
   [UIView addKeyframeWithRelativeStartTime:0.5 * self.animationDurtion relativeDuration:0.5 * self.animationDurtion animations:^{
    giveLikeView.transform = CGAffineTransformIdentity;
   }];
   [UIView addKeyframeWithRelativeStartTime:self.animationDurtion relativeDuration:self.animationDurtion * 3 animations:^{
    giveLikeView.alpha = 0;
   }];
  } completion:^(BOOL finished) {
   giveLikeView.hidden = YES;
   [giveLikeView removeFromSuperview];
  }];

CAShapeLayer和UIBezierPath:

当不满足于view的变化,还需要在view的表面绘制一些图案,就要对layer进行操作,layer可以理解为是view的表面,每个view都有layer参数。UIBezierPath是贝塞尔曲线,它用于设置绘图的路径,没有了它,layer的绘制也是无效的,因为没有边界呀。
如下代码绘制了一个圆形的曲线,设置了它的中心,半径,起始终止角这些属性。

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2) radius:giveLikeView.bounds.size.width startAngle:-1.57 endAngle:-1.57+3.14*2 clockwise:YES];
 circleLayer.path = bezierPath.CGPath;
 [self.layer addSublayer:circleLayer];

在最后我们可以看到:circleLayer.path = bezierPath.CGPath; [self.layer addSublayer:circleLayer];
它的作用是设置layer的路径,并把layer添加到view的表面。下面来看看layer的配置。
创建一个layer后设置它的frame和颜色以及边界,线宽这些属性。

CAShapeLayer *circleLayer = [[CAShapeLayer alloc] init];
circleLayer.frame = giveLikeView.frame;
circleLayer.fillColor = [UIColor clearColor].CGColor;
circleLayer.strokeColor = [UIColor redColor].CGColor;
circleLayer.lineWidth = 1;

几处联系:把贝塞尔曲线和layer联系起来,把layer和view的layer联系起来。

为layer加动画(动画组):

先创建动画组CAAnimationGroup,它可以容纳若干动画,然后创建若干CABasicAnimation基础动画。分别设置属性,动画组需要涉及的属性有时间功能,kCAMediaTimingFunctionEaseIn表示逐渐加快,另外还有设置持续时间,设置kCAFillModeForwards表示动画在结束后会保持,removedOnCompletion = NO表示最后不移除。在基础动画的设置中,一般设置在动画组中的起始时间和持续时间,还有参数的变化。最后的 group.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion];[circleLayer addAnimation:group forKey:nil];
两句表示在动画组中添加动画然后为layer添加动画组,这样layer就有动画特效了。

//动画
CAAnimationGroup *group = [CAAnimationGroup animation];
 group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
 NSTimeInterval groupInterval = self.animationDurtion * 0.8;
 group.duration = groupInterval;
 group.fillMode = kCAFillModeForwards;
 group.removedOnCompletion = NO;

CABasicAnimation * scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
 scaleAnimtion.beginTime = 0;
 scaleAnimtion.duration = groupInterval * 0.8;
 scaleAnimtion.fromValue = @(0);
 scaleAnimtion.toValue = @(1);

CABasicAnimation * widthStartAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
 widthStartAnimtion.beginTime = 0;
 widthStartAnimtion.duration = groupInterval * 0.8;
 widthStartAnimtion.fromValue = @(1);
 widthStartAnimtion.toValue = @(2);

CABasicAnimation * widthEndAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
 widthEndAnimtion.beginTime = groupInterval * 0.8;
 widthEndAnimtion.duration = groupInterval * 0.2;
 widthEndAnimtion.fromValue = @(2);
 widthEndAnimtion.toValue = @(0);

 group.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion];
 [circleLayer addAnimation:group forKey:nil];

点赞动画的实现原理

下面来介绍demo的实现原理。

controller的尺寸设置为全屏,在其上方也覆盖一个全屏的view,再在view上添加点击事件(手势)。

- (void)addGesture
{
 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(creatOneHeart:)];
 [self addGestureRecognizer:tap];
}

下面看看点击后调用的方法:

这里每次点击都会获取点击的位置然后去初始化一个爱心,这是异步任务,放在主队列中执行。

- (void)creatOneHeart:(UITapGestureRecognizer *)sender
{
 CGPoint point = [sender locationInView:self];
 dispatch_async(dispatch_get_main_queue(),^{
  [self initOneNewHeart:point];
 });
}

这段代码创建了视图对象,这里自然用到了事先创建好的心形图片。这里把创建的imageview存到队列,显示到view上,最后调用likeAction:方法执行动画。

- (UIImageView *)createGiveLikeView
{
 UIImageView *giveLikeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
 giveLikeView.backgroundColor = [UIColor clearColor];
 UIImage *image = [UIImage imageNamed:@"icon_home_like_after"];
 giveLikeView.userInteractionEnabled = YES;
 giveLikeView.tag = GiveType;
 giveLikeView.image = image;
 giveLikeView.hidden = NO;
 _giveLikeView = giveLikeView;
 return _giveLikeView;
}
- (void)initOneNewHeart:(CGPoint)point
{
 UIImageView *giveLikeView = [self createGiveLikeView];
 giveLikeView.center = point;
 [self.array addObject:giveLikeView];
 [self addSubview:giveLikeView];
 [self likeAction:giveLikeView];
}

我们看看giveLikeAction:这个方法,它包括执行心形的变化动画和绘制六个辐射的三角形动画,还有辐散的圆的动画。

- (void)likeAction:(UIImageView *)giveLikeView
{
 [self giveLikeAction:giveLikeView];
}
- (void)giveLikeAction:(UIImageView *)giveLikeView
{
 [self animtionChangeLikeType:giveLikeView];
 [self createTrigonsAnimtion:giveLikeView];
 [self createCircleAnimation:giveLikeView];
}

接下来直接看看辐散的三角形的动画(爱心的变化动画在上面已经涉及到了):
这段代码跑了6个循环,做了6个三角形,它们分别有动画效果。
shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1);实现了旋转。
[giveLikeView.layer addSublayer:shape];执行layer的添加。
因为在循环中,每个layer都有独立的动画,动画组实现的效果是三角形从小变大,最后变成一条直线并消失。
下面的两行代码用到了__bridge,它的作用是实现类型的转换,这里把CGPathRef类型“桥接”转化为了id类型,如果没有它,会报错。
pathAnimation.fromValue = (__bridge id)startPath.CGPath;
pathAnimation.toValue = (__bridge id)endPath.CGPath;

- (void)createTrigonsAnimtion:(UIImageView *)giveLikeView
{
 for(int i=0;i<6;i++) {
  //创建一个layer并设置位置和填充色
  CAShapeLayer *shape = [[CAShapeLayer alloc] init];
  shape.position = CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2);
  shape.fillColor = [UIColor redColor].CGColor;
  //设置贝塞尔曲线,执行路径
  UIBezierPath *startPath = [[UIBezierPath alloc] init];
  [startPath moveToPoint:CGPointMake(-2, 30)];
  [startPath addLineToPoint:CGPointMake(2, 30)];
  [startPath addLineToPoint:CGPointMake(0, 0)];
  [startPath addLineToPoint:CGPointMake(-2, 30)];
  shape.path = startPath.CGPath;

  //旋转
  shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1);
  [giveLikeView.layer addSublayer:shape];

  //动画组
  CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
  groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
  groupAnimation.duration = self.animationDurtion;
  groupAnimation.fillMode = kCAFillModeForwards;
  groupAnimation.removedOnCompletion = NO;

  //基础动画1
  CABasicAnimation *scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
  //缩放时间占20%
  scaleAnimtion.duration = self.animationDurtion * 0.2;
  scaleAnimtion.fromValue = @(0);
  scaleAnimtion.toValue = @(1);

  //绘制三角形结束 一条直线
  UIBezierPath *endPath = [UIBezierPath bezierPath];
  [endPath moveToPoint:CGPointMake(-2, 30)];
  [endPath addLineToPoint:CGPointMake(2, 30)];
  [endPath addLineToPoint:CGPointMake(0, 30)];

  //基础动画2
  CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
  pathAnimation.beginTime = self.animationDurtion * 0.2;
  pathAnimation.duration = self.animationDurtion * 0.8;
  pathAnimation.fromValue = (__bridge id)startPath.CGPath;
  pathAnimation.toValue = (__bridge id)endPath.CGPath;

  groupAnimation.animations = @[scaleAnimtion,pathAnimation];
  [shape addAnimation:groupAnimation forKey:nil];
 }
}

demo实现的动画效果

demo的GitHub链接

最后附上demo链接:MYFGiveLikeAnimationDemo

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

时间: 2021-01-26

iOS使用核心动画和粒子发射器实现点赞按钮的方法

首先放上效果图,大家可以看一下 实现的方法如下 一.使用到的类 CAKeyframeAnimation       // 核心动画-关键帧动画 CAEmitterLayer            // 粒子发射器(其实就是一个Layer,其父类是CALayer) CAEmitterCell             // 粒子 PS:核心动画应该不用多说了; CAEmitterLayer和CAEmitterCell,其实可以比喻成"炮"和"炮弹",应该不难理解; 二.

基于UIControl控件实现ios点赞功能

在开发当中,可能很多时候都需要做个点赞的需求,如果用按钮实现,按钮作为一个系统复合控件,外部是一个 View-->UIControl的容器,内部包含了UILabel和UIImage,以及一些排版规则.用UIButton就很难去做一些在"赞"和"取消赞"切换时的效果. 可是我们又很需要UIButton似的事件响应机制. 怎么办? 对! 就是使用UIControl. UIControl在这里有两个突出的优势: 1.作为UIButton的父控件,具有UIButton

iOS开发中仿Tumblr点赞心破碎动画效果

最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画: 1.首先看下效果: 2.模仿Tumblr中的效果应用如下: 原理:使用按钮点击Action增加两个事件,通过改变背景hidden和frame,切换图片,增加动画效果等: setupUI及touch Action: <span style="font-size:14px;">- (void)setupUI { // 点击的btn UIB

iOS开发中TabBar再次点击实现刷新效果

需求 之前已经实现了自定义TabBar,如图所示: 自定义TabBar.jpeg 现在需要实现一个类似今日头条TabBar的功能 -- 如果继续点击当前TabBar的选中项,那么该界面需要刷新UITableView. 分析 既然已经自定义了TabBar,那么最简单的就是在自定义中给TabBar中需要的UITabBarButton添加事件 -- 点击就发送通知,并且将当前的索引传出去.对应的界面监听通知,拿到索引比对,如果和当前索引一致,就执行对应的操作. 实现 1. 自定义TabBar的layo

iOS开发中苹果输入手机号变用户的名字

今天我们的用户输入手机号之后变成了用户的名字,没办法获取验证码,因为手机格式不对.我还是头一次遇到这样的事情. 1.文本替换 遇到这种事情肯定去百度啊,发现还真有人和我遇到相同的情况,原来这个用户在设置->通用->键盘->文本替换把自己的手机号设置自己的名字了,这样只要在UITextField中输入自己的手机号,输入完就会变成自己的名字,出现上图的情况. 其实这个功能还是满好玩的,不过用户要是把自己的手机号设置文本替换了,那么在APP里注册就会出现问题了.当时我就想是不是微信也这样啊,

IOS开发中加载大量网络图片优化方法

IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示.比如: -(UIImage *) getImageFromURL:(NSString *)fileURL { //NSLog(@"执行图片下载函数"); UIImage * result; NSData * data = [NSData dataWithCont

浅谈iOS开发中static变量的三大作用

(1)先来介绍它的第一条也是最重要的一条:隐藏 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话,我举例来说明.我们要同时编译两个源文件,一个是a.c,另一个是main.c. 下面是a.c的内容 char a = 'A'; // global variable void msg() { printf("Hello\n"); } 下面是main.c的内容 int main(void) { extern char a; // extern v

详解IOS开发中生成推送的pem文件

详解IOS开发中生成推送的pem文件 具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://developer.apple.com/iphone/manage/overview/index.action )并点击 App IDs 2. 创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,  com.itotem.ip

iOS开发中AVPlayer的简单应用

前言 在iOS开发中,播放视频通常有两种方式,一种是使用MPMoviePlayerController(需要导入MediaPlayer.Framework),还有一种是使用AVPlayer.关于这两个类的区别简而言之就是MPMoviePlayerController使用更简单,功能不如AVPlayer强大,而AVPlayer使用稍微麻烦点,不过功能更加强大.下面这篇文章主要介绍下AVPlayer的简单应用,需要的朋友们一起来看看吧. AVPlayer的简单应用 1.引入系统框架 2.创建视频的u

IOS开发中禁止NavigationController的向右滑动返回

IOS开发中禁止NavigationController的向右滑动返回 大家在进行开法的时候细心的朋友会发现,.用后在屏幕的最左边,向右滑动,,你会发现,你的App返回到了上一个页面,这是怎么回事呢, 在你的App中输入UINavigationController ,然后按住commend键,点击鼠标,跳进去,如下图: 在UINavigationController 的属性中你会发现 红色下划线部分,你看到了UINavigationController 自带的有一个panGeesture,所以,

iOS开发中如何实现一个平滑的颜色过渡

如何从A颜色平滑的过渡到B颜色 同一个视图,随着进度或者其他过程的变化,从A颜色过渡到B颜色. 所有的颜色都是是由RGB三原色组成,在iOS开发中,通过RGB值的组合来显示不同的颜色.一次A-B其实就是RGB值的改变,如何平滑的过渡呢?那就是等比例的改变RGB值! 那么,如何获取颜色的RGB值呢? - (NSArray *)getRGBDictionaryByColor:(UIColor *)originColor { CGFloat r=0,g=0,b=0,a=0; if ([self res

IOS 开发中画扇形图实例详解

IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.