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

This article mainly introduces the relevant knowledge of "how to use animation in Mini Program development". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use animation in Mini Program development" can help you solve the problem.

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:

This is the end of the content about "how to use animation in Mini Program development". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.