您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“小程序开发中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怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。