CN108446118A - A method of shopping cart parabola animation is added to based on wechat small routine platform - Google Patents

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

A method of shopping cart parabola animation is added to based on wechat small routine platform

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.