一种3D效果轮播图的设计方法与流程

专利2026-02-12  25


本发明涉及互联网及移动端,特别涉及一种3d效果轮播图的设计方法。


背景技术:

1、在当前移动应用开发领域,轮播图作为一种流行的视觉元素,被广泛用于展示产品图像、广告或新闻头条。传统的2d轮播图因其实现简单和资源消耗低而备受开发者欢迎。然而,随着移动设备图形处理能力的提升和用户对界面体验要求的提高,2d轮播图在视觉吸引力和用户互动性方面逐渐显得不足。为了提供更加沉浸和引人入胜的用户体验,开发者开始尝试实现3d轮播图展示效果。

2、现有3d轮播图实现通常面临性能瓶颈,尤其是在低配置的移动设备上,渲染多个3d图像时容易造成卡顿和延迟,影响用户体验。此外,许多现有的3d轮播图解决方案缺乏灵活性,对图像格式和互动设计的支持有限,这增加了开发者在不同场景下应用这些技术的难度。由于这些限制,开发者往往需要在轮播图的吸引力和应用性能之间做出妥协,这限制了创新和提供高质量应用的可能性。因此,设计一个高性能、易于集成、支持多种交互式设计的3d轮播图对于移动应用开发者来说具有重大的实际和商业价值。


技术实现思路

1、本技术的目的在于提出一种3d效果轮播图的设计方法,以解决相关技术中轮播图技术的局限性,包括2d轮播技术的不足和现有3d轮播技术缺乏灵活性、集成步骤繁琐、对图像格式和互动设计支持有限的特点。

2、为了解决上述技术问题,本技术提供一种3d效果轮播图的设计方法,包括以下步骤:

3、s1、创建一个继承自瀑布流布局类(uicollectionviewflowlayout)的子类的自定义布局类(customflowlayout);

4、s2、在步骤s1创建的自定义布局类中重写区域中元素的布局属性方法(layoutattributesforelementsinrect)来应用3d效果;

5、s3、创建一个新的瀑布流元素子类对象,在其中定义轮播图的内容;例如图片。

6、s4、创建一个包含瀑布流类的视图控制器,并使用自定义布局类作为其布局;

7、s5、使用定时器或其他机制来周期性地滚动到下一个轮播项,通过修改内容偏移量(contentoffset)属性来实现图片的自动轮播。

8、进一步的,步骤s2中,采用转动动画(catransform3d)来实现轮播图片的3d转动效果。

9、进一步的,采用转动动画(catransform3d)来实现轮播图片的3d转动效果的具体步骤包括:

10、s21、初始化一个属性(attributes)数组,用来接受父类中为给定矩形区域(rect)所计算出的所有元素的布局属性数组;

11、s22、定义一个绘制区域结构体(cgrect)的可视化区域(visiblerect),代表瀑布流对象(collectionview)当前可视区域的矩形;其中,结构体的可视化区域的原点设置为瀑布流对象的偏移量用来表示当前滚动位置,结构体可视化区域的大小设置为瀑布流对象的尺寸用来表示大小,通常是屏幕可视区域的大小;

12、s23、遍历属性数组中的每一个布局属性;

13、s24、检查当前循环中的属性的大小和位置判断是否和给定的矩形区域发生重叠,确保当这个条件成立即发生重叠时,才进行后续操作;

14、s25、定义一个浮点类型的距离,用来表示属性中心点x坐标与可视区域中心点x坐标之间的水平距离;

15、s26、定义一个浮点类型的标准距离用来标准化水平距离,标准化的具体操作是用水平距离除以每个瀑布流元素的宽度加上最小瀑布流元素间的间隔,得到一个相对于瀑布流元素宽度和间隔的标准化距离;

16、s27、比较水平距离的绝对值即瀑布流元素的中心到可视区域中心的绝对距离和瀑布流对象的宽度,只有当瀑布流元素的中心到可视区域中心的绝对距离小于瀑布流对象的宽度时,才进行后续的变换效果;

17、s28、定义一个缩放因子,其中缩放因子的具体计算方式是:1减去标准水平距离的绝对值的差值乘以0.3再加上1的和,其中,当瀑布流元素的中心越接近可视区域的中心,缩放因子的缩放值就越接近1.3(1+0.3);而远离中心的瀑布流元素会有一个更加接近1的缩放值;应当理解的是,这里所述的1.3并不是一个固定值,而是可以依据实际使用场景和展示效果进行调整的粗略值;

18、s29、使用s28中计算的缩放因子值对布局属性进行三维缩放变换;在x和y轴上都应用了相同的缩放因子,而在z轴上没有变化(保持为1.0);设置布局属性元素的z坐标值为1(z坐标的默认值是0),确保具有变换效果的项目在视觉上位于其他没有被变换的项目的上方;

19、s30、方法返回包含所有已处理(可能应用了缩放和z坐标)布局属性的数组属性集合;这样,当瀑布流类使用这些属性时,就会按照这些属性来布局它的瀑布流元素。

20、进一步的,步骤s3中创建一个新的瀑布流元素子类对象定义轮播图内容的具体步骤包括:

21、s31、声明一个图片展示组件用来展示轮播图片;

22、s32、初始化所述新的瀑布流元素对象并创建实例;

23、s33、创建图片展示组件类的实例化对象用来作为显示图片的控件,设置显示图片的控件的大小和位置参数来匹配瀑布流元素子类对象的边界大小属性;

24、s34、设置轮播图片展示时的填充模式并裁剪超出边界的部分;

25、s35、添加显示图片的控件到视图层级,这里添加到瀑布流元素子类对象的内容视图(contentview)属性上,用来承载自定义的内容;

26、s36、返回初始化后的瀑布流元素实例;

27、s37、提供一个公共接口来设定瀑布流元素实例中的图片,参数为一个图片类型对象或者一个网络图片的链接,将图片渲染在图片显示控件上。

28、进一步的,所述步骤s4包括:

29、s41、创建并初始化一个类型为自定义布局类的实例化对象;

30、s42、创建并初始化一个类型为瀑布流的实例化对象,并基于当前的控制器视图设置好瀑布流实例化对象的大小和位置参数;

31、s43、将自定义布局对象作为瀑布流对象的布局依据;

32、s44、将控制器作为瀑布流对象的数据源对象和代理对象,其中控制器遵守瀑布流对象的协议并提供必要的方法来供集合视图查询所需要展示的轮播数据;

33、s45、将步骤s3中定义好的瀑布流元素类注册到集合视图中并设置好重用标识符用于数据源方法中重用单元格;

34、s46、创建好轮播图的数据源数组,其中数据源数组中需要包含轮播图片的信息,其中,轮播图片是存储在本地的静态图片或者网络图片,将图片渲染至步骤s3中的图片显示控件;

35、s47、将步骤s4中创建好的瀑布流对象添加到控制器的根视图上,确保瀑布流对象能在当前视图控制器的视图层级中被渲染和显示。

36、进一步的,所述步骤s5包括:

37、s51、创建并初始化一个计时器(nstimer)实例化对象,用来执行周期性的操作;

38、其中,定时器触发的时间间隔为3.0秒,表示每3.0秒调用一次相关滚动动画的函数方法,重复参数设置为yes表示定时器会不断重复触发。

39、s52、获取步骤s4中瀑布流实例化对象的水平滚动偏移量(currentoffset.x);

40、s53、计算下一个应当滚动到的偏移量即下一个元素的位置,具体数值是当前偏移量加上集合视图的宽度;

41、s54、检查新的偏移量是否超出了集合视图内容的宽度,即判断新的偏移量是否是最后一个元素的后面,如果是,将偏移量重置为0,这样就可以回到第一个元素;

42、s55、使用设置偏移量方法(setcontentoffset)更新集合视图的偏移量,动画参数(animated)设置为yes表示滚动将带有动画效果。

43、进一步的,检测到用户的滑动开始指令,则清除定时器;检测到用户的滑动结束指令,则重新开启定时器。

44、本发明的有益效果是:提出一种3d效果轮播图的设计方法,可通过单例模式管理轮播图组件关联的图片显示控件,实现应用全局管理所使用的图片显示控件,利用预设数量对需创建的图片显示控件的数量进行控制从而减少内存上的消耗。并且,使用轮播图单例管理类也可以避免频繁创建、销毁图片显示控件所带来的内存不能及时回收、内存冗余等问题,增强了应用运行的稳定性。此外,轮播图单例管理类运行于整个应用的生命周期中,随取随用,不仅能提高轮播图组件的展示效率,还简化了轮播图组件的开发过程。


技术特征:

1.一种3d效果轮播图的设计方法,其特征在于,包括以下步骤:

2.根据权利要求1所述的一种3d效果轮播图的设计方法,其特征在于:步骤s2中,采用转动动画来实现轮播图片的3d转动效果。

3.根据权利要求2所述的一种3d效果轮播图的设计方法,其特征在于:采用转动动画来实现轮播图片的3d转动效果的具体步骤包括:

4.根据权利要求3所述的一种3d效果轮播图的设计方法,其特征在于:步骤s3中创建一个新的瀑布流元素子类对象定义轮播图内容的具体步骤包括:

5.根据权利要求4所述的一种3d效果轮播图的设计方法,其特征在于:所述步骤s4包括:

6.根据权利要求5所述的一种3d效果轮播图的设计方法,其特征在于:所述步骤s5包括:

7.根据权利要求6所述的一种3d效果轮播图的设计方法,其特征在于:检测到用户的滑动开始指令,则清除定时器;检测到用户的滑动结束指令,则重新开启定时器。


技术总结
本发明公开了一种3D效果轮播图的设计方法,包括以下步骤:S1、创建一个继承自瀑布流布局类的子类的自定义布局类;S2、在步骤S1创建的自定义布局类中重写区域中元素的布局属性方法来应用3D效果;S3、创建一个新的瀑布流元素子类对象,在其中定义轮播图的内容;S4、创建一个包含瀑布流类的视图控制器,并使用自定义布局类作为其布局;S5、使用定时器或其他机制来周期性地滚动到下一个轮播项,通过修改内容偏移量属性来实现图片的自动轮播。以解决相关技术中轮播图技术的局限性,包括2D轮播技术的不足和现有3D轮播技术缺乏灵活性、集成步骤繁琐、对图像格式和互动设计支持有限的特点。

技术研发人员:邓昊
受保护的技术使用者:海纳致远数字科技(上海)有限公司
技术研发日:
技术公布日:2024/12/17
转载请注明原文地址:https://xbbs.6miu.com/read-29661.html