iOS动画进阶 - 手摸手教你写ShineButton动画

原创 2017年02月16日 00:32:35

移动端访问不佳,请访问我的个人博客

前段时间在github上看见一个非常nice的动画效果,可惜是安卓的,想着用swift写一个iOS版的,下下来源代码研究了一下,下面是我写代码的心路历程

先上图和demo的地址

分析动画过程

刚开始看的时候感觉这个动画很炫酷,实现起来应该挺复制的,后来我将gif图逐一分解,浏览了一下安卓的实现过程,大致了解的实现的过程,下面是一些关键的动画步骤:

  1. 第一步是里面图片的缩放动画,使用CALayer配合CAKeyframeAnimation来实现;
  2. 第二步是是里面一个圆环逐渐变大的过程,使用CAShapeLayer配合CAKeyframeAnimation来实现;
  3. 第三步是最外面一层太阳的扩散效果同样也使用CAShapeLayer配合CAKeyframeAnimation来实现;
  4. 最后是闪烁和颜色变化的的效果,使用CABasicAnimationCADisplayLink来实现。

一、缩放动画的实现

这个实现的过程相对而言比较简单,用CALayer做为mask来实现下图心形的图片,然后用CAKeyframeAnimation来实现动画,values的值为[0.4, 1, 0.9, 1],差值器模式为kCAAnimationCubic,下面是实现结果和关键代码:

public func startAnim() {
    let anim = CAKeyframeAnimation(keyPath: "transform.scale")
    anim.duration  = animDuration
    anim.values = [0.4, 1, 0.9, 1]
    anim.calculationMode = kCAAnimationCubic
    maskLayer.add(anim, forKey: "scale")
}

二、圆环扩散动画的实现

首先圆环我们用CAShapeLayer来绘制一个圆环,然后通过CAKeyframeAnimation来改变圆环的path就可以了,下面是实现结果和关键代码:

public func startAnim() {
    let anim = CAKeyframeAnimation(keyPath: "path")
    anim.duration = params.animDuration * 0.1
    let size = frame.size
    let fromPath = UIBezierPath(arcCenter: CGPoint.init(x: size.width/2, y: size.height/2), radius: 1, startAngle: 0, endAngle: CGFloat(M_PI) * 2.0, clockwise: false).cgPath
    let toPath = UIBezierPath(arcCenter: CGPoint.init(x: size.width/2, y: size.height/2), radius: size.width/2 * CGFloat(params.shineDistanceMultiple), startAngle: 0, endAngle: CGFloat(M_PI) * 2.0, clockwise: false).cgPath
    anim.delegate = self
    anim.values = [fromPath, toPath]
    anim.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)]
    anim.isRemovedOnCompletion = false
    anim.fillMode = kCAFillModeForwards
    shapeLayer.add(anim, forKey: "path")
}

三、太阳的扩散效果实现

首先我们得先算出每个太阳的位置和将要扩散到的位置,然后用CAShapeLayer绘制出太阳,用CAKeyframeAnimation实现扩散的效果,下面是实现后的结果和关键代码 :

public func startAnim() {
    let radius = frame.size.width/2 * CGFloat(params.shineDistanceMultiple*1.4)
    var startAngle: CGFloat = 0
    let angle = CGFloat(M_PI*2/Double(params.shineCount)) + startAngle
    if params.shineCount%2 != 0 {
        startAngle = CGFloat(M_PI*2 - (Double(angle)/Double(params.shineCount)))
    }
    for i in 0..<params.shineCount {
        let bigShine = shineLayers[i]
        let bigAnim = getAngleAnim(shine: bigShine, angle: startAngle + CGFloat(angle)*CGFloat(i), radius: radius)
        let smallShine = smallShineLayers[i]
        var radiusSub = frame.size.width*0.15*0.66
        if params.shineSize != 0 {
            radiusSub = params.shineSize*0.66
        }
        let smallAnim = getAngleAnim(shine: smallShine, angle: startAngle + CGFloat(angle)*CGFloat(i) - CGFloat(params.smallShineOffsetAngle)*CGFloat(M_PI)/180, radius: radius-radiusSub)
        bigShine.add(bigAnim, forKey: "path")
        smallShine.add(smallAnim, forKey: "path")
    }
    let angleAnim = CABasicAnimation(keyPath: "transform.rotation")
    angleAnim.duration = params.animDuration * 0.87
    angleAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    angleAnim.fromValue = 0
    angleAnim.toValue = CGFloat(params.shineTurnAngle)*CGFloat(M_PI)/180
    angleAnim.delegate = self
    add(angleAnim, forKey: "rotate")
}

四、最后再将这些动画通过一定规律结合起来

上图是将之前动画步骤组合起来后的效果,上面的一些代码只是部分代码,全部代码可以去我的github地址上去下在浏览,如果大家喜欢可以点一个start,有更好的想法也可以提出来,大家一起交流一下,最后谢谢大家阅读~~

版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS 点击按钮的抖动动画

#pragma mark - **************** 列表中按钮点击动画效果 -(void)shakeToShow:(UIButton *)button{     CAKeyfr...

iOS取消按钮点击时的动画效果

当存在图片或者背景图片时,点击图片往往意味着高亮,但是高亮的同时往往还伴随着按钮按下的动画效果,取消这种动画效果只需两步 Btn.adjustImageWhenHighlighted =NO; [...

iOS模仿安卓Material Design的涟漪动画按钮

首先来看看实现后的效果吧实现思路其实这个按钮的实现时分简单,我的思路是: - 用UIView + UITapGestureRecognizer 来模拟实现一个按钮的效果 - 记录每次手指点击的位置...

自定义转场动画--Swift3.0版本

转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completio...
  • hmh007
  • hmh007
  • 2016年12月23日 12:25
  • 4104

【Swift初见】Swift可选值Optionals

我们用oc开发的时候,经常会遇到null值的情况,如果不加任何判断的话可能会导致程序崩溃,swift语言添加了可选值这样的概念,基本语法如下: 可选类型: var optValue: Int? = 8...

iOS动画进阶 - 手摸手教你写 Slack 的 Loading 动画

如果移动端访问不佳,可以访问我的个人博客 前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画,看着挺炫,但是是安卓版的,寻思的着仿造着写一篇iOS版的,下面是我写这个...

手摸手教你写Slack的Loading动画

手摸手教你写Slack的Loading动画

你讨厌写selector背景了吗?手摸手教你封装个控件!

前段时间项目里要写好几个按下去状态变化的button, 于是在drawable文件夹里写了一堆文件, 想想好烦啊, 也是浪费时间,搞了一堆文件,还要起名,真心烦!一气之下, 一劳永逸, 写一个控件,各...

手摸手教你在vue-cli里面使用vuex,以及vuex简介

写在前面:这篇文章是在vue-cli里面使用vuex的一个极简demo,附带一些vuex的简单介绍。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个...
  • OBKoro1
  • OBKoro1
  • 2017年12月11日 14:23
  • 12

手摸手教你封装个selector控件!

前段时间项目里要写好几个按下去状态变化的button, 于是在drawable文件夹里写了一堆文件, 想想好烦啊, 也是浪费时间,搞了一堆文件,还要起名,真心烦!一气之下, 一劳永逸, 写一个控件,各...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS动画进阶 - 手摸手教你写ShineButton动画
举报原因:
原因补充:

(最多只允许输入30个字)