CN108446118A - A method of shopping cart parabola animation is added to based on wechat small routine platform - Google Patents
A method of shopping cart parabola animation is added to based on wechat small routine platform Download PDFInfo
- Publication number
- CN108446118A CN108446118A CN201810327601.1A CN201810327601A CN108446118A CN 108446118 A CN108446118 A CN 108446118A CN 201810327601 A CN201810327601 A CN 201810327601A CN 108446118 A CN108446118 A CN 108446118A
- Authority
- CN
- China
- Prior art keywords
- animation
- bead
- added
- small routine
- shopping cart
- 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.)
- Pending
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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
It is the present invention relates to wechat small routine platform technology field, more particularly to a kind of the method for parabola animation effect occur when being added to shopping cart based on wechat small routine platform commodity.The method of the present invention is when adding commodity purchasing vehicle on the right side of click, the position and the bead position to be run to of the page where obtaining the position clicked and bead, and the bead of definition running background to click position and display, then according to the value of x in operation press formula(y=a*x*x+b*x+c)The value of y is obtained, the wherein value of a, b, c can be calculated according to starting point and end point, finally use left that can form parabolic path with top animations operation bead.The present invention solves the problems, such as do not have a kind of addition of the animation effect of the parabolically track operation of image when being added to shopping cart based on wechat small routine platform commodity.
Description
Technical field
The present invention relates to wechat small routine platform technology fields, more particularly to a kind of to be added based on wechat small routine platform commodity
There is no a kind of adding method of the animation effect of the parabolically track operation of image when Adding to Cart.
Background technology
When commodity are added to shopping cart on wechat small routine platform, most small routines all do not have animation additive effect, or
The operation of person's commodity takes the air line, and not vivid in this way, not lively, user experience is very bad;In order to solve these problems, it needs to realize
A method of lively, the vivid animation effect according to the operation of certain parabolic path addition commodity.
Invention content
There is parabola animation effect present invention solves the technical problem that being to provide when a kind of commodity are added to shopping cart
Method;Solving does not have a kind of addition of animation effect of the parabolically track operation of image when commodity are added to shopping cart
Problem.
The present invention solve above-mentioned technical problem technical solution be:
When adding commodity purchasing vehicle on the right side of click, obtaining the position of click and the position of the bead place page and bead will run
The position arrived, and the bead of definition running background to click position and display, then according to the value of x in operation press formula
(y = a * x*x + b*x +c)The value of y is obtained, the wherein value of a, b, c can be calculated according to starting point and end point, most
Use left that can form parabolic path with top animations operation bead afterwards.It is based on wechat small routine platform quotient to solve
Product do not have the problem of animation effect of the running orbit of image when being added to shopping cart.
The method specifically comprises the following steps:
Step 1: creating an items list page in wechat small routine project, data change is defined in data in js files
Carts [] is measured, by asking to service acquisition data and set in value to carts in onload methods;
Step 2: adding cart button icon in each item of the items list page and binding event addToCart;
Step 3: bead View controls are added in items list page rearmost position simultaneously, and it is invisible when initial, increase animation
Animation, left and top dynamic attribute, and defined in data in js files;
Step 4: the method addToCart defined in js files, and the index of the current positions item is obtained, according to index
And carts can get current item;
Step 5: initialization animation bead animation association attributes;
Step 6: separately writing a function startAnim to realize parabolic path animation effect, bead is transported before starting animation every time
Row arrives current click location, then starts relevant parabolic path animation;
Step 7: after animation, item is added in carts and is accelerated, final updating remote server is completed to add
Add function.
Beneficial effects of the present invention:When adding commodity purchasing vehicle on the right side of click, position and the bead institute of click are obtained
In the position that the position of the page and bead to be run to, and the bead of definition running background to click position and display,
Then formula is pressed according to the value of x in operation(y = a * x*x + b*x +c)The value of y is obtained, the wherein value of a, b, c can basis
Starting point is calculated with end point, finally left and top animations is used to run bead, and to reach, to form parabolic path dynamic
The purpose of picture.Effectively solve the when of being added to shopping cart based on wechat small routine platform commodity do not have it is a kind of vivid by throwing
The adding method of the animation effect of object line tracking operation.
Description of the drawings
The following further describes the present invention with reference to the drawings:
Fig. 1 is the flow chart of the present invention.
Specific implementation mode
As shown in Figure 1, the present invention uses following steps:
Step 1: creating an items list page in wechat small routine project, data change is defined in data in js files
Carts [] is measured, by asking to service acquisition data and set in value to carts in onload methods;Such as:
var app = getApp()
Page({
data: {
carts:[]
},
onLoad: function (options) {
// load shopping cart
var carts = util.loadCart(this, app.globalData.customerId);
this.setData({carts :carts});
}
)
Step 2: adding cart button icon in each item of the items list page and binding event addToCart;
Such as:
<view wx:for="{{carts}}" class="list-container" wx:key="index" >
<view class="list-item" data-object-id="{{item.id}}" data-index="
{{index}}">
<view class="content-box">
<!-- commodity title -->
<text class="list-title" bindtap="toDetails" data-object-id="
{{item.id}}">{{item. id }} {{item.title}}</text>
<!- addition shopping cart icon -->
<image src="../../images/ic_tab_cart_normal.png" mode="
aspectFit" data-index="{{index}}" catchtouchstart="addToCart" data-object-
id="{{item.id}}" />
</view>
</view>
</view>
Step 3: bead View controls are added in items list page rearmost position simultaneously, and it is invisible when initial, increase animation
Animation, left and top dynamic attribute, and defined in data in js files;Such as:
<!-- movement bead -->
<view class="ball" animation="{{animation}}" style="left:{{startX}}px;
top:{{startY}}px" hidden="{{ballHidden}}"></view
Defined in the data of js
Page({
data: {
startX:0, // animation surpasses beginning position
startY: 0,
endX:36, // animation end position
endY: 0,
animation: null,
ballHidden: true
},
Step 4: the method addToCart defined in js files, and the index of the current positions item is obtained, according to index
And carts can get current item;Such as:
/ * * be added to shopping cart */
addToCart: function (e) {
// 1, it initializes
var carts = this.data.carts;
var index = parseInt(e.currentTarget.dataset.index);
var item = this.data.list[index];
}
Step 5: initialization animation bead animation association attributes;Such as:
/ * * be added to shopping cart */
addToCart: function (e) {
// 1, it initializes
var carts = this.data.carts;
var index = parseInt(e.currentTarget.dataset.index);
var item = this.data.list[index];
// 2, animation is initialized
initAnim (this);
},
/**
* animation function is initialized
*/
function initAnim(this) {
this.animation = wx.createAnimation({
duration: 700,
timingFunction: 'ease',
delay: 0,
transformOrigin: this .data.startX + 'px ' + this .data.startY + '
px'
})
}
Step 6: separately writing a function startAnim to realize parabolic path animation effect, bead is transported before starting animation every time
Row arrives current click location, then starts relevant parabolic path animation;Such as:
/ * * be added to shopping cart */
addToCart: function (e) {
// 1, it initializes
var carts = this.data.carts;
var index = parseInt(e.currentTarget.dataset.index);
var item = this.data.list[index];
// 2, animation is initialized
initAnim (this);
// 3, start animation
startAnim(e, this);
},
/**
* start animation
*/
function startAnim(e, that) {
// obtain starting position coordinates
var touchs = e.touches[0];
// the position in the page
var startX = touchs.pageX;
var startY = touchs.pageY;
// click location
var clientX = touchs.clientX;
var clientY = touchs.clientY;
that.setData({
startX: startX,
startY: startY,
ballHidden: false
})
var animation = that.animation;
// position of animation bead is restored for the position at click
animation.left(startX).top(startY).step({ duration: 0 }).opacity(0)
that.setData({
animation: animation.export()
})
// animation end position
var endX = that.data.endX;
var endY = that.data.endY;
// calculate point distance to destination
var moveX = endX - clientX;
var moveY = endY - (clientY + 50);
// running orbit coordinate
var x = startX;
var y = startY;
// according to initial position, end position and distance can calculate track movement parameter
var a = ((startY - endY) * (startX - moveX) - (startY - moveY) *
(startX - endX)) / ((startX * startX - endX * endX) * (startX - moveX) -
(startX * startX - moveX * moveX) * (startX - endX));
var b =…..;
var c = …..;
// setting ran bead every 0.05 second
var timer = setInterval(function () {
// because move from right to left, x values it is smaller and smaller
if (x > endX) {
x = x - 10;
// value of bead y can be calculated by the value of x according to this formula
y = a * x * x + b * x + c;
// operation bead
animation.left(x).top(y).step();
that.setData({
animation: animation.export()
})
} else {
If // beyond point coordinates is terminated, remove animation
clearInterval(timer);
}
}, 50);
}
Step 7: after animation, item is added in carts and is accelerated, final updating remote server is completed to add
Add function.Such as:
/ * * be added to shopping cart */
addToCart: function (e) {
// 1, it initializes
var carts = this.data.carts;
var index = parseInt(e.currentTarget.dataset.index);
var item = this.data.list[index];
// 2, animation is initialized
initAnim (this);
// 3, start animation
startAnim(e, this);
// 4, animation terminates to set value and update remote server after 1 second
var that = this;
setTimeout(function () {
// 4. are added to shopping cart
util.addToCart(entity, carts, that);
// 5, server shopping cart is updated
util.updateCart(that, carts);
}, 1000)
}。
Claims (2)
1. a kind of there is the implementation method of parabola animation effect when being added to shopping cart based on wechat small routine platform commodity,
It is characterized in that:When adding commodity purchasing vehicle on the right side of click, the position of click and position and the bead of the bead place page are obtained
The position to be run to, and the bead of definition running background to click position and display, then according to the value of x in operation
By formula(y = a * x*x + b*x +c)The value of y is obtained, the wherein value of a, b, c can be calculated according to starting point and end point
Come, finally uses left that can form parabolic path with top animations operation bead;It is flat based on wechat small routine to solve
Tianwan businessman's product do not have the problem of animation effect of the parabola running orbit of image when being added to shopping cart.
It solves the when of being added to shopping cart based on wechat small routine platform commodity 2. according to claim 1 and there is no a kind of shape
The addition problem of the animation effect of the parabolically track operation of elephant, it is characterised in that:The method specifically includes following step
Suddenly:
Step 1: creating an items list page in wechat small routine project, data change is defined in data in js files
Carts [] is measured, by asking to service acquisition data and set in value to carts in onload methods;
Step 2: adding cart button icon in each item of the items list page and binding event addToCart;
Step 3: bead View controls are added in items list page rearmost position simultaneously, and it is invisible when initial, increase animation
Animation, left and top dynamic attribute, and defined in data in js files;
Step 4: the method addToCart defined in js files, and the index of the current positions item is obtained, according to index
And carts can get current item;
Step 5: initialization bead animation animation association attributes;
Step 6: separately writing a function startAnim to realize parabolic path animation effect, bead is transported before starting animation every time
Row arrives current click location, then starts relevant parabolic path animation;
Step 7: after animation, item is added in carts and is accelerated, final updating remote server is completed to add
Add function.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810327601.1A CN108446118A (en) | 2018-04-12 | 2018-04-12 | A method of shopping cart parabola animation is added to based on wechat small routine platform |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810327601.1A CN108446118A (en) | 2018-04-12 | 2018-04-12 | A method of shopping cart parabola animation is added to based on wechat small routine platform |
Publications (1)
Publication Number | Publication Date |
---|---|
CN108446118A true CN108446118A (en) | 2018-08-24 |
Family
ID=63199766
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810327601.1A Pending CN108446118A (en) | 2018-04-12 | 2018-04-12 | A method of shopping cart parabola animation is added to based on wechat small routine platform |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN108446118A (en) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110069269A (en) * | 2019-04-16 | 2019-07-30 | 北京字节跳动网络技术有限公司 | Update method, apparatus, electronic equipment and the storage medium of the small routine page |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JPH0310290A (en) * | 1989-06-08 | 1991-01-17 | Mk Seiko Co Ltd | Display device |
CN102169404A (en) * | 2010-02-26 | 2011-08-31 | 易搜比控股公司 | Display method for article displacement on screen of electronic device |
CN103368824A (en) * | 2013-04-08 | 2013-10-23 | 广州华多网络科技有限公司 | Virtual item transmission method and device, and virtual studio control method and device |
CN105184635A (en) * | 2015-09-09 | 2015-12-23 | 江苏睿博信息科技有限公司 | Intelligent shopping cart system based on WeChat public platform and method |
CN107492007A (en) * | 2017-07-27 | 2017-12-19 | 湖北历拓网络科技有限公司 | The shop methods of exhibiting and device of a kind of virtual reality |
-
2018
- 2018-04-12 CN CN201810327601.1A patent/CN108446118A/en active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JPH0310290A (en) * | 1989-06-08 | 1991-01-17 | Mk Seiko Co Ltd | Display device |
CN102169404A (en) * | 2010-02-26 | 2011-08-31 | 易搜比控股公司 | Display method for article displacement on screen of electronic device |
CN103368824A (en) * | 2013-04-08 | 2013-10-23 | 广州华多网络科技有限公司 | Virtual item transmission method and device, and virtual studio control method and device |
CN105184635A (en) * | 2015-09-09 | 2015-12-23 | 江苏睿博信息科技有限公司 | Intelligent shopping cart system based on WeChat public platform and method |
CN107492007A (en) * | 2017-07-27 | 2017-12-19 | 湖北历拓网络科技有限公司 | The shop methods of exhibiting and device of a kind of virtual reality |
Non-Patent Citations (2)
Title |
---|
WANGMEIJIAN: "js加入购物车抛物线动画", 《HTTPS://WWW.CNBLOGS.COM/WANGMEIJIAN/P/5824176.HTML》 * |
青梅QM: "⼩程序购物车抛物线动画(通⽤)", 《HTTPS://WWW.CNBLOGS.COM/GREENGAGE/P/7815842.HTML》 * |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110069269A (en) * | 2019-04-16 | 2019-07-30 | 北京字节跳动网络技术有限公司 | Update method, apparatus, electronic equipment and the storage medium of the small routine page |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10915922B2 (en) | System and method in a virtual universe for identifying spam avatars based upon avatar multimedia characteristics | |
US7707520B2 (en) | Method and apparatus for providing flash-based avatars | |
US9342212B2 (en) | Systems, devices and methods for streaming multiple different media content in a digital container | |
CN103534721B (en) | It is a kind of using the method for advertising service and the computing device for executing this method | |
US8229800B2 (en) | System and method for an enhanced shopping experience | |
CN103414940A (en) | System and method for playing interactive internet video advertisements | |
US20090207175A1 (en) | Animation Using Animation Effect and Trigger Element | |
WO2013181662A2 (en) | Systems and methods for selection and personalization of content items | |
WO2017100761A1 (en) | Floating animated push interfaces for interactive dynamic push notifications and other content | |
US20090300144A1 (en) | Hint-based streaming of auxiliary content assets for an interactive environment | |
US20160063556A1 (en) | Triggering immersive advertisements in a virtual universe | |
US20100177122A1 (en) | Video-Associated Objects | |
WO2001069364A2 (en) | Natural user interface for virtual reality shopping systems | |
CN107735746A (en) | Interactive media system and method | |
US20170315701A1 (en) | Multi-tap functionality for interactive dynamic push notifications and other content | |
JP5610655B2 (en) | Information processing system, information processing system control method, program, and information storage medium | |
US20200257435A1 (en) | Dynamically Updating User Interface Elements | |
CN106612230A (en) | Media information promotion method, client and server | |
CN114245099B (en) | Video generation method and device, electronic equipment and storage medium | |
WO2014011139A1 (en) | System and method for propagating interactive online advertisements | |
CN108446118A (en) | A method of shopping cart parabola animation is added to based on wechat small routine platform | |
CN101639927A (en) | Method and system for adjusting virtual display device in virtual world | |
CN104049873A (en) | Mobile Display Device With Flip-screen Functionality | |
CN102868919B (en) | Interactive play equipment and player method | |
US9177408B2 (en) | Modifying an animation having a constraint |
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 | ||
WD01 | Invention patent application deemed withdrawn after publication | ||
WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20180824 |