CN105867914A - iOS自定义UIButton类实现按钮外观及动画效果的方法 - Google Patents

Abstract

本发明涉及于iOS系统应用开发领域，提供一种iOS自定义UIButton类实现按钮外观及动画效果的方法，该方法包括：构造两个大小不同的正六边形作为原始按钮，将尺寸小的正六边形放嵌套在尺寸大的正六边形的内部当用户按住原始按钮时，沿着正六边形的边界绘制一条渐变颜色的线将两个正六边形的之间的间隙填充满，当用户按住原始按钮朝某一方向拉扯时，按钮呈现拉扯效果；用户松开手指后，原始按钮朝四周分裂成多个不同形状的六边形和一个控制按钮。本发明提出的技术方案通过按钮的外观设计及动画效果增强了用户的点击欲望，进一步提升了用户的体验。

Description

iOS自定义UIButton类实现按钮外观及动画效果的方法

技术领域

本发明属于iOS系统应用开发技术领域，特别涉及一种iOS自定义UIButton类实现按钮外观及动画效果的方法。

背景技术

App产品的界面设计往往决定了用户对该产品的第一印象。综合最近几年的界面设计方法，从视觉上来看越来越扁平，从交互上来看越来越拟物。

按钮的扁平化设计是被人们关注最多的一个设计元素，它很大程度上决定了用户点击欲望。色彩、形状、形式等都是按钮设计的决定性因素，一个按钮往往从外观上就可以看出这个按钮的功能。现在许多界面的设计，尤其是网上的UI素材都极力模仿苹果的OS风格，在这种情况下，按钮设计的重要性便被有意无意地忽视了，按钮的力量也因此而无法发挥。这就需要设计师利用色彩，形状、负空间、字体等不同元素，赋予按钮独特的视觉效果，使它们能与界面中的其他元素清晰地区别开来。

从2015年开始，按钮设计朝着“幽灵按钮”方向发展，幽灵按钮，也就是Ghost Buttons，是一个透明的按钮，通常是矩形或者圆角矩形，仅保留基本的形制，使用细线来标识边界；按钮内的文字通常使用纤细的非衬线体字体的纯文本来指明按钮功能，而不再设计复杂色彩、样式和纹理，仅以线框示意轮廓，内部只用文字示意功能，背景透出，与整个页面/背景合而为一的设计方式。“薄”和“透”是幽灵按钮的最大特色，具体地，不设底色不加纹理，按钮仅有一层薄薄的线框标明边界，确保了它作为按钮的功能性，又达成了“纤薄”的视觉美感。置于按钮之后的背景往往相对素雅，或加以纯色，或高斯模糊，或色调沉郁，这使得即使有按钮也不影响观看全图，背景得以呈现又不影响按钮的视觉表达，双方相互映衬而达成微妙的平衡。设计师在使用这种搭配之时，比起以往有了更多的自由。一则方式简单，二者处理起来并不复杂，得心应手。二则易于调整，想突出背景，只需强化图片清晰度和色彩明暗饱和，将按钮挪到视觉焦点之外，按钮内用以更加纤细的字体即可；若想突出功能，引导用户，只需加强背景模糊程度，降低明度，将标题、文案、按钮置于焦点，按钮中的字体可以适当加粗，色彩可以用得更加跳脱。

发明内容

【要解决的技术问题】

本发明的目的是提供一种iOS自定义UIButton类实现按钮外观及动画效果的方法，以增强用户的点击欲望，提升用户的体验。

【技术方案】

本发明是通过以下技术方案实现的。

本发明涉及一种iOS自定义UIButton类实现按钮外观及动画效果的方法，包括步骤：

A、构造两个大小不同的正六边形作为原始按钮，将尺寸小的正六边形嵌套在尺寸大的正六边形的内部，对尺寸小的正六边形添加边界和阴影效果；

B、当用户按住原始按钮时，沿着正六边形的边界绘制一条渐变颜色的线将两个正六边形的之间的间隙填充满，当用户按住原始按钮朝某一方向拉扯时，按钮呈现拉扯效果并转入步骤C；

C、用户松开手指后，原始按钮朝四周分裂成多个不同形状的六边形和一个控制按钮，所述分裂形成的各个六边形分布在控制按钮的四周，所述分裂形成的六边形的数量为原按钮的子功能数量；

D、当用户点击控制按钮后，所有分裂形成的六边形聚拢恢复成原始按钮。

作为一种优选的实施方式，所述步骤A中构造正六边形的方法为：载入CoreAnimation框架，使用CAShapeLayer与UIBezierPath在drawRect方法中绘制正六边形。

作为另一种优选的实施方式，所述边界的参数包括边框颜色和边框宽度，所述阴影效果的参数包括阴影的偏移尺寸、阴影颜色。

作为另一种优选的实施方式，所述控制按钮为圆形按钮，该圆形按钮通过button.layer.cornerRadius设置。

作为另一种优选的实施方式，所述步骤B中，当用户按住按钮的时间超过预设的时间阈值时，所述按钮呈现震动动画效果，所述震动动画效果通过调用iOS系统的AudioServicesPlaySystemSound方法实现。

作为另一种优选的实施方式，所述步骤B中，当用户按住按钮的时间超过预设的时间阈值时，所述按钮呈现抖动动画效果，所述抖动动画效果的实现方法为：通过CABasicAnimation创建动画对象，通过animationWithKeyPath设置抖动参数，所述抖动参数包括周期时长、抖动角度、重复次数、锚点。

作为另一种优选的实施方式，所述步骤B中，当用户按住按钮的时间超过预设的时间阈值时，所述按钮呈现屏幕破碎动画效果，所述屏幕破碎动画效果通过调用cocos2d-x引擎实现粒子效果来实现。

作为另一种优选的实施方式，所述步骤C之后还包括：当用户按住分裂出来的六边形并将其拖动到其他六边形上时，如果重叠面积大于六边形面积的一半则将这两个重叠的六边形融合成一个新的随机六边形形状的按钮。

【有益效果】

本发明提出的技术方案具有以下有益效果：

本发明通过按钮的外观设计及动画效果增强了用户的点击欲望，进一步提升了用户的体验。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的具体实施方式进行清楚、完整的描述。

本发明的实施例提供一种iOS自定义UIButton类实现按钮外观及动画效果的方法，该方法包括以下步骤。

(一)构造原始按钮。

该步骤中，构造两个大小不同的正六边形作为原始按钮，将尺寸小的正六边形嵌套在尺寸大的正六边形的内部，对尺寸小的正六边形添加边界和阴影效果。具体地，为了绘制正六边形需要引入Core Animation框架，通过使用CAShapeLayer与UIBezierPath就可以在drawRect方法中画出想要的六边形，具体实现如下：首先绘制一个shapeLayer，shapeLayer的颜色设置为黑色，起始点坐标设置为(50,50)，其他坐标点依次为(100，50)、(125，75)、(100，100)、(50，100)、(25，75)，最后将各点依次连接起来。

(二)当用户按住原始按钮时，沿着正六边形的边界绘制一条渐变颜色的线将两个正六边形的之间的间隙填充满，当用户按住原始按钮朝某一方向拉扯时，按钮呈现拉扯效果并转入步骤(三)。

该步骤中，当用户按住原始按钮时，沿着正六边形的边界绘制一条渐变颜色的线将两个正六边形的之间的间隙填充满。当用户按住原始按钮朝某一方向拉扯时呈现拉扯效果，比如往右上角拉扯，则右上角的3个点的坐标随着移动重新计算，左下角的3个顶点坐标保持不变，拉扯长度不能超过每条边的2倍长，如果超过每条边的2倍的长度则按钮自动还原为原始形状，另外，如果用户不再按住按钮，按钮也自动还原。需要说明，拉扯时的动画效果涉及到如何让按钮发生形变，用到的核心技术是CAKeyframeAnimation和贝塞尔曲线，还需要设置几个不同状态的关键帧，通过多条贝塞尔曲线描绘出这个按钮的layer，根据滑动方向，判断那些顶点的位置要移动，然后在移动到位置与原来的顶点之间绘制贝塞尔曲线，画出最新的按钮形状。

本步骤中，首先需要获取到待绘制边缘线的路径，然后新建一个CAShapeLayer类型的layer，设置layer的frame与原始按钮的frame一致，边缘线的颜色为渐变的颜色，闭环填充的颜色为白色，边缘线的类型为kCALineCapSquare，layer的路径为从贝塞尔曲线获取到形状，线条宽度为4.0f。另外，本步骤通过gradientLayer设置一条渐变颜色的线，具体地，将gradientLayer.colors设置为随机颜色，即：

Red:arc4random()％255/255.0green:arc4random()％255/255.0blue:arc4random()％255/255.0alpha:1.

并将gradientLayer.locations设置为：[(arc4random()％10/10.0f),(1.0f)]；

当渐变颜色的线填充满整个间隙后，渐变颜色线的整体变为红色，提醒用户可以将手移开了。

本步骤中，当按钮自动还原时呈现阻尼运动效果，阻尼振动是指由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动，又称减幅振动、衰减振动。不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在，在振动过程中要不断克服外界阻力做功，消耗能量，振幅就会逐渐减小，经过一段时间，振动就会完全停下来。这种振幅随时间减小的振动称为阻尼振动.因为振幅与振动的能量有关，阻尼振动也就是能量不断减少的振动.阻尼振动是非简谐运动.阻尼振动系统属于耗散系统。这里的阻尼是指任何振动系统在振动中，由于外界作用或系统本身固有的原因引起的振动幅度逐渐下降的特性，以及此一特性的量化表征。具体地，为了呈现阻尼运动效果，首先创建阻尼动画，其中damping：阻尼，范围0-1，阻尼越接近于0弹性效果越明显，velocity：弹性复位的速度，另外还需要记录原始按钮最初的位置。

(三)用户松开手指后，原始按钮朝四周分裂成多个不同形状的六边形和一个控制按钮。

本步骤中，分裂之后形成的按钮的形状随机生成，具体地，通过(arc4random()％100,arc4random()％100)生成随机坐标，然后将六个点顺时针顺序连接得到一个六边形按钮，重复该步骤可生成多个不同形状的六边形按钮。

本步骤中，分裂形成的各个六边形分布在控制按钮的四周，其中控制按钮为圆形按钮，分裂形成的六边形的数量为原按钮的子功能数量，例如如果原始按钮用于音乐软件，包含播放/暂停、上一首、下一首、快进、快退这5个功能，通过该步骤，原始按钮会分裂成5个六边形按钮和一个圆形按钮，每个新形成的六边形按钮对应着不同的控制功能，另外，每个新形成的六边形按钮的颜色不同，各个六边形按钮分别配上不同的功能图标。

该步骤中，当用户按住分裂出来的六边形并将其拖动到其他六边形上时，如果重叠面积大于六边形面积的一半则将这两个重叠的六边形融合成一个新的随机六边形形状的按钮。

(四)当用户点击控制按钮后，所有分裂形成的六边形聚拢恢复成原始按钮。

作为一种较佳的实施方式，本实施例的步骤(二)中，当用户按住按钮的时间超过预设的时间阈值时，按钮呈现震动动画效果，具体地，震动动画效果通过调用iOS系统的AudioServicesPlaySystemSound方法实现。如果用户继续按住按钮，则按钮呈现屏幕破碎动画效果，其中屏幕破碎动画效果通过调用cocos2d-x引擎实现粒子效果来实现。

从以上实施例可以看出，本发明实施例通过按钮的外观设计及动画效果增强了用户的点击欲望，进一步提升了用户的体验。

需要说明，上述描述的实施例是本发明的一部分实施例，而不是全部实施例，也不是对本发明的限制。基于本发明的实施例，本领域普通技术人员在不付出创造性劳动前提下所获得的所有其他实施例，都属于本发明的保护范围。

Claims (8)

1.一种iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于包括步骤：

A、构造两个大小不同的正六边形作为原始按钮，将尺寸小的正六边形嵌套在尺寸大的正六边形的内部，对尺寸小的正六边形添加边界和阴影效果；

B、当用户按住原始按钮时，沿着正六边形的边界绘制一条渐变颜色的线将两个正六边形的之间的间隙填充满，当用户按住原始按钮朝某一方向拉扯时，按钮呈现拉扯效果并转入步骤C；

C、用户松开手指后，原始按钮朝四周分裂成多个不同形状的六边形和一个控制按钮，所述分裂形成的各个六边形分布在控制按钮的四周，所述分裂形成的六边形的数量为原按钮的子功能数量；

D、当用户点击控制按钮后，所有分裂形成的六边形聚拢恢复成原始按钮。

2.根据权利要求1所述的iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于所述步骤A中构造正六边形的方法为：载入Core Animation框架，使用CAShapeLayer与UIBezierPath在drawRect方法中绘制正六边形。

3.根据权利要求1所述的iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于所述边界的参数包括边框颜色和边框宽度，所述阴影效果的参数包括阴影的偏移尺寸、阴影颜色。

4.根据权利要求1所述的iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于所述控制按钮为圆形按钮，该圆形按钮通过button.layer.cornerRadius设置。

5.根据权利要求1所述的iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于所述步骤B中，当用户按住按钮的时间超过预设的时间阈值时，所述按钮呈现震动动画效果，所述震动动画效果通过调用iOS系统的AudioServicesPlaySystemSound方法实现。

6.根据权利要求1所述的iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于所述步骤B中，当用户按住按钮的时间超过预设的时间阈值时，所述按钮呈现抖动动画效果，所述抖动动画效果的实现方法为：通过CABasicAnimation创建动画对象，通过animationWithKeyPath设置抖动参数，所述抖动参数包括周期时长、抖动角度、重复次数、锚点。

7.根据权利要求1所述的iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于所述步骤B中，当用户按住按钮的时间超过预设的时间阈值时，所述按钮呈现屏幕破碎动画效果，所述屏幕破碎动画效果通过调用cocos2d-x引擎实现粒子效果来实现。

8.根据权利要求1所述的iOS自定义UIButton类实现按钮外观及动画效果的方法，其特征在于所述步骤C之后还包括：当用户按住分裂出来的六边形并将其拖动到其他六边形上时，如果重叠面积大于六边形面积的一半则将这两个重叠的六边形融合成一个新的随机六边形形状的按钮。