CN110187879A - A kind of implementation method of the 3D carousel figure component based on wechat small routine - Google Patents
A kind of implementation method of the 3D carousel figure component based on wechat small routine Download PDFInfo
- Publication number
- CN110187879A CN110187879A CN201910463105.3A CN201910463105A CN110187879A CN 110187879 A CN110187879 A CN 110187879A CN 201910463105 A CN201910463105 A CN 201910463105A CN 110187879 A CN110187879 A CN 110187879A
- Authority
- CN
- China
- Prior art keywords
- picture
- carousel
- array
- imagearray
- small routine
- 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.)
- Granted
Links
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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The implementation method of the invention discloses a kind of 3D carousel figure component based on wechat small routine, belongs to computer technology and technical field of software development.The following steps are included: step 1: being collected pictures, formed array imageArray [] by picture collection module；Step 2: being parsed using data of the data resolution module to the picture in the array imageArray [] in step 1；Step 3: 3D carousel figure being generated to parsing data obtained in step 2 using 3D carousel figure display module；Step 4: completing the encapsulation of 3D carousel figure component.
Description
Technical field
The present invention relates to computer technologies and technical field of software development, more particularly to a kind of small based on wechat
The implementation method of the 3D carousel figure component of program
Background technique
Wechat small routine was developed rapidly at this several years, and many mobile applications have turned to the exploitation of small routine.The user of wechat
It measures huge, therefore possesses huge traffic ingress.Not only there is vast use data background, using it is simple, it is not necessary that download can
To embody the theory of " be finished and walk ", also have that the scale of construction is small, the advantages such as high-efficient.It is a kind of lightweight and user experience
Extremely strong application development platform.Small routine colleague has component abundant and API, can satisfy various exploitation demands.In this base
The exploitation that 3D carousel figure is carried out on plinth, which is capable of providing, gives developer convenient and fast component, possesses user more at carousel interface
Three-dimensional using effect.
The use of carousel figure is all widely used in each APP and the page, in order to promote the experience sense and product of user
Innovation.3D carousel figure is fully able to replace the function of common carousel, and the switching of the 3D carousel figure of different patterns can expire
The a variety of demands of foot.
Module Development Method has become a kind of mainstream development scheme.Either mobile terminal or web terminal utilize modularization shape
Formula goes the realization functional development that development function can be conciser, can be improved the reuse and decoupling of code, and component, which has, individually may be used
Transplantability, i.e., " with load with ", do not need to prepare complicated basic condition (such as introducing pattern, introducing frame) for it.
Summary of the invention
The implementation method of the embodiment of the invention provides a kind of 3D carousel figure component based on wechat small routine.This method is
It improves in the method for common carousel figure, different from the carousel figure that common swiper component is constituted, specifically uses
Animation has carried out flexible processing to rollover effect, the time etc. of picture.It can be to carousel using the animation of animation
It is zoomed in and out when figure rotation, transparency, the flexible utilization for converting position, improves the flexibility and user experience of carousel figure.
To achieve the goals above, the invention adopts the following technical scheme:
A kind of implementation method of the 3D carousel figure component based on wechat small routine, comprising the following steps:
Step 1: being collected pictures, formed array imageArray [] by picture collection module；
Step 2: being solved using data of the data resolution module to the picture in the array imageArray [] in step 1
Analysis；
Step 3: 3D carousel figure being generated to parsing data obtained in step 2 using 3D carousel figure display module；
Step 4: completing the encapsulation of 3D carousel figure component.
Further, in the step 1, specifically: the picture that the needs that picture collection module is passed to user are shown
Cutting out for ratio is fixed, guarantees that picture is indeformable, and picture is deposited into array imageArray [].
Further, in the step 2, specifically:
Step 2.1: by picture element in traversal array imageArray [], recording element number imageNum；
Step 2.2: coordinate overturning, scaling and level being carried out for the picture element in array imageArray [] and carried out
Processing.
Further, in the step 2.2, coordinate is carried out for the picture element in array imageArray [] and is turned over
Turn, specifically:
Determine that a carousel figure can show the picture of 3 different angles, n is obtained symmetrical in change rotateY (n)
Flip angle；The picture on the left side and the right carries out the angle overturning of rotateY (- 12deg) and rotateY (12deg) respectively, in
Between remain unchanged；Mobile and reversion angle is changed when overturning, and a total of three position is counted according to element number imageNum
The sequence for calculating arrangement, takes display diagram centered on mediant, if even number, then array index index-1 are middle graph；Meter
The angle overturn every time is calculated to be deposited into array rotateArrY []；The angle overturn every time along x is calculated again
N value in rotateX (n), the right and left n=-45 and n=45；Same method was stored in rotateArrX [].
Further, in the step 2.2, place is zoomed in and out for the picture element in array imageArray []
Reason, specifically:
The judgement for move left and right according to the contact of user step-length records mobile step-length moveLength=
(e.touches[0].pageX-left)*screenRate；E.touches [0] .pageX is contact coordinate, and left is user
The distance of dragging, screenRate are screen scaling ratio.
Further, in the step 2.2, the picture element in array imageArray [] is carried out at level
Reason, specifically:
The level of display is determined according to the number imageNum of picture in array imageaArray [], middle layer series is most
Greatly, both sides are successively successively decreased, in obtained picture level array deposit level array indexArr []；According to picture number
ImageNum determines the abscissa of each picture, with the mobile position for array posArr [] store each picture, intermediate
It is set as origin 0, left and right is -120 and 120 respectively.
Further, in the step 3, specifically:
With wechat small routine animation API:animation, it is patterned；Oneself defines an animation animotion；
Animotion=animotion [i] .rotateY (rotatArrY [i]) .scale (scaArr [i], curScaArr [i])
.left(posArr[i]+'rpx').opacity(opaArr[i]).step()；Wherein rotateY is overturn along y-axis
Angle, scale are scalings, are respectively filled in transverse and longitudinal scaling；Left is moved to next coordinate position, opacity
It is the setting of transparency；
The calculating of the above parameter and the setting of animation effect are carried out, 3D carousel figure can be exported, ultimately produce component, so as to
It uses in the project.
Compared with the prior art, the invention has the beneficial effects that:
The present invention is improved in the method for common carousel figure, the carousel constituted different from common swiper component
Figure, has specifically used animation to carry out flexible processing to rollover effect, the time etc. of picture.Use the dynamic of animation
Draw can to carousel figure rotate when zoom in and out, transparency, convert position flexible utilization, improve carousel figure flexibility and
User experience.
The invention of the component can make carousel figure have 3D effect, and component reference is convenient, and use feeling is smooth, user's downloading
The inside animation parameters can be modified after the plug-in unit to meet the effect demand of the 3D carousel figure of oneself needs.
Detailed description of the invention
Fig. 1 is a kind of assembly module schematic diagram of 3D carousel figure component based on wechat small routine of the invention；
Fig. 2 is a kind of flow chart of the implementation method of 3D carousel figure component based on wechat small routine of the invention.
Specific embodiment
The present invention will be further described with reference to the examples below, and described embodiment is only present invention a part
Embodiment is not whole embodiment.Based on the embodiments of the present invention, those skilled in the art are not making
Other embodiments used obtained, belong to protection scope of the present invention under the premise of creative work.
Embodiment 1
As shown in Figs. 1-2, a kind of implementation method of the 3D carousel figure component based on wechat small routine, comprising the following steps:
Step 1: being collected pictures, formed array imageArray [] by picture collection module；
Cutting out for ratio is fixed in the picture that the needs that picture collection module is passed to user are shown, guarantees that picture is constant
Shape, and picture is deposited into array imageArray [].
Step 2: being solved using data of the data resolution module to the picture in the array imageArray [] in step 1
Analysis；
Step 2.1: by picture element in traversal array imageArray [], recording element number imageNum；
Step 2.2: coordinate overturning, scaling and level being carried out for the picture element in array imageArray [] and carried out
Processing.
Determine that a carousel figure can show the picture of 3 different angles, n is obtained symmetrical in change rotateY (n)
Flip angle；The picture on the left side and the right carries out the angle overturning of rotateY (- 12deg) and rotateY (12deg) respectively, in
Between remain unchanged；Mobile and reversion angle is changed when overturning, and a total of three position is counted according to element number imageNum
The sequence for calculating arrangement, takes display diagram centered on mediant, if even number, then array index index-1 are middle graph；Meter
The angle overturn every time is calculated to be deposited into array rotateArrY []；The angle overturn every time along x is calculated again
N value in rotateX (n), the right and left n=-45 and n=45；Same method was stored in rotateArrX [].
The judgement for move left and right according to the contact of user step-length records mobile step-length moveLength=
(e.touches[0].pageX-left)*screenRate；E.touches [0] .pageX is contact coordinate, and left is user
The distance of dragging, screenRate are screen scaling ratio.
The level of display is determined according to the number imageNum of picture in array imageaArray [], middle layer series is most
Greatly, both sides are successively successively decreased, in obtained picture level array deposit level array indexArr []；According to picture number
ImageNum determines the abscissa of each picture, with the mobile position for array posArr [] store each picture, intermediate
It is set as origin 0, left and right is -120 and 120 respectively.
Step 3: 3D carousel figure being generated to parsing data obtained in step 2 using 3D carousel figure display module.
With wechat small routine animation API:animation, it is patterned；Oneself defines an animation animotion；
Animotion=animotion [i] .rotateY (rotatArrY [i]) .scale (scaArr [i], curScaArr [i])
.left(posArr[i]+'rpx').opacity(opaArr[i]).step()；Wherein rotateY is overturn along y-axis
Angle, scale are scalings, are respectively filled in transverse and longitudinal scaling；Left is moved to next coordinate position, opacity
It is the setting of transparency；
The calculating of the above parameter and the setting of animation effect are carried out, 3D carousel figure can be exported, ultimately produce component, so as to
It uses in the project.
The present invention is improved in the method for common carousel figure, the carousel constituted different from common swiper component
Figure, has specifically used animation to carry out flexible processing to rollover effect, the time etc. of picture.Use the dynamic of animation
Draw can to carousel figure rotate when zoom in and out, transparency, convert position flexible utilization, improve carousel figure flexibility and
User experience.
The invention of the component can make carousel figure have 3D effect, and component reference is convenient, and use feeling is smooth, user's downloading
The inside animation parameters can be modified after the plug-in unit to meet the effect demand of the 3D carousel figure of oneself needs.
The foregoing is merely illustrative of the preferred embodiments of the present invention, is not intended to limit the invention, all in essence of the invention
Made any modifications, equivalent replacements, and improvements etc., should all be included in the protection scope of the present invention within mind and principle.
Claims (7)
1. a kind of implementation method of the 3D carousel figure component based on wechat small routine, it is characterised in that: the following steps are included:
Step 1: being collected pictures, formed array imageArray [] by picture collection module；
Step 2: being parsed using data of the data resolution module to the picture in the array imageArray [] in step 1；
Step 3: 3D carousel figure being generated to parsing data obtained in step 2 using 3D carousel figure display module；
Step 4: completing the encapsulation of 3D carousel figure component.
2. a kind of implementation method of 3D carousel figure component based on wechat small routine according to claim 1, feature exist
In: in the step 1, specifically: ratio is fixed in the picture that the needs that picture collection module is passed to user are shown
It cuts out, guarantees that picture is indeformable, and picture is deposited into array imageArray [].
3. a kind of implementation method of 3D carousel figure component based on wechat small routine according to claim 1, feature exist
In: in the step 2, specifically:
Step 2.1: by picture element in traversal array imageArray [], recording element number imageNum；
Step 2.2: the picture element in array imageArray [] is carried out at coordinate overturning, scaling and level
Reason.
4. a kind of implementation method of 3D carousel figure component based on wechat small routine according to claim 3, feature exist
In: in the step 2.2, coordinate overturning is carried out for the picture element in array imageArray [], specifically:
It determines that a carousel figure can show the picture of 3 different angles, changes n in rotateY (n) and obtain symmetrical overturning
Angle；The picture on the left side and the right carries out the angle overturning of rotateY (- 12deg) and rotateY (12deg) respectively, and centre is protected
It holds constant；Mobile and reversion angle is changed when overturning, and a total of three position is calculated according to element number imageNum
The sequence of arrangement takes display diagram centered on mediant, if even number, then array index index-1 are middle graph；It calculates
The angle overturn every time is deposited into array rotateArrY []；The angle rotateX (n) overturn every time along x is calculated again
In n value, the right and left n=-45 and n=45；Same method was stored in rotateArrX [].
5. a kind of implementation method of 3D carousel figure component based on wechat small routine according to claim 3, feature exist
In: in the step 2.2, processing is zoomed in and out for the picture element in array imageArray [], specifically:
The judgement for move left and right according to the contact of user step-length records mobile step-length moveLength=(e.touches
[0].pageX-left)*screenRate；E.touches [0] .pageX is contact coordinate, and left is the distance that user pulls,
ScreenRate is screen scaling ratio.
6. a kind of implementation method of 3D carousel figure component based on wechat small routine according to claim 3, feature exist
In: in the step 2.2, level processing is carried out for the picture element in array imageArray [], specifically:
The level of display is determined according to the number imageNum of picture in array imageaArray [], middle layer series is maximum, and two
Side is successively successively decreased, in obtained picture level array deposit level array indexArr []；According to picture number imageNum come
The abscissa for determining each picture, with the mobile position for array posArr [] store each picture, intermediate settings are origin
0, left and right is -120 and 120 respectively.
7. a kind of implementation method of 3D carousel figure component based on wechat small routine according to claim 1, feature exist
In: in the step 3, specifically:
With wechat small routine animation API:animation, it is patterned；Oneself defines an animation animotion；
Animotion=animotion [i] .rotateY (rotatArrY [i]) .scale (scaArr [i], curScaArr [i])
.left(posArr[i]+'rpx').opacity(opaArr[i]).step()；Wherein rotateY is overturn along y-axis
Angle, scale are scalings, are respectively filled in transverse and longitudinal scaling；Left is moved to next coordinate position, opacity
It is the setting of 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 true CN110187879A (en) | 2019-08-30 |
| CN110187879B 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 (9)
| 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 |
| CN106412256A (en) * | 2016-09-13 | 2017-02-15 | 野拾（北京）电子商务有限公司 | Picture carousel method and system based on mobile phone gyroscope positioning |
| CN106708526A (en) * | 2016-12-28 | 2017-05-24 | 金蝶软件（中国）有限公司 | Carousel graph setting method and system |
| CN107391152A (en) * | 2017-07-31 | 2017-11-24 | 北京酷我科技有限公司 | A kind of method for realizing focus chart carousel animation effect on Mac |
| CN107797802A (en) * | 2017-10-27 | 2018-03-13 | 福建中金在线信息科技有限公司 | Method to set up, device and the electronic equipment of carousel figure page-turning effect |
| CN107808277A (en) * | 2017-09-27 | 2018-03-16 | 风变科技（深圳）有限公司 | Check card and record display methods, device, server and storage medium |
| 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 |
| CN109684530A (en) * | 2018-12-07 | 2019-04-26 | 石河子大学 | Information Push Service system based on web-based management and the application of mobile phone small routine |
-
2019
- 2019-05-30 CN CN201910463105.3A patent/CN110187879B/en active Active
Patent Citations (9)
| 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 |
| CN106412256A (en) * | 2016-09-13 | 2017-02-15 | 野拾（北京）电子商务有限公司 | Picture carousel method and system based on mobile phone gyroscope positioning |
| CN106708526A (en) * | 2016-12-28 | 2017-05-24 | 金蝶软件（中国）有限公司 | Carousel graph setting method and system |
| CN107391152A (en) * | 2017-07-31 | 2017-11-24 | 北京酷我科技有限公司 | A kind of method for realizing focus chart carousel animation effect on Mac |
| CN107808277A (en) * | 2017-09-27 | 2018-03-16 | 风变科技（深圳）有限公司 | Check card and record display methods, device, server and storage medium |
| CN107861680A (en) * | 2017-10-18 | 2018-03-30 | 福建中金在线信息科技有限公司 | Zoom method, device and the mobile terminal of carousel figure |
| CN107797802A (en) * | 2017-10-27 | 2018-03-13 | 福建中金在线信息科技有限公司 | Method to set up, device and the electronic equipment of carousel figure page-turning effect |
| CN109144615A (en) * | 2018-09-29 | 2019-01-04 | 北京城市网邻信息技术有限公司 | A kind of information issuing method, device, equipment and storage medium |
| CN109684530A (en) * | 2018-12-07 | 2019-04-26 | 石河子大学 | Information Push Service system based on web-based management and the application of mobile phone small routine |
Non-Patent Citations (3)
| Title |
|---|
| GOOSE LEAVES A MARK: "微信小程序实现3d轮播图效果（非swiper组件）", 《HTTPS://BLOG.CSDN.NET/LCK8989/ARTICLE/DETAILS/84431295》 * |
| R.SUPAKORN 等: "Dissemination of mutable sets of dynamic images", 《THE FIRST INTERNATIONAL CONFERENCE ON DISTRIBUTED FRAMEWORKS FOR MULTIMEDIA APPLICATIONS》 * |
| 刘嘉琳 等: "基于微信小程序的"一带一路"信息及路线动态可视化", 《北京测绘》 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110187879B (en) | 2022-06-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105808672B (en) | The dissemination method of magnanimity three dimensional point cloud based on browser | |
| Schulz et al. | The design space of implicit hierarchy visualization: A survey | |
| Kumar et al. | Visual exploration of complex time-varying graphs | |
| US8570322B2 (en) | Method, system, and computer program product for efficient ray tracing of micropolygon geometry | |
| CN112035433A (en) | Method for converting BIM model into GIS model supporting large-volume grading loading | |
| CN106898047A (en) | The adaptive network method for visualizing of oblique model and multivariate model dynamic fusion | |
| US20110050691A1 (en) | Real-time user guided optimization of general 3d data | |
| CN104658033B (en) | Global illumination method for drafting and device under multiple light courcess | |
| CN108052580A (en) | A kind of space-time data immersion visual analysis method based on multilayer related network | |
| CN109934921A (en) | The method and apparatus and storage medium that three-dimensional building model is constructed and shown | |
| CN101169871A (en) | HLOD pretreatment method facing to large scale static scene real-time rendering | |
| He et al. | Real-Time Extendible-Resolution Display of On-line Dynamic Terrain. | |
| CN112070909A (en) | Engineering three-dimensional model LOD output method based on 3D Tiles | |
| CN102298787A (en) | Control method and control system for animation object motion | |
| CN110187879A (en) | A kind of implementation method of the 3D carousel figure component based on wechat small routine | |
| CN107292937A (en) | The method and device of landform textures are set | |
| Havemann | Interactive rendering of catmull/clark surfaces with crease edges | |
| CN116302282A (en) | Matrix data visual graph generation and data processing method based on D3 | |
| Xu et al. | Research for 3D visualization of Digital City based on SketchUp and ArcGIS | |
| Rossignac | The 3D revolution: CAD access for all! | |
| CN102622773B (en) | Interactive two-dimensional shape feature corresponding method | |
| CN102243767B (en) | Creation method of mobile phone cartoon figure based on local image distortion | |
| CN100561513C (en) | The Forecasting Methodology of user's region-of-interest in the distributed pattern collaborative design | |
| Scholz et al. | Level of Detail for Real-Time Volumetric Terrain Rendering. | |
| Arge et al. | I/O-efficient contour tree simplification |
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 |