气泡屏保

菜单 腾讯云
腾讯云首页

云市场

云+社区
备案控制台
云+社区
专栏问答沙龙快讯团队主页开发者手册云学院TVP
找文章 / 找答案 / 找技术大牛
写文章提问登录注册
动画| 类似Windows的气泡屏保效果
進无尽发表于進无尽的文章订阅
243
在这篇文章中：
效果
实现步骤解析
备注

本文详解一款类似Windows的气泡碰撞效果的屏保动画。

效果

效果

实现步骤解析
1、在一个for循环中随机创建3个圆的中心点，需要保证的是 这三个中心点不能彼此有重叠部分，而且必须在屏幕内部。
//不重叠 BOOL containsPoint = NO; for (int j = 0; j < ballArray.count; j++) { UIButton *btnn = ballArray[j]; if (CGRectIntersectsRect(btnn.frame,CGRectMake(cx , cy , BALL_WIDTH, BALL_WIDTH))) { containsPoint = YES; } } //在屏幕范围内 if (cx > BALL_WIDTH && cy > BALL_WIDTH && cx < SCREEN_WIDTH_NEW - BALL_WIDTH && cy < SCREEN_WIDTH_NEW - BALL_WIDTH && containsPoint == NO) { qualified = YES; }else{ continue; } 2、创建视图并把视图的中心点设置为满足条件而创建的此点。把这些视图保存在Aarray中 3、并随机给小球创建一个方向（一个很小的 CGPointMake量值），并用Barray保存这些方向addObject:[NSValue valueWithCGPoint:CGPointMake(randomX, randomY) //随机生成3个移动方向 double randomX = (double)arc4random() / ARC4RAND_MAX * 2.0f - 1.0f; double randomY = (double)arc4random() / ARC4RAND_MAX * 2.0f - 1.0f; NSLog(@"%f %f",randomX,randomY); [ballDirectionArray addObject:[NSValue valueWithCGPoint:CGPointMake(randomX, randomY)]]; 4、开启一个定时器，设置的时间间隔足够小 （本文例子中设置的为：0.004），并绑定相应的事件。 5、在定时器的事件中遍历Aarray中视图，并取出此视图的方向，如果视图碰到屏幕四边需要把对应的 x／y上的方向换成相反方向（-x／-y）。把视图的中心点在方向的左右下移动。并更新保存视图的最新方向。 for (int j = 0; j < ballArray.count; j++) { UIButton *btn = ballArray[j]; NSValue *val = [ballDirectionArray objectAtIndex:j]; CGPoint p = [val CGPointValue]; //移动方向 __block float vx = p.x; __block float vy = p.y; //掉头 if (btn.right > SCREEN_WIDTH_NEW || btn.left < 0) { vx = -vx; CGPoint p = [val CGPointValue]; p.x = vx; [ballDirectionArray setObject:[NSValue valueWithCGPoint:p] atIndexedSubscript:j]; } if (btn.bottom > SCREEN_HEIGHT_NEW || btn.top <0) { vy = -vy; CGPoint p = [val CGPointValue]; p.y = vy; [ballDirectionArray setObject:[NSValue valueWithCGPoint:p] atIndexedSubscript:j]; } //设置移动方向 btn.centerX += vx; btn.centerY += vy; 6、在定时器的事件中也要处理两球碰撞时的方向变化，并更新保存碰撞两球的的最新方向。 //两球中心点之间的距离 float distance = sqrt(pow((btn.centerX - otherbtn.centerX), 2) + pow((btn.centerY - otherbtn.centerY), 2)); if(distance <= BALL_WIDTH){ //发生了碰撞 } 备注 有时候我们在打印一些CG类型的变量是，无法打印，利用UIKIT中的API可以很方便的实现 字符串和CG变量之间的转换。 利用NSValue也可以封装很多CG变量，并保存到数组中。 本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。 发表于 2018-09-12 WindowsAPI 举报 2 分享 扫描二维码 進无尽的文章 195 篇文章32 人订阅 订阅专栏 动画| 3D空间变幻之CATransform3D的使用 动画| 魔性形变之CGAffineTransform的使用 设计模式| 创建型模式 面向对象设计中类的关系 架构概念简析及初识架构师 我来说两句 0 条评论 登录 后参与评论 上一篇：动画| 3D空间变幻之CATransform3D的使用 下一篇：面向对象设计中类的关系 相关文章 来自专栏张俊红订阅 Python数据可视化——matplotlib使用 总第57篇 01|Figure和Subplot: matplotlib的图像都位于figure对象中，相当于一块画布。figure的属性figsize是用来设置... 3465 来自专栏落影的专栏订阅 GPUImage详细解析 从源码的角度分析、学习GPUImage和OpenGL ES，这是第一篇，介绍GPUImageFilter 和 GPUImageFramebuffer。 Open... 3276 来自专栏Python小屋订阅 Python切分图像小案例（1、3、2、4象限子图互换） 首先解释上一篇文章详解Python科学计算扩展库numpy中的矩阵运算（1）最后的习题，该问题答案是10 ** 8 = 100000000，原因在于Python... 3787 来自专栏数据结构与算法订阅 洛谷P2761 软件补丁问题(状压DP,SPFA) 1042 来自专栏C#订阅 开源免费且稳定实用的.NET PDF打印组件itextSharp（.NET组件介绍之八） 在这个.NET组件的介绍系列中，受到了很多园友的支持，一些园友（如：数据之巅、 [秦时明月]等等这些大神 ）也给我提出了对应的建议，我正在努力去改正，... 5005 来自专栏点滴积累订阅 geotrellis使用（十五）使用Bokeh进行栅格数据可视化统计 Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 实现方案 ... 3297 来自专栏知识分享订阅 当年参加飞思卡尔自己写的双线识别算法 原理 先找到一个白点A,然后向右找到黑点,记录黑点的位置,以当前黑点的竖坐标位置向上判断,上面的点是什么点,如果为黑点向左找白点,如果为白点向右找黑点(找到边界... 2847 来自专栏Python小屋订阅 详解Python GUI版24点游戏制作过程 本文作者为浙江温州永嘉县教师发展中心应根球老师，电子邮箱：ycicada@163.com。 传统用扑克牌算24点游戏用于小学低中段学生训练四则运算效果不错，也可... 3275 来自专栏技术沉淀订阅 命令行工具：csvkit命令行操作csv 2286 来自专栏人工智能LeadAI订阅 Tensorflow中卷积的padding操作 之前一直对tensorflow的padding一知半解，直到查阅了tensorflow/core/kernels/ops_util.cc中的Get2dOutpu... 4049 社区 专栏文章 互动问答 技术沙龙 技术快讯 团队主页 开发者手册 活动 原创分享计划 自媒体分享计划 资源 云学院 技术周刊 社区标签 开发者实验室 关于 社区规范 免责声明 联系我们 扫码关注云+社区 Copyright © 2013-2019 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 京ICP备11018762号 京公网安备 11010802020287 扫描二维码 0daybank