Share my experiences with small program development

The applet has been out for some time. recently I have written several small program projects. today I want to talk about it. First, develop a small program. The most important thing is for the company to operate, because when applying for an appid (small program ID), you need to fill in the relevant company authentication information, such, once again, the business license is to use a QQ number or number that has not passed the public account to register a small serial number. Finally, download the applet development tool. The applet has been out for some time. recently I have written several small program projects. today I want to talk about it.

First, develop a small program. The most important thing is for the company to operate, because when applying for an appid (small program ID), you need to fill in the relevant company authentication information, such, business license, etc.

Once again, we use a QQ number or number that has never passed the Public number to register a small serial number.

Finally, download the applet development tool.

As we focus more on how to develop some apps, rather than the copu applet, we will not explain it too much here. For details, we can go to the help documentation on the official website.

First of all, let's illustrate and develop our project step by step. Below is an app

This looks very simple. In fact, it is very troublesome. if you are not familiar with animation, you may be troubled.

The above animation is smooth, probably because the screen capture tool is not good, so you don't need to worry about it.

When we click "switch circle" in the center, "the starting city" exchanges with "the city that Arrives". they do not change immediately, but have a "shift" effect in the center. at the same time, the "exchanged circle" also needs to rotate 180 degrees.

In this way, the experience is immediately "high ". Haha, isn't it? Next we will detail how to implement it.

First, let's take a look at the animation-related documentation on the official website.

Wx. createAnimation (OBJECT)

Create an animation instance animation. Call the instance method to describe the animation. FinallyexportMethod to export the animation data to the componentanimationAttribute.

Note:exportThe method clears the previous animation after each call.

OBJECT parameter description:

Parameters	Type	Required	Description
Duration	Integer	No	Animation duration, in ms. The default value is 400.
TimingFunction	String	No	Define the animation effect. the default value is "linear". Valid values: "linear", "inline", "inline-in", "inline-out", "inline-out ", "step-start", "step-end"
Delay	Integer	No	Animation delay time, in MS, default value 0
TransformOrigin	String	No	Set transform-origin. the default value is "50% 50% 0"

var animation = wx.createAnimation({  transformOrigin: "50% 50%",  duration: 1000,  timingFunction: "ease",  delay: 0})

Animation

An animation instance can call the following method to describe the animation. it will return itself after the call is completed. the method of chained call is supported.

Style:

Method	Parameters	Description
Opacity	Value	Transparency. the parameter range is 0 ~ 1
BackgroundColor	Color	Color value
Width	Length	Length value. if Number is input, px is used by default. you can specify the length value of another custom unit.
Height	Length	Length value. if Number is input, px is used by default. you can specify the length value of another custom unit.
Top	Length	Length value. if Number is input, px is used by default. you can specify the length value of another custom unit.
Left	Length	Length value. if Number is input, px is used by default. you can specify the length value of another custom unit.
Bottom	Length	Length value. if Number is input, px is used by default. you can specify the length value of another custom unit.
Right	Length	Length value. if Number is input, px is used by default. you can specify the length value of another custom unit.

Rotation:

Method	Parameters	Description
Rotate	Deg	Deg range-180 ~ 180, rotate an deg angle clockwise from the origin
RotateX	Deg	Deg range-180 ~ 180, rotate an deg angle on the x axis
RotateY	Deg	Deg range-180 ~ 180, rotate an deg angle on the y axis
RotateZ	Deg	Deg range-180 ~ 180, rotate an deg angle on the Z axis
Rotate3d	(X, y, z, deg)	Same as transform-function rotate3d

Scaling:

Method	Parameters	Description
Scale	Sx, [sy]	If one parameter is set, both the x axis and the y axis are scaled to the sx multiple. if the two parameters are set, the sx multiple is scaled to the x axis, and the sy multiple is scaled to the y axis.
ScaleX	Sx	Scale sx multiples on the x axis
ScaleY	Sy	Zooming sy multiple on the y axis
ScaleZ	Sz	Zooming sy multiples on the Z axis
Scale3d	(Sx, sy, sz)	Scale sx multiples on the x axis, sy multiples on the y axis, and sz multiples on the z axis.

Offset:

Method	Parameters	Description
Translate	Tx, [ty]	If one parameter is set, it indicates that the x axis offset is tx, in px; if the two parameters are set, it indicates that the x axis offset is tx, the y axis offset is ty, and the unit is px.
TranslateX	Tx	Tx offset on the x axis, in px
TranslateY	Ty	Offset tx on the y axis, in px
TranslateZ	Tz	Tx offset on the z axis, in px
Translate3d	(Tx, ty, tz)	Offset tx on the x axis, ty on the y axis, tz on the z axis, in px

Skew:

Method	Parameters	Description
Skew	Ax, [ay]	Parameter range-180 ~ 180; when one parameter is used, the y axis coordinates remain unchanged, and the x axis coordinates are postponed clockwise to the ax degrees. when the two parameters are used, the ax degrees are skewed on the x axis and the ay degrees are skewed on the y axis respectively.
SkewX	Ax	Parameter range-180 ~ 180; the Y axis coordinates remain unchanged, and the x axis coordinates are skewed clockwise to the ax degree.
SkewY	Ay	Parameter range-180 ~ 180; the X axis coordinates remain unchanged, and the y axis coordinates are skewed clockwise.

Matrix deformation:

Method	Parameters	Description
Matrix	(A, B, c, d, tx, ty)	Same as transform-function matrix
Matrix3d		Same as transform-function matrix3d

Animation queue

Call the animation operation methodstep()To indicate that a group of animations are completed. you can call any number of animation methods in a group of animations. all the animations in a group of animations start at the same time, after a group of animations is completed, the next group of animations is performed. Step can inputwx.createAnimation()The same configuration parameters are used to specify the configurations of the current animation group.

Example:

From the above, we can see that in reality, px is used for the width and height of the middle part. that is to say, we do not want to rotate the mobile phone screen in the middle to adapt to different mobile phone screens, I hope he will remain unchanged. At this time, if we only use left to translate the coordinates from "departure city" to "arriving City", you may use px, rpx, or other units, no precise positioning is achieved (why ?).

At this time, let's look at it from another angle. we don't need to let it accurately shift to "reach the city". why do we say this? In a very short period of time before the departure city was moved to the city, we made it in the 0 s switching city (that is, reset but the text content has been exchanged ), it is estimated that no one can discover this because 0 S interchange of city text content. This requires an appropriate time ".

Let's take a look at the code:

Define three animations:

 1     animation1 = wx.createAnimation({ 2           duration: 300, 3           timingFunction: 'linear', 4           transformOrigin: "50%,50%" 5         }) 6  7         this.setData({ 8           animationData: animation1.export() 9         })10 11          animation2 = wx.createAnimation({12           duration: 300,13           timingFunction: 'linear'14         })15 16         this.setData({17           animationSourceCity: animation2.export()18         })19 20          animation3 = wx.createAnimation({21           duration: 300,22           timingFunction: 'linear'23         })24 25         this.setData({26           animationDestCity: animation3.export()27         })

Animation1 is the animation definition for rotating images (initialization, the specific parameters are clearly stated on the official website, not to mention ).

Animation2 and animation3 define the "departure city" and "Arrival City" respectively.

Next, let's talk about animation2 and animation3.

What animation2 needs to do is to start from left "city"Horizontal movementCoordinates of "arriving City"

Let's take a look at the current event of rotating images:

 1 animation2.left('600rpx').step() 2         this.setData({ 3         animationSourceCity: animation2.export() 4       }) 5  6       setTimeout(function(){ 7         animation2.left('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'}) 8         that.setData({ 9            animationSourceCity: animation2.export()10         })11       },285)12 13       animation3.right('580rpx').step()14         this.setData({15         animationDestCity: animation3.export()16       })17       18        setTimeout(function(){19         animation3.right('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})20         that.setData({21            animationDestCity: animation3.export()22         })23       },285)

Let's analyze the above code:

At initialization, set the animation completion time duration: 300 ms. Then, click the image to start horizontal movement of 600rpx.

Animation2.left ('600rpx '). step () this. setData ({animationSourceCity: animation2.export ()}) at this time, 600rpx is just a rough computation and is not really accurate. The reason is clearly explained above, the time required to move 600rpx is 300 ms. then, if this ends, the location may be misplaced. Therefore, we need to write a "special animation" setTimeout (function (){

Animation2.left ('30rpx '). step ({duration: 0, transformOrigin: "50%, 50%", timingFunction: 'linear '}) that. setData ({animationSourceCity: animation2.export ()}, 285)

This animation indicates that after 285ms, the "reset" will be completed in 0 S. at 0 s, no one will find the benefits of resetting too much, if we do not reset, it means that our elements are actually exchanged, so events are exchanged, bringing us
Too much trouble,
Resetting allows us to only exchange the "city text" instead of all. Haha ~ Happy, just define 285 ms. it is a very short opportunity for people to see the reset execution. after all, the above ms horizontal animation has not been completed yet.
But the real change is in the following sentence:

  var tempSourceCity=this.data.sourceCity      var tempDestCity=this.data.destCity      this.setData({        sourceCity:tempDestCity,        destCity:tempSourceCity      })

Similarly, right is also a reality. I will not talk about it here. if you are interested, try it.

Next, let's talk about switching the rotation animation of a pressed image.

If we write this in the click event rotate

animation1.rotate(180).step()          this.setData({        animationData: animation1.export()      })

Well, it looks good. when we tried it, we first rotated, then for the second and third times... It does not rotate. Ah, the sad thing is coming again. I will not complain about it. you have a bug.

In fact, you can see the example provided on the official website. if you rotate it, it will not be rotated any more, unless you refresh the page.

Complaints are classified into complaints, and the problem is still solved.

Is this our problem? 10 thousand why...

No! I still remember that this was the case when I was doing css3 animation. I will draw a picture to explain why!

Before rotation: (pay attention to the position of point)

After you click rotate image, you are in the 180 degree state. Then, click rotate image again, which means to let it rotate from 0 degrees to 180 degrees again, but our code is

animation1.rotate(180).step()

This line of code indicates that it is rotated to 300 degrees within 180 ms (the initial creation time), but 180 degrees have been processed at this time. of course, it will not be rotated when you click it. It keeps complaining. "I'm already at 180 degrees. what do you want ?!... "

So, at this time, can we directly rotate 360 degrees, then it will not be converted to 180 degrees after the status of 180 degrees? But look at the official website. The rotation range is-180 ~ 180 degrees, even if there is no such limit, then we will also die, right? Every time 180*2,180*3..., it means you are not satisfied!

I think as long as the problem is found, it is actually very simple. at this time, it is estimated that some friends think of it, that is, directly let it be 0 degrees, the animation time for 0 degrees must be short, otherwise, people will see a "inverted rotation process". Wow, that's so ugly. OK, animation. we have all set a precedent above, resetting 0 s to 0 degrees, you can't even find your eyes, Hey...

The complete rotation code is as follows:

 1 animation1.rotate(180).step() 2       3      this.setData({ 4         animationData: animation1.export() 5       }) 6         7       var that=this;  8       setTimeout(function(){ 9         animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})10         that.setData({11            animationData: animation1.export()12         })13       },300)

This means that when you click, you can rotate 180 degrees in MS, and then execute a new animation after MS to reset it to 0 degrees. The next time you click, it can be rotated again!

Animation1.rotate (0). step ({duration: 0, transformOrigin: "50%, 50%", timingFunction: 'linear '}) // returns 0 degrees "reset"

The above idea is not difficult, that is, sometimes it is hard to find out, or, if you have never touched any animation friends, you cannot find the problem at half past one. here, we will try our best to avoid detours.

All right, this part of the animation is complete. below we also have the homepage scrolling up and down without interruption, the sliding and deletion effects similar to the ios app of the Apple mobile phone, and the https api (based on asp.net mvc) we are looking forward to solving these problems one by one. I am going to write them in the subsequent articles. thank you for your attention.

The above is a detailed introduction to my small program development experience. For more information, see other related articles in the first PHP community!