这篇文章主要介绍“小程序开发中animation怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“小程序开发中animation怎么使用”文章能帮助大家解决问题。动画实例可以调用以下方法来描述动
这篇文章主要介绍“小程序开发中animation怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“小程序开发中animation怎么使用”文章能帮助大家解决问题。
动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。
animation 对象的方法列表：
样式：
| 方法 | 参数 | 说明 |
|---|---|---|
| opacity | value | 透明度，参数范围 0~1 |
| backgroundColor | color | 颜色值 |
| width | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| height | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| top | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| left | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| bottom | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| right | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
旋转：
| 方法 | 参数 | 说明 |
|---|---|---|
| rotate | deg | deg的范围-180~180，从原点顺时针旋转一个deg角度 |
| rotateX | deg | deg的范围-180~180，在X轴旋转一个deg角度 |
| rotateY | deg | deg的范围-180~180，在Y轴旋转一个deg角度 |
| rotateZ | deg | deg的范围-180~180，在Z轴旋转一个deg角度 |
| rotate3D | (x,y,z,deg) | 同transfORM-function rotate3d |
缩放：
| 方法 | 参数 | 说明 |
|---|---|---|
| scale | sx,[sy] | 一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数 |
| scaleX | sx | 在X轴缩放sx倍数 |
| scaleY | sy | 在Y轴缩放sy倍数 |
| scaleZ | sz | 在Z轴缩放sy倍数 |
| scale3d | (sx,sy,sz) | 在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数 |
偏移：
| 方法 | 参数 | 说明 |
|---|---|---|
| translate | tx,[ty] | 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。 |
| translateX | tx | 在X轴偏移tx，单位px |
| translateY | ty | 在Y轴偏移tx，单位px |
| translateZ | tz | 在Z轴偏移tx，单位px |
| translate3d | (tx,ty,tz) | 在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px |
倾斜：
| 方法 | 参数 | 说明 |
|---|---|---|
| skew | ax,[ay] | 参数范围-180~180；一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度；两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度 |
| skewX | ax | 参数范围-180~180；Y轴坐标不变，X轴坐标延顺时针倾斜ax度 |
| skewY | ay | 参数范围-180~180；X轴坐标不变，Y轴坐标延顺时针倾斜ay度 |
矩阵变形：
| 方法 | 参数 | 说明 |
|---|---|---|
| matrix | (a,b,c,d,tx,ty) | 同transform-function matrix |
| matrix3d | 同transform-function matrix3d |
调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
示例：
<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>关于“小程序开发中animation怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。
--结束END--
本文标题: 小程序开发中animation怎么使用
本文链接: https://www.lsjlt.com/news/308649.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0