在小程序中,通常可以使用 CSS 渐变 和 CSS 动画 来创建简易的界面动画。
动画过程中,可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件。
事件名 | 含义 |
---|---|
transitionend | CSS 渐变结束或 wx.createAnimation 结束一个阶段 |
animationstart | CSS 动画开始 |
animationiteration | CSS 动画结束一个阶段 |
animationend | CSS 动画结束 |
注意:这几个事件都不是冒泡事件,需要绑定在真正发生了动画的节点上才会生效。
同时,还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。(新版小程序基础库中推荐使用下述的关键帧动画接口代替。)
基础库 2.9.0 开始支持,低版本需做兼容处理。
从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式,用于代替旧的 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 | 否 | 清除完成后的回调函数 |
我们发现,根据滚动位置而不断改变动画的进度是一种比较常见的场景,这类动画可以让人感觉到界面交互很连贯自然,体验更好。因此,从小程序基础库 2.9.0 开始支持一种由滚动驱动的动画机制。
基于上述的关键帧动画接口,新增一个 ScrollTimeline 的参数,用来绑定滚动元素(目前只支持 scroll-view)。接口定义如下:
this.animate(selector, keyframes, duration, ScrollTimeline)
ScrollTimeline 中对象的结构
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
scrollSource | String | 是 | 指定滚动元素的选择器(只支持 scroll-view),该元素滚动时会驱动动画的进度 | |
orientation | String | vertical | 否 | 指定滚动的方向。有效值为 horizontal 或 vertical |
startScrollOffset | Number | 是 | 指定开始驱动动画进度的滚动偏移量,单位 px | |
endScrollOffset | Number | 是 | 指定停止驱动动画进度的滚动偏移量,单位 px | |
timeRange | Number | 是 | 起始和结束的滚动范围映射的时间长度,该时间可用于与关键帧动画里的时间 (duration) 相匹配,单位 ms |
在开发者工具中预览效果
this.animate(".avatar", [{
borderRadius: "0",
borderColor: "red",
transform: "scale(1) translateY(-20px)",
offset: 0,
}, {
borderRadius: "25%",
borderColor: "blue",
transform: "scale(.65) translateY(-20px)",
offset: .5,
}, {
borderRadius: "50%",
borderColor: "blue",
transform: `scale(.3) translateY(-20px)`,
offset: 1
}], 2000, {
scrollSource: "#scroller",
timeRange: 2000,
startScrollOffset: 0,
endScrollOffset: 85,
})
this.animate(".search_input", [{
opacity: "0",
width: "0%",
}, {
opacity: "1",
width: "100%",
}], 1000, {
scrollSource: "#scroller",
timeRange: 1000,
startScrollOffset: 120,
endScrollOffset: 252
})
在一些复杂场景下,上述的动画方法可能并不适用。
WXS 响应事件 的方式可以通过使用 WXS 来响应事件的方法来动态调整节点的 style 属性。通过不断改变 style 属性的值可以做到动画效果。同时,这种方式也可以根据用户的触摸事件来动态地生成动画。
连续使用 setData 来改变界面的方法也可以达到动画的效果。这样可以任意地改变界面,但通常会产生较大的延迟或卡顿,甚至导致小程序僵死。此时可以通过将页面的 setData 改为 自定义组件 中的 setData 来提升性能。下面的例子是使用 setData 来实现秒表动画的示例。
文件系统文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口。通过wx.getFileSystemManager()可以...
字符串用于存储文本。它们可用在LCD或Arduino IDE串口监视器窗口中显示文本。字符串也可用于存储用户输入。例如,用户在连接到Ar...
描述将指定的引脚配置为输入或输出。有关引脚功能的详细信息,请参阅数字引脚的说明。从Arduino 1.0.1开始,可以使用INPUT_PULLU...
读取(Read)-运算(Eval)-输出(Print)-循环(Loop) (REPL) 是很简单的, 交互式的计算机编程环境,它采用单个用户输入,运算并返回结...
Electron 会在什么时候升级到最新版本的 Chrome?通常来说,在稳定版的 Chrome 发布后两周内,我们会更新 Electron 内的 Chrome ...
过滤是从结果集中删除某些值或值范围的过程。 Tableau过滤功能允许使用字段值以及高级计算或基于上下文的过滤器的两种简单方案。...
介绍TextInput控件是一个文本输入控件,允许用户输入和编辑一行统一格式的文本。类声明以下是 spark.components.TextArea 类的声...
快捷键介绍Ctrl + F在当前文件进行文本查找 (必备)Ctrl + R/kdb在当前文件进行文本替换 (必备)Ctrl + Z/kdb撤销 (必备)Ctr...