一种基于微信小程序的3D轮播图组件的实现方法技术

本发明专利技术公开了一种基于微信小程序的3D轮播图组件的实现方法，属于计算机技术与软件开发技术领域。包括以下步骤：步骤1：通过图片收集模块收集图片，形成数组imageArray[]；步骤2：利用数据解析模块对步骤1中的数组imageArray[]中的图片的数据进行解析；步骤3：利用3D轮播图展示模块对步骤2中得到的解析数据生成3D轮播图；步骤4：完成3D轮播图组件的封装。

A Realization Method of 3D Roadcasting Map Component Based on Wechat Small Program

【技术实现步骤摘要】
一种基于微信小程序的3D轮播图组件的实现方法
本专利技术涉及计算机技术与软件开发
，更具体的说是涉及一种基于微信小程序的3D轮播图组件的实现方法
技术介绍
微信小程序在这几年飞速发展，不少移动应用转向了小程序的开发。微信的用户量庞大，因此拥有巨大的流量入口。不仅具有广大的使用数据背景，使用简单、无需下载可以体现出“用完即走”的理念，还具有体量小、效率高等优势。是一种轻量级并且用户体验感极强的应用开发平台。小程序同事具有丰富的组件和API，能够满足各种开发需求。在此基础上进行3D轮播图的开发能够提供给开发者便捷的组件，还使得用户在轮播界面拥有更加立体的使用效果。轮播图的使用在各个APP和页面中都被广泛使用，为了提升用户的体验感和产品的创新。3D轮播图完全能够取代普通轮播的功能，并且不同样式的3D轮播图的切换能够满足多种需求。组件化开发已经成为一种主流开发方式。不管是移动端还是web端，利用组件化形式去开发功能可更加简明的实现功能开发，能够提高代码的重用和解耦，组件具备单个可移植性，即“随加载随用”，不需要为其准备复杂的基础条件(如引入样式、引入框架等)。
技术实现思路
本专利技术实施例提供了一种基于微信小程序的3D轮播图组件的实现方法。该方法是在普通轮播图的方法上进行改进，不同于普通的swiper组件构成的轮播图，这次使用了animation对图片的翻转效果、时间等进行了灵活处理。使用animation的动画可以对轮播图旋转时进行缩放、透明度、转换位置的灵活运用，提高了轮播图的灵活性和用户体验感。为了实现上述目的，本专利技术采用以下技术方案：一种基于微信小程序的3D轮播图组件的实现方法，包括以下步骤：步骤1：通过图片收集模块收集图片，形成数组imageArray[]；步骤2：利用数据解析模块对步骤1中的数组imageArray[]中的图片的数据进行解析；步骤3：利用3D轮播图展示模块对步骤2中得到的解析数据生成3D轮播图；步骤4：完成3D轮播图组件的封装。进一步的，在所述步骤1中，具体为：图片收集模块把用户传入的需要展示的图片进行固定比例的剪裁，保证图片不变形，并把图片存入到数组imageArray[]中。进一步的，在所述步骤2中，具体为：步骤2.1：通过遍历数组imageArray[]中图片元素，记录元素个数imageNum；步骤2.2：对于数组imageArray[]中的图片元素进行坐标翻转、缩放以及层级进行处理。进一步的，在所述步骤2.2中，对于数组imageArray[]中的图片元素进行坐标翻转，具体为：确定一个轮播图可展示3个不同角度的图片，改变rotateY(n)中n得到左右对称的翻转角度；左边和右边的图片分别进行rotateY(-12deg)和rotateY(12deg)的角度翻转，中间保持不变；翻转时移动和反转的角度进行变化，总共三个位置，根据元素个数imageNum计算出排列的顺序，取中间数作为中心展示图，若是偶数，则数组下标index-1个为中间图；计算出每次翻转的角度存入到数组rotateArrY[]中；再计算出每次沿着x翻转的角度rotateX(n)中的n值，左右两边n＝-45和n＝45；同样方法存入rotateArrX[]中。进一步的，在所述步骤2.2中，对于数组imageArray[]中的图片元素进行缩放处理，具体为：根据用户的触点进行左右移动步长的判断，记录移动的步长moveLength＝(e.touches[0].pageX-left)*screenRate；e.touches[0].pageX为触点坐标，left为用户拖拽的距离，screenRate为屏幕缩放比例。进一步的，在所述步骤2.2中，对于数组imageArray[]中的图片元素进行层级处理，具体为：根据数组imageaArray[]中图片的个数imageNum确定显示的层级，中间层级数最大，两边依次递减，得到的图片层级数组存入层级数组indexArr[]中；根据图片数量imageNum来确定每个图片的横坐标，用移动数组posArr[]进行存储每个图片的位置，中间设定为原点0，左右分别是-120和120。进一步的，在所述步骤3中，具体为：运用微信小程序动画API:animation,进行构图；自己定义一个动画animotion；animotion＝animotion[i].rotateY(rotatArrY[i]).scale(scaArr[i],curScaArr[i]).left(posArr[i]+'rpx').opacity(opaArr[i]).step()；其中rotateY是沿着y轴翻转的角度，scale是缩放比例，分别填入横纵缩放比例；left是移动到下一个坐标位置，opacity是透明度的设置；进行以上参数的计算和动画效果的设定，就能导出3D轮播图，最后生成组件，以便在项目中使用。本专利技术与现有技术相比具有的有益效果是：本专利技术是在普通轮播图的方法上进行改进，不同于普通的swiper组件构成的轮播图，这次使用了animation对图片的翻转效果、时间等进行了灵活处理。使用animation的动画可以对轮播图旋转时进行缩放、透明度、转换位置的灵活运用，提高了轮播图的灵活性和用户体验感。该组件的专利技术可以使得轮播图具有3D效果，组件引用便捷，使用感顺滑，用户下载该插件以后可修改里面动画参数以满足自己需要的3D轮播图的效果需求。附图说明图1是本专利技术的一种基于微信小程序的3D轮播图组件的组件模块示意图；图2是本专利技术的一种基于微信小程序的3D轮播图组件的实现方法的流程图。具体实施方式下面结合实施例对本专利技术作进一步的描述，所描述的实施例仅仅是本专利技术一部分实施例，并不是全部的实施例。基于本专利技术中的实施例，本领域的普通技术人员在没有做出创造性劳动前提下所获得的其他所用实施例，都属于本专利技术的保护范围。实施例1如图1-2所示，一种基于微信小程序的3D轮播图组件的实现方法，包括以下步骤：步骤1：通过图片收集模块收集图片，形成数组imageArray[]；图片收集模块把用户传入的需要展示的图片进行固定比例的剪裁，保证图片不变形，并把图片存入到数组imageArray[]中。步骤2：利用数据解析模块对步骤1中的数组imageArray[]中的图片的数据进行解析；步骤2.1：通过遍历数组imageArray[]中图片元素，记录元素个数imageNum；步骤2.2：对于数组imageArray[]中的图片元素进行坐标翻转、缩放以及层级进行处理。确定一个轮播图可展示3个不同角度的图片，改变rotateY(n)中n得到左右对称的翻转角度；左边和右边的图片分别进行rotateY(-12deg)和rotateY(12deg)的角度翻转，中间保持不变；翻转时移动和反转的角度进行变化，总共三个位置，根据元素个数imageNum计算出排列的顺序，取中间数作为中心展示图，若是偶数，则数组下标index-1个为中间图；计算出每次翻转的角度存入到数组rotateArrY[]中；再计算出每次沿着x翻转的角度rotateX(n)中的n值，左右两边n＝-45和n＝45；同样方法存入rotateArrX[]中。根据用户的触点进行左右移动步长的判断，记录本文档来自技高网...

【技术保护点】
1.一种基于微信小程序的3D轮播图组件的实现方法，其特征在于：包括以下步骤：步骤1：通过图片收集模块收集图片，形成数组imageArray[]；步骤2：利用数据解析模块对步骤1中的数组imageArray[]中的图片的数据进行解析；步骤3：利用3D轮播图展示模块对步骤2中得到的解析数据生成3D轮播图；步骤4：完成3D轮播图组件的封装。

【技术特征摘要】
1.一种基于微信小程序的3D轮播图组件的实现方法，其特征在于：包括以下步骤：步骤1：通过图片收集模块收集图片，形成数组imageArray[]；步骤2：利用数据解析模块对步骤1中的数组imageArray[]中的图片的数据进行解析；步骤3：利用3D轮播图展示模块对步骤2中得到的解析数据生成3D轮播图；步骤4：完成3D轮播图组件的封装。2.根据权利要求1所述的一种基于微信小程序的3D轮播图组件的实现方法，其特征在于：在所述步骤1中，具体为：图片收集模块把用户传入的需要展示的图片进行固定比例的剪裁，保证图片不变形，并把图片存入到数组imageArray[]中。3.根据权利要求1所述的一种基于微信小程序的3D轮播图组件的实现方法，其特征在于：在所述步骤2中，具体为：步骤2.1：通过遍历数组imageArray[]中图片元素，记录元素个数imageNum；步骤2.2：对于数组imageArray[]中的图片元素进行坐标翻转、缩放以及层级进行处理。4.根据权利要求3所述的一种基于微信小程序的3D轮播图组件的实现方法，其特征在于：在所述步骤2.2中，对于数组imageArray[]中的图片元素进行坐标翻转，具体为：确定一个轮播图可展示3个不同角度的图片，改变rotateY(n)中n得到左右对称的翻转角度；左边和右边的图片分别进行rotateY(-12deg)和rotateY(12deg)的角度翻转，中间保持不变；翻转时移动和反转的角度进行变化，总共三个位置，根据元素个数imageNum计算出排列的顺序，取中间数作为中心展示图，若是偶数，则数组下标index-1个为中间图；计算出每次翻转的角度存入到数组rotateArrY[]中；再计算出每次沿着x翻转的角度rotateX(n)中的n值，左右两边n＝-45和n＝45；同...

【专利技术属性】
技术研发人员：李钰，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川,51