专栏首页進无尽的文章动画| 类似Windows的气泡屏保效果

动画| 类似Windows的气泡屏保效果

本文详解一款类似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变量,并保存到数组中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 聊聊iOS开发之MVVM的架构设计

    而MVVM这种新的代码组织方式就可以解决这些问题,本文就MVVM的架构设计做个简单的个人总结。

    進无尽
  • 基础篇-应用之间的跳转

    在应用A跳转到应用B,则给A、B自身自定义URL Schemes(自定义的协议头)后,通过在A中处理B的URL Schemes,就可以在A中启动B了。

    進无尽
  • 多媒体-图片、音频、视频压缩

    很多时候我们需要把一些图片、音频、视频上传到服务器,于是就有了文件压缩这个问题了,这篇文章就小结一下具体的文件压缩实现吧。

    進无尽
  • 【框架】126:springMVC框架初体验

    Java应用现在基本都是web应用,而Web层自然就是web应用中非常重要的部分了。

    刘小爱
  • SwiftUI:用枚举切换视图状

    您已经了解了如何使用常规Swift条件来呈现一种视图或另一种视图,并且我们查看了以下方式的代码:

    韦弦zhy
  • 视图、表格设计

    视图是用于包装sql查询语句的,有时候一条查询语句可能要写几十行,如果每次给服务器都要发送这么长的查询语句不太好,而且每次都要写这么长的语句也比较麻烦和消耗时间...

    端碗吹水
  • springboot系列学习(十七):springboot项目里面,springmvc里面的配置类里面配置视图的跳转

    因为继承这个这个springmvc配置的接口,那么就可以重写里面的方法,现在我们想要自定义视图的跳转,所以重写了这个视图的方法,里面写上对应的url,和我们...

    一天不写程序难受
  • setNeedsLayout和layoutIfNeeded看我就懂!

    Dwyane
  • Django学习视图(6)

    我们在浏览器请求后,Django 匹配URL 进行路由,匹配到后调用对应的视图,生成HTML代码,返回给浏览器。

    萌海无涯
  • AI综述专栏 | 孙仕亮:多视图机器学习综述

    在科学研究中,从方法论上来讲,都应先见森林,再见树木。当前,人工智能科技迅猛发展,万木争荣,更应系统梳理脉络。为此,我们特别精选国内外优秀的综述论文,开辟“AI...

    马上科普尚尚

扫码关注云+社区

领取腾讯云代金券