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

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

(0)

相关推荐

  • 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实现点赞动画特效

    本文实例为大家分享了iOS实现点赞动画特效的具体代码,供大家参考,具体内容如下 动画的基本使用 动画的实现基本上是基于对View控件和View的layer属性进行操作,对视图进行移动,尺寸变换,透明度变换,旋转等一系列操作. 关键帧动画: 动画的实现可以分为两个部分,一部分是规定动画的变化内容,比如view需要把scale从0变化到1,这个数字是相对值,即从尺寸为0变化到正常尺寸.另一个部分是规定动画的渐变时间.这样就实现了view在规定时间完成指定变化了,这个变化的过程也可以通过参数设置为非均

  • Android高级UI特效仿直播点赞动画效果

    本文给大家分享高级UI特效仿直播点赞效果-一个优美炫酷的点赞动画,具体实现代码大家参考本文. 效果图如下: 攻克难点: 心形图片的路径等走向 心形图片的控制范围 部分代码如下: 通过AbstractPathAnimator定义飘心动画控制器 @Override public void start(final View child, final ViewGroup parent) { parent.addView(child, new ViewGroup.LayoutParams(mConfig.

  • iOS自定义UIButton点击动画特效

    借鉴相关资料,整理了一个很有意思的button动画效果,iOS自定义UIButton点击动画特效 先看一下效果图: 下面贴上代码: ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end #import "ViewController.h" #import "HWButton.h" #define mainW [UIScreen m

  • iOS实现抖音点赞动画效果

    本文实例为大家分享了iOS实现抖音点赞动画的具体代码,供大家参考,具体内容如下 1. 概述 最近看到抖音点赞爱心的动画效果比较好,出于好奇,自己也研究仿照动画效果写了一个,不喜欢的朋友可不要喷我噢!!! 话不多说,先来看一下执行效果. 2. 动画分析 上面的示例效果有点快,现在来看一个慢的,然后在分析动画组成. 这回看清楚了吧,哈哈. 2.1 动画过程分析 咱们就以10秒的点赞动画来分析一下: 点赞的时候: 1.点击的时候,白色爱心逐渐变小到一定程度,然后变成红色爱心.(3秒) 2.红色爱心慢慢

  • 十个利用JavaScript实现的爱心动画特效

    目录 3d爱心跳动特效 效果展示 代码展示 线条合成的爱心动画特效 效果展示 代码展示 520爱心背景表白网页动画特效 效果展示 代码展示 爱心签到墙 效果展示 代码展示 粉色的情人节爱心飞出ui特效 效果展示 代码展示 酷炫表白爱心动画特效 效果展示 代码展示 烂漫爱心表白动画(程序员也浪漫) 效果展示 代码展示 飘落的爱心雨 效果展示 代码展示 线条的3D爱心动画 效果展示 代码展示 原生JS制作爱心表白代码 效果展示 代码展示 3d爱心跳动特效 效果展示 代码展示 <!DOCTYPE ht

  • jQuery实现分章节锚点“回到顶部”动画特效代码

    本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • IOS等待时动画效果的实现

    查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

  • JavaScript+html5 canvas实现图片破碎重组动画特效

    也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

  • Android实现Activity界面切换添加动画特效的方法

    本文以实例形式展示了Android实现Activity界面切换添加动画特效的方法,对于Android程序设计人员来说有很好的参考借鉴价值.具体方法如下: 了解Android程序设计的人应该知道,在Android 2.0之后有了overridePendingTransition(),其中里面两个参数,一个是前一个activity的退出,另一个activity的进入. 现看看下面这段示例代码: @Override public void onCreate(Bundle savedInstanceSt

随机推荐