Shulou(Shulou.com)06/02 Report--

This article "how WeChat Mini Programs creates an animation example" is not quite understood by most people except programmers. Today, in order to give you a better understanding of "how WeChat Mini Programs creates an animation example", the editor summarizes the following contents. It has a certain reference value, the detailed steps of the content are clear, and the details are handled properly. I hope you can gain something through this article. Now let's take a look at the details.

Wx.createAnimation (OBJECT)

Create an animation instance animation. Call the method of the instance to describe the animation. Finally, the animation data is exported to the animation attribute of the component through the export method of the animation instance.

Note: the export method clears the previous animation operation after each call.

OBJECT parameter description:

Parameter type: required default value: durationInteger No 40000 animation duration. Unit mstimingFunctionString No "linear" defines animation effect delayInteger No 0 Animation delay time, Unit mstransformOriginString No "50% 0" set transform-origin

Valid values for timingFunction:

The value indicates that the speed of the linear animation from beginning to end is the same. The ease animation starts at a low speed, then speeds up, slows down before the end, starts the ease-in animation at a low speed, starts the ease-in-out animation at a low speed, and ends the ease-out animation at a low speed. The first frame of the step-start animation jumps to the end state until the end of the step-end animation. The last frame jumps to the end state var animation = wx.createAnimation ({transformOrigin: "50%", duration:1000, timingFunction: "ease", delay:0}) animation

The animation instance can call the following methods to describe the animation, and it will return itself after the call, which supports the writing of chain calls.

List of methods for the animation object:

Style:

Method parameters describe opacityvalue transparency, parameter range 0~1backgroundColorcolor color value widthlength length value. If Number is passed, px is used by default, and heightlength length value of other custom units can be passed. If Number is passed, px is used by default, toplength length value of other custom units can be passed in by default, px is used by default if Number is imported, leftlength length value of other custom units can be passed in by default, and px is used by default if Number is passed in. You can pass the length value of other custom units bottomlength length value. If you enter Number, you can use px by default, and you can pass the length value rightlength value of other custom units. If you pass in Number, you can use px by default, and you can pass the length value of other custom units.

Rotate:

The method parameters specify the range of rotatedegdeg-180, rotate a deg angle rotateXdegdeg clockwise from the origin-180cm 180, rotate a deg angle rotateYdegdeg in the X axis-180cm 180, rotate a deg angle rotateZdegdeg in the Y axis-180cm 180, rotate an deg angle rotate3d (xQuery yjrez deg) in the Z axis with transform-function rotate3d

Zoom:

Method parameter description scalesx, [sy] one parameter means to scale sx multiple in X axis and Y axis at the same time; two parameters indicate scaling sx multiple in X axis, sy multiple scaling in Y axis scaleXsx scaling sx multiple in Y axis scaleYsy scaling sy multiple in Y axis scaleZsz scaling sy multiple in Z axis scale3d (sx,sy,sz) scaling sx multiple in X axis, sy multiple in Y axis, sz multiple in Z axis

Offset:

Method parameter description translatetx, [ty] one parameter, it means that when the X axis offset tx, unit px; two parameters, it means that the X axis offset tx, the Y axis offset ty, unit px. TranslateXtx offset tx on X axis, unit pxtranslateYty offset tx on Y axis, unit pxtranslateZtz offset tx on Z axis, unit pxtranslate3d (tx,ty,tz) offset tx on X axis, offset ty on Y axis, offset tz on Z axis, unit px

Tilt:

The method parameters indicate that skewax, [ay] parameter range is-180 degrees 180; for one parameter, the Y axis coordinates remain unchanged, and the X axis coordinates are extended clockwise to tilt ax degrees; for the two parameters, tilt ax degrees on the X axis, tilt ayth degrees on the Y axis, skewXax parameters range of the Y axis tilted clockwise, axis skewYay range of the X axis coordinates delayed clockwise tilt axe degrees unchanged, and Y axis coordinates tilt clockwise ay degrees

Matrix deformation:

Method parameters indicate that matrix (a _

After calling the animation operation method, you need to call step () to indicate the completion of a group of animations. You can call any number of animation methods in a group of animations. All the animations in a group of animations will start at the same time, and only after the completion of a group of animations will the next set of animations be carried out. Step can pass in the same configuration parameter as wx.createAnimation () to specify the configuration of the current group animation.

Example:

Page ({data: {animationData: {}}, onShow:function () {var animation = wx.createAnimation ({duration:1000, timingFunction: "ease",}) this.animation = animation animation.scale (2). Step (45); this.setData ({animationData:animation.export ()}) setTimeout (function () {animation.translate (30). Step ()) This.setData ({animationData:animation.export ()})} .bind (this), 1000)}, rotateAndScale: function () {/ / rotate while zooming in on this.animation.rotate (45) .scale (2,2) .step () this.setData ({animationData:animation.export ()})} RotateThenScale: function () {/ / rotate and then zoom in this.animation.rotate (45). Step () this.animation.scale (2,2). Step () this.setData ({animationData:animation.export ()})}, rotateAndScaleThenTranslate: function () {/ / rotate and zoom in at the same time Then pan this.animation.rotate (45) .scale (2,2). Step () this.animation.translate (100,100). Step ({duration: 1000}) this.setData ({animationData:animation.export ()})}) what does Mini Program mean? Mini Program is an application that can be used without download and installation. It is easy to operate and easy to spread by scanning the QR code or searching for it. It can realize seven functions, such as message notification, offline scanning code, official account association and so on. It is based on Wechat, similar to APP. You can use it whenever you want. After using it, you will leave without taking up memory.

Thank you for your reading. I hope you have a certain understanding of the key issue of "how to create an animation example by WeChat Mini Programs". The specific usage still needs to be understood by everyone through hands-on experiments. Try it quickly. If you want to read more articles on relevant knowledge points, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.