CN110187879B - Method for realizing 3D carousel picture assembly based on WeChat applet - Google Patents
Method for realizing 3D carousel picture assembly based on WeChat applet Download PDFInfo
- Publication number
- CN110187879B CN110187879B CN201910463105.3A CN201910463105A CN110187879B CN 110187879 B CN110187879 B CN 110187879B CN 201910463105 A CN201910463105 A CN 201910463105A CN 110187879 B CN110187879 B CN 110187879B
- Authority
- CN
- China
- Prior art keywords
- array
- picture
- carousel
- imagearray
- pictures
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
The invention discloses a method for realizing a 3D carousel picture assembly based on a WeChat applet, and belongs to the technical field of computer technology and software development. The method comprises the following steps: step 1: collecting pictures through a picture collecting module to form an array imageArray [ ]; and 2, step: analyzing the data of the pictures in the array imageArray [ ] in the step 1 by using a data analysis module; and step 3: generating a 3D carousel map for the analysis data obtained in the step 2 by using a 3D carousel map display module; and 4, step 4: and completing the packaging of the 3D carousel picture assembly.
Description
Technical Field
The invention relates to the technical field of computer technology and software development, in particular to a method for realizing a 3D carousel picture assembly based on a WeChat applet
Background
WeChat applets have evolved rapidly over the years, and many mobile applications have turned to the development of applets. The number of users of WeChat is huge, so that huge traffic entrances are possessed. The method has the advantages of wide data using background, simple use, no need of downloading, realization of the concept of 'walking after use', small volume, high efficiency and the like. The method is a lightweight application development platform with extremely strong user experience. The applet colleagues have rich components and APIs, and can meet various development requirements. On the basis, 3D carousel pictures are developed, so that convenient components can be provided for developers, and users can have a more three-dimensional use effect on a carousel interface.
The use of carousel pictures is widely used in each APP and page, and aims to improve the experience of users and product innovation. The 3D carousel graph can completely replace the function of common carousel, and the switching of the 3D carousel graphs in different styles can meet various requirements.
Componentized development has become a mainstream development approach. Regardless of a mobile end or a web end, the function development can be realized more simply by utilizing a componentization form to develop functions, the reuse and the decoupling of codes can be improved, and the components have single portability, namely the components can be used along with loading, and complex basic conditions (such as an introduced style, an introduced framework and the like) do not need to be prepared for the components.
Disclosure of Invention
The embodiment of the invention provides a method for realizing a 3D carousel picture assembly based on a WeChat applet. The method is improved on the method of the common carousel picture, is different from the carousel picture formed by common swiper components, and flexibly processes the picture turning effect, time and the like by using animation. The animation using animation can flexibly apply zooming, transparency and conversion position when the carousel map rotates, and improves the flexibility and user experience of the carousel map.
In order to achieve the purpose, the invention adopts the following technical scheme:
a method for realizing a 3D carousel map component based on a WeChat applet comprises the following steps:
step 1: collecting pictures through a picture collecting module to form an array imageArray [ ];
step 2: analyzing the data of the pictures in the array imageArray [ ] in the step 1 by using a data analysis module;
and step 3: generating a 3D carousel map for the analysis data obtained in the step 2 by using a 3D carousel map display module;
and 4, step 4: and completing the packaging of the 3D carousel picture assembly.
Further, in the step 1, specifically, the method includes: the picture collection module cuts pictures which need to be displayed and are transmitted by a user in a fixed proportion, ensures that the pictures are not deformed, and stores the pictures in an array imageArray [ ].
Further, in the step 2, specifically, the method includes:
step 2.1: recording the element number imageNum by traversing picture elements in an array imageArray [ ];
step 2.2: and carrying out coordinate flipping, scaling and hierarchical processing on picture elements in the array imageArray [ ].
Further, in the step 2.2, the coordinates of the picture elements in the array imageArray [ ] are flipped, specifically:
determining that a carousel map can show 3 pictures with different angles, and changing n in rotateY (n) to obtain bilaterally symmetrical turning angles; the left and right pictures are respectively turned by the rotateY (-12deg) and rotateY (12deg), and the middle part is kept unchanged; changing the moving and reversing angles during turning, calculating the arrangement sequence according to the element number imageNum at three positions in total, taking the middle number as a central display image, and taking index-1 of the array subscripts as the middle images if the number is an even number; calculating the angle of each turn and storing the angle into an array rotaarry [ ]; then calculating the value of n in the angle rotatex (n) turned along x each time, wherein n is-45 and n is 45 on the left and right sides; the same method is stored in rotaarrx [ ].
Further, in the step 2.2, the scaling processing is performed on the picture elements in the array imageArray [ ], specifically:
judging left and right movement step lengths according to a contact of a user, and recording the movement step length (e.touch [0]. pageX-left) and the screenRate; e.touch [0]. pageX is the touch point coordinate, left is the distance dragged by the user, and screen rate is the screen scaling.
Further, in the step 2.2, hierarchical processing is performed on the picture elements in the array imageArray [ ], specifically:
determining a displayed hierarchy according to the number imageNum of pictures in the array imagearray, wherein the number of the intermediate layer is the largest, the two sides are sequentially decreased progressively, and the obtained picture hierarchy array is stored in a hierarchy array indexArr; the abscissa of each picture is determined according to the picture number imageNum, the position of each picture is stored by a mobile array posArr [ ], the middle is set as an origin 0, and the left and the right are-120 and 120 respectively.
Further, in the step 3, specifically:
using WeChat applet animation API to carry out composition; defining an animation by self; animotion [ i ]. rotateY (rotarry [ i ]), scale (scaArr [ i ], curScaArr [ i ]), left (posArr [ i ] + 'rpx'). options (opaArr [ i ]), step (); wherein rotateY is an angle of turning along the y-axis, scale is a scaling ratio, and horizontal and vertical scaling ratios are filled in respectively; left is move to next coordinate position, opacity is the setting of transparency;
by calculating the parameters and setting the animation effect, the 3D carousel map can be derived, and finally, the components are generated to be used in the project.
Compared with the prior art, the invention has the beneficial effects that:
the method is improved on the basis of a common carousel picture method, is different from a carousel picture formed by common swiper components, and flexibly processes the picture turning effect, time and the like by using animation. The animation using animation can flexibly apply zooming, transparency and conversion position when the carousel map rotates, and improves the flexibility and user experience of the carousel map.
The assembly can enable the carousel picture to have a 3D effect, the assembly is convenient to quote, the use feeling is smooth, and a user can modify the animation parameters after downloading the plug-in so as to meet the effect requirement of the 3D carousel picture required by the user.
Drawings
FIG. 1 is a component module diagram of a 3D carousel map component based on a WeChat applet in accordance with the present invention;
fig. 2 is a flowchart of an implementation method of a 3D carousel map component based on a wechat applet.
Detailed Description
The present invention will be further described with reference to the following examples, which are intended to illustrate only some, but not all, of the embodiments of the present invention. Based on the embodiments of the present invention, other embodiments used by those skilled in the art without any creative effort belong to the protection scope of the present invention.
Example 1
As shown in fig. 1-2, a method for implementing a 3D carousel map component based on a wechat applet includes the following steps:
step 1: collecting pictures through a picture collecting module to form an array imageArray [ ];
the picture collection module cuts pictures which need to be displayed and are transmitted by a user in a fixed proportion, ensures that the pictures are not deformed, and stores the pictures in an array imageArray [ ].
Step 2: analyzing the data of the pictures in the array imageArray [ ] in the step 1 by using a data analysis module;
step 2.1: recording the element number imageNum by traversing picture elements in an array imageArray [ ];
step 2.2: and carrying out coordinate flipping, scaling and hierarchical processing on picture elements in the array imageArray [ ].
Determining that a carousel map can show 3 pictures with different angles, and changing n in rotateY (n) to obtain bilaterally symmetrical turning angles; the left and right pictures are respectively subjected to the angle turnover of rotay (-12deg) and rotay (12deg), and the middle part is kept unchanged; changing the moving and reversing angles during turning, calculating the arrangement sequence according to the element number imageNum at three positions in total, taking the middle number as a central display image, and taking index-1 of the array subscripts as the middle images if the number is an even number; calculating the angle of each turn and storing the angle into an array rotaarry [ ]; then calculating the value of n in the angle rotatex (n) turned along x each time, wherein n is-45 and n is 45 on the left and right sides; the same method is stored in rotaarrx [ ].
Judging left and right movement step lengths according to a contact of a user, and recording the movement step length (e.touch [0]. pageX-left) and the screenRate; e.touches [0]. pageX are touch point coordinates, left is the distance dragged by the user, and screen rate is the screen scaling.
Determining a displayed hierarchy according to the number imageNum of pictures in the array imagearray, wherein the number of the intermediate layer is the largest, the two sides are sequentially decreased progressively, and the obtained picture hierarchy array is stored in a hierarchy array indexArr; the abscissa of each picture is determined according to the picture number imageNum, the position of each picture is stored by a mobile array posArr [ ], the middle is set as an origin 0, and the left and the right are-120 and 120 respectively.
And 3, step 3: and (3) generating a 3D carousel map for the analysis data obtained in the step (2) by using a 3D carousel map display module.
Animation is carried out by applying WeChat applet animation API; defining an animation by self; animotion [ i ]. rotateY (rotatArrY [ i ]), scale (scaArr [ i ], curScaArr [ i ]), left (posArr [ i ] + 'rpx'). options (opaArr [ i ]), step (); wherein rotateY is an angle of turning along the y-axis, scale is a scaling ratio, and horizontal and vertical scaling ratios are filled in respectively; left is move to next coordinate position, opacity is the setting of transparency;
by calculating the parameters and setting the animation effect, the 3D carousel map can be derived, and finally, the components are generated to be used in the project.
The method is improved on the basis of a common carousel picture method, is different from a carousel picture formed by common swiper components, and flexibly processes the picture turning effect, time and the like by using animation. The animation using animation can flexibly apply zooming, transparency and conversion position when the carousel map rotates, and improves the flexibility and user experience of the carousel map.
The assembly can enable the carousel picture to have a 3D effect, the assembly is convenient to quote, the use feeling is smooth, and a user can modify the animation parameters after downloading the plug-in so as to meet the effect requirement of the 3D carousel picture required by the user.
The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents and improvements made within the spirit and principle of the present invention are intended to be included within the scope of the present invention.
Claims (5)
1. A method for realizing 3D carousel picture assembly based on WeChat applet is characterized in that: the method comprises the following steps:
step 1: collecting pictures through a picture collecting module to form an array imageArray [ ];
and 2, step: analyzing the data of the pictures in the array imageArray [ ] in the step 1 by using a data analysis module;
and step 3: generating a 3D carousel map for the analysis data obtained in the step 2 by using a 3D carousel map display module;
and 4, step 4: completing the packaging of the 3D carousel picture assembly;
in the step 2, the method specifically comprises the following steps:
step 2.1: recording the element number imageNum by traversing picture elements in an array imageArray [ ];
step 2.2: carrying out coordinate overturning, scaling and hierarchy processing on picture elements in the array imageArray [ ];
in the step 2.2, the coordinate of the picture element in the array imageArray [ ] is flipped, specifically:
determining that a carousel map can show 3 pictures with different angles, and changing n in rotateY (n) to obtain bilaterally symmetrical turning angles; the left and right pictures are respectively subjected to the angle turnover of rotay (-12deg) and rotay (12deg), and the middle part is kept unchanged; changing the moving and reversing angles during turning, calculating the arrangement sequence according to the element number imageNum at three positions in total, taking the middle number as a central display image, and taking index-1 of the array subscripts as the middle images if the number is an even number; calculating the angle of each turn and storing the angle into an array rotaarry [ ]; then calculating the value of n in the angle rotatex (n) turned along x each time, wherein n is-45 and n is 45 on the left and right sides; the same method is stored in rotaarrx [ ].
2. The method for implementing 3D carousel map component based on WeChat applet according to claim 1, wherein: in the step 1, the method specifically comprises the following steps: the picture collection module cuts pictures which need to be displayed and are transmitted by a user in a fixed proportion, ensures that the pictures are not deformed, and stores the pictures in an array imageArray [ ].
3. The method for implementing 3D carousel map component based on WeChat applet according to claim 1, wherein: in the step 2.2, the scaling processing is performed on the picture elements in the array imageArray [ ], specifically:
judging left and right movement step lengths according to a contact of a user, and recording the movement step length (e.touch [0]. pageX-left) and the screenRate; e.touch [0]. pageX is the touch point coordinate, left is the distance dragged by the user, and screen rate is the screen scaling.
4. The method for implementing 3D carousel map component based on WeChat applet according to claim 1, wherein: in the step 2.2, hierarchical processing is performed on picture elements in the array imageArray [ ], specifically:
determining a displayed hierarchy according to the number imageNum of pictures in the array imagearray, wherein the number of the intermediate layer is the largest, the two sides are sequentially decreased progressively, and the obtained picture hierarchy array is stored in a hierarchy array indexArr; the abscissa of each picture is determined according to the picture number imageNum, the position of each picture is stored by a mobile array posArr [ ], the middle is set as an origin 0, and the left and the right are-120 and 120 respectively.
5. The method for implementing 3D carousel map component based on WeChat applet according to claim 1, wherein: in the step 3, the method specifically comprises the following steps:
using WeChat applet animation API to carry out composition; defining an animation by self; animotion [ i ]. rotateY (rotarry [ i ]), scale (scaArr [ i ], curScaArr [ i ]), left (posArr [ i ] + 'rpx'). options (opaArr [ i ]), step (); wherein rotateY is an angle of turning along the y-axis, scale is a scaling ratio, and horizontal and vertical scaling ratios are filled in respectively; left is the move to the next coordinate position and opacity is the setting for transparency.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910463105.3A CN110187879B (en) | 2019-05-30 | 2019-05-30 | Method for realizing 3D carousel picture assembly based on WeChat applet |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910463105.3A CN110187879B (en) | 2019-05-30 | 2019-05-30 | Method for realizing 3D carousel picture assembly based on WeChat applet |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110187879A CN110187879A (en) | 2019-08-30 |
| CN110187879B true CN110187879B (en) | 2022-06-21 |
Family
ID=67718964
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910463105.3A Active CN110187879B (en) | 2019-05-30 | 2019-05-30 | Method for realizing 3D carousel picture assembly based on WeChat applet |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110187879B (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106412256A (en) * | 2016-09-13 | 2017-02-15 | 野拾（北京）电子商务有限公司 | Picture carousel method and system based on mobile phone gyroscope positioning |
| CN107861680A (en) * | 2017-10-18 | 2018-03-30 | 福建中金在线信息科技有限公司 | Zoom method, device and the mobile terminal of carousel figure |
| CN109144615A (en) * | 2018-09-29 | 2019-01-04 | 北京城市网邻信息技术有限公司 | A kind of information issuing method, device, equipment and storage medium |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100058248A1 (en) * | 2008-08-29 | 2010-03-04 | Johnson Controls Technology Company | Graphical user interfaces for building management systems |
| CN106708526A (en) * | 2016-12-28 | 2017-05-24 | 金蝶软件（中国）有限公司 | Carousel graph setting method and system |
| CN107391152B (en) * | 2017-07-31 | 2020-07-24 | 北京酷我科技有限公司 | Method for realizing focal point alternate-playing animation effect on Mac |
| CN107808277A (en) * | 2017-09-27 | 2018-03-16 | 风变科技（深圳）有限公司 | Check card and record display methods, device, server and storage medium |
| CN107797802A (en) * | 2017-10-27 | 2018-03-13 | 福建中金在线信息科技有限公司 | Method to set up, device and the electronic equipment of carousel figure page-turning effect |
| CN109684530B (en) * | 2018-12-07 | 2024-01-30 | 新疆农垦科学院 | Information push service system based on web management and mobile phone applet application |
-
2019
- 2019-05-30 CN CN201910463105.3A patent/CN110187879B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106412256A (en) * | 2016-09-13 | 2017-02-15 | 野拾（北京）电子商务有限公司 | Picture carousel method and system based on mobile phone gyroscope positioning |
| CN107861680A (en) * | 2017-10-18 | 2018-03-30 | 福建中金在线信息科技有限公司 | Zoom method, device and the mobile terminal of carousel figure |
| CN109144615A (en) * | 2018-09-29 | 2019-01-04 | 北京城市网邻信息技术有限公司 | A kind of information issuing method, device, equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110187879A (en) | 2019-08-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP1854065B1 (en) | User interfaces | |
| US9530242B2 (en) | Point and click lighting for image based lighting surfaces | |
| JP2024505995A (en) | Special effects exhibition methods, devices, equipment and media | |
| US9176662B2 (en) | Systems and methods for simulating the effects of liquids on a camera lens | |
| JP2013534656A (en) | Adaptive and innovative mobile device street view | |
| CN108133454B (en) | Space geometric model image switching method, device and system and interaction equipment | |
| CN104182999A (en) | Panoramic animation jumping method and system | |
| US20220283697A1 (en) | Video editing and playing method, apparatus, device and medium | |
| CN111127603B (en) | Animation generation method and device, electronic equipment and computer readable storage medium | |
| JP7467780B2 (en) | Image processing method, apparatus, device and medium | |
| CN110187879B (en) | Method for realizing 3D carousel picture assembly based on WeChat applet | |
| US9460549B2 (en) | Method and device for generating perspective image | |
| WO2024051756A1 (en) | Special effect image drawing method and apparatus, device, and medium | |
| CN109598672B (en) | Map road rendering method and device | |
| CN112860839A (en) | Water environment quality real-time monitoring method and device based on Unity3D | |
| US9436372B2 (en) | Method and apparatus indicating scroll position on a display | |
| WO2023125132A1 (en) | Special effect image processing method and apparatus, and electronic device and storage medium | |
| Letić et al. | Real-time map projection in virtual reality using WebVR | |
| CN114138141A (en) | Display method and device and electronic equipment | |
| CN105913473A (en) | Realization method and system of scrolling special efficacy | |
| CN109285207A (en) | Animation method, device, computer equipment and storage medium | |
| Kataoka et al. | Procedural animation of waving cartoon hair by emulating animator's techniques | |
| CN116630503A (en) | Digital scene 3D model rendering system and method | |
| Fang et al. | Smooth Fly-to-Orbiting Animation for Viewing Points of Interest in 3D | |
| Sgouros | DYNAMIC GENERATION AND EXPLORATION OF SYMMETRICAL TEXTURES FROM REAL-TIME CAMERA INPUT ON MOBILE DEVICES |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |