程序框架之高级动画方式

网友投稿 313 2024-06-29

动画

#10.1 界面动画的常见方式

小程序中,通常可以使用 CSS 渐变 和 CSS 动画 来创建简易的界面动画。

小程序框架之高级动画方式

在开发者工具中预览效果

动画过程中,可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件。

事件名含义
transitionendCSS 渐变结束或 wx.createAnimation 结束一个阶段
animationstartCSS 动画开始
animationiterationCSS 动画结束一个阶段
animationendCSS 动画结束

注意:这几个事件都不是冒泡事件,需要绑定在真正发生了动画的节点上才会生效。

同时,还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。(新版小程序基础库中推荐使用下述的关键帧动画接口代替。)

#10.2 关键帧动画

还有一种更友好的动画创建方式,用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。

在页面或自定义组件中,当需要进行关键帧动画时,可以使用 this.animate 接口:

this.animate(selector, keyframes, duration, callback)
        已复制代码

参数说明

属性类型默认值必填说明
selectorString
选择器(同 SelectorQuery.select 的选择器格式)
keyframesArray
关键帧信息
durationNumber
动画持续时长(毫秒为单位)
callbackfunction
动画完成后的回调函数

keyframes 中对象的结构

属性类型默认值必填说明
offsetNumber
关键帧的偏移,范围[0-1]
easeStringlinear动画缓动函数
transformOriginString基点位置,即 CSS transform-origin
backgroundColorString
背景颜色,即 CSS background-color
bottomNumber/String
底边位置,即 CSS bottom
heightNumber/String
高度,即 CSS height
leftNumber/String
左边位置,即 CSS left
widthNumber/String
宽度,即 CSS width
opacityNumber
不透明度,即 CSS opacity
rightNumber
右边位置,即 CSS right
topNumber/String
顶边位置,即 CSS top
matrixArray
变换矩阵,即 CSS transform matrix
matrix3dArray
三维变换矩阵,即 CSS transform matrix3d
rotateNumber
旋转,即 CSS transform rotate
rotate3dArray
三维旋转,即 CSS transform rotate3d
rotateXNumber
X 方向旋转,即 CSS transform rotateX
rotateYNumber
Y 方向旋转,即 CSS transform rotateY
rotateZNumber
Z 方向旋转,即 CSS transform rotateZ
scaleArray
缩放,即 CSS transform scale
scale3dArray
三维缩放,即 CSS transform scale3d
scaleXNumber
X 方向缩放,即 CSS transform scaleX
scaleYNumber
Y 方向缩放,即 CSS transform scaleY
scaleZNumber
Z 方向缩放,即 CSS transform scaleZ
skewArray
倾斜,即 CSS transform skew
skewXNumber
X 方向倾斜,即 CSS transform skewX
skewYNumber
Y 方向倾斜,即 CSS transform skewY
translateArray
位移,即 CSS transform translate
translate3dArray
三维位移,即 CSS transform translate3d
translateXNumber
X 方向位移,即 CSS transform translateX
translateYNumber
Y 方向位移,即 CSS transform translateY
translateZNumber
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)
        已复制代码

参数说明

属性类型默认值必填说明
selectorString
选择器(同 SelectorQuery.select 的选择器格式)
optionsObject
需要清除的属性,不填写则全部清除
callbackFunction
清除完成后的回调函数

#10.3 高级的动画方式

在一些复杂场景下,上述的动画方法可能并不适用。

WXS 响应事件 的方式可以通过使用 WXS 来响应事件的方法来动态调整节点的 style 属性。通过不断改变 style 属性的值可以做到动画效果。同时,这种方式也可以根据用户的触摸事件来动态地生成动画。

连续使用 setData 来改变界面的方法也可以达到动画的效果。这样可以任意地改变界面,但通常会产生较大的延迟或卡顿,甚至导致小程序僵死。此时可以通过将页面的 setData 改为 自定义组件 中的 setData 来提升性能。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序所有页面的路由全部由小程序框架进行管理
下一篇:小程序框架之初始渲染缓存
相关文章

 发表评论

暂时没有评论,来抢沙发吧~