小程序开发设计如何实现跨平台开发与管理满足企业多元化需求
313
2024-06-29
在小程序中,通常可以使用 CSS 渐变 和 CSS 动画 来创建简易的界面动画。
在开发者工具中预览效果
动画过程中,可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件。
事件名 | 含义 |
---|---|
transitionend | CSS 渐变结束或 wx.createAnimation 结束一个阶段 |
animationstart | CSS 动画开始 |
animationiteration | CSS 动画结束一个阶段 |
animationend | CSS 动画结束 |
注意:这几个事件都不是冒泡事件,需要绑定在真正发生了动画的节点上才会生效。
同时,还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。(新版小程序基础库中推荐使用下述的关键帧动画接口代替。)
还有一种更友好的动画创建方式,用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。
在页面或自定义组件中,当需要进行关键帧动画时,可以使用 this.animate 接口:
this.animate(selector, keyframes, duration, callback) 已复制代码
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
selector | String | 是 | 选择器(同 SelectorQuery.select 的选择器格式) | |
keyframes | Array | 是 | 关键帧信息 | |
duration | Number | 是 | 动画持续时长(毫秒为单位) | |
callback | function | 否 | 动画完成后的回调函数 |
keyframes 中对象的结构
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
offset | Number | 否 | 关键帧的偏移,范围[0-1] | |
ease | String | linear | 否 | 动画缓动函数 |
transformOrigin | String | 否 | 基点位置,即 CSS transform-origin | |
backgroundColor | String | 否 | 背景颜色,即 CSS background-color | |
bottom | Number/String | 否 | 底边位置,即 CSS bottom | |
height | Number/String | 否 | 高度,即 CSS height | |
left | Number/String | 否 | 左边位置,即 CSS left | |
width | Number/String | 否 | 宽度,即 CSS width | |
opacity | Number | 否 | 不透明度,即 CSS opacity | |
right | Number | 否 | 右边位置,即 CSS right | |
top | Number/String | 否 | 顶边位置,即 CSS top | |
matrix | Array | 否 | 变换矩阵,即 CSS transform matrix | |
matrix3d | Array | 否 | 三维变换矩阵,即 CSS transform matrix3d | |
rotate | Number | 否 | 旋转,即 CSS transform rotate | |
rotate3d | Array | 否 | 三维旋转,即 CSS transform rotate3d | |
rotateX | Number | 否 | X 方向旋转,即 CSS transform rotateX | |
rotateY | Number | 否 | Y 方向旋转,即 CSS transform rotateY | |
rotateZ | Number | 否 | Z 方向旋转,即 CSS transform rotateZ | |
scale | Array | 否 | 缩放,即 CSS transform scale | |
scale3d | Array | 否 | 三维缩放,即 CSS transform scale3d | |
scaleX | Number | 否 | X 方向缩放,即 CSS transform scaleX | |
scaleY | Number | 否 | Y 方向缩放,即 CSS transform scaleY | |
scaleZ | Number | 否 | Z 方向缩放,即 CSS transform scaleZ | |
skew | Array | 否 | 倾斜,即 CSS transform skew | |
skewX | Number | 否 | X 方向倾斜,即 CSS transform skewX | |
skewY | Number | 否 | Y 方向倾斜,即 CSS transform skewY | |
translate | Array | 否 | 位移,即 CSS transform translate | |
translate3d | Array | 否 | 三维位移,即 CSS transform translate3d | |
translateX | Number | 否 | X 方向位移,即 CSS transform translateX | |
translateY | Number | 否 | Y 方向位移,即 CSS transform translateY | |
translateZ | Number | 否 | Z 方向位移,即 CSS transform translateZ |
this.animate('#container', [ { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' }, { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'}, { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' }, ], 5000, function () { this.clearAnimation('#container', { opacity: true, rotate: true }, function () { console.log("清除了#container上的opacity和rotate属性") }) }.bind(this)) this.animate('.block', [ { scale: [1, 1], rotate: 0, ease: 'ease-out' }, { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9}, { scale: [2, 2], rotate: 90 }, ], 5000, function () { this.clearAnimation('.block', function () { console.log("清除了.block上的所有动画属性") }) }.bind(this)) 已复制代码
调用 animate API 后会在节点上新增一些样式属性覆盖掉原有的对应样式。如果需要清除这些样式,可在该节点上的动画全部执行完毕后使用 this.clearAnimation 清除这些属性。
this.clearAnimation(selector, options, callback) 已复制代码
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
selector | String | 是 | 选择器(同 SelectorQuery.select 的选择器格式) | |
options | Object | 否 | 需要清除的属性,不填写则全部清除 | |
callback | Function | 否 | 清除完成后的回调函数 |
在一些复杂场景下,上述的动画方法可能并不适用。
WXS 响应事件 的方式可以通过使用 WXS 来响应事件的方法来动态调整节点的 style 属性。通过不断改变 style 属性的值可以做到动画效果。同时,这种方式也可以根据用户的触摸事件来动态地生成动画。
连续使用 setData 来改变界面的方法也可以达到动画的效果。这样可以任意地改变界面,但通常会产生较大的延迟或卡顿,甚至导致小程序僵死。此时可以通过将页面的 setData 改为 自定义组件 中的 setData 来提升性能。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~