close
当前位置: 物联网在线 > 技术文库 > ios >

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

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

先上图

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

分析动画过程

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

第一步是里面图片的缩放动画,使用 CALayer 配合 CAKeyframeAnimation 来实现;

第二步是是里面一个圆环逐渐变大的过程,使用 CAShapeLayer 配合 CAKeyframeAnimation 来实现;

第三步是最外面一层太阳的扩散效果同样也使用 CAShapeLayer 配合 CAKeyframeAnimation 来实现;

最后是闪烁和颜色变化的的效果,使用 CABasicAnimation 和 CADisplayLink 来实现。

一、缩放动画的实现

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

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

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 就可以了,下面是实现结果和关键代码:

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

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 实现扩散的效果,下面是实现后的结果和关键代码 :

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

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") } 四、最后再将这些动画通过一定规律结合起来

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

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


(责任编辑:ioter)

用户喜欢...

iOS开发笔记 - 仿京东的加入购物车动画

请叫我死肥宅 之前APP里的加入购物车动画是最简单的UIView动画(一句代码那种),这几天正好有时间所以就跟产品那边确认优化了一下。虽然产品嘴上说让我自由发挥,但我相信没处理好肯...


快速入门指南:使用 UIViewPropertyAnimator 做动画

iOS 10 带来了一堆非常有意思的新特性,例如 UIViewPropertyAnimator 。这是一个能够改善动画处理方式的新类。 它彻底改变了我们所习惯的工作流,为动画逻辑添加了一个更为精细的控制手段。...


iOS 自定义转场动画浅谈

路漫漫其修远兮,吾将上下而求索 开门效果.gif 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不多有10天的时间,终于对转场动画了解了一点。自从 iOS 7 以后...


iOS 动画进阶 - 实现炫酷的上拉刷新动效

最近撸了一个上拉刷新的小轮子,只要遵循一个协议就能自定义自己动效的上拉刷新和加载,我自己也写了几个动效进去,下面是一个比较好的动效的实现过程 先上效果图和 github地址 ,有其...


iOS控件CHIPageControl:酷帅的翻页状态切换动画组件

CHIPageControl is a set of cool animated page controls to replace boring UIPageControl. We were inspired by Jardson Almeida dribbble shot and implemented a few more page controls. Made with :heart: by Chili . Overview Requirements iOS 9.0+ Xcode 8+...


iOS动画-从不会到熟练应用

上次总结了多线程的用法,这次再复习下iOS动画的东西.这次依然先是以api为主,因为好多人还是api好多的东西还不会用.然后中间穿插些例子,例子和代码文章中都会有.因为篇幅比较长,先列一下...


iOS 用Swipe手势和动画实现循环播放图片

主要想法 添加3个ImageView展示图片,实现图片的无限循环。 使用Swipe手势识别用户向右或向左滑动图片。 使用CATransition给ImageView.layer添加动画,展示图片更换的效果。 实现 在storyboard添加三个...


iOS开源:CardSlider - 基于卡片的 Tinder 风格动画效果及演示

Card Slider for Swift Tons of apps use a Tinder-style interface with cards that users can swipe right to 'like' or left to 'dislike'. But Yaroslav Zubko came up with an innovative and fresh approach to giving users more options besides just 'like'...


实现一个iOS渐变背景动画效果的Switch

在dribbble看到一个Switch动画效果就手痒想实现,下面就是我实现的思路。 源代码 GitHub地址: VGGradientSwitch 如果觉得不错,欢迎点star。 设计图 来自dribbble上的设计作者 Nick Buturishvili image 效果...


iOS即时通讯进阶 - CocoaAsyncSocket源码解析(Read篇)

前言: 本篇 ,将重点涉及该框架是如何利用缓冲区对数据进行读取、以及各种情况下的数据包处理,其中还包括普通的、和基于 TLS 的不同读取操作等等。 注:由于该框架源码篇幅过大,且...