Skip to content
Mr.HopeMr.Hope
主页
  • 小程序
    • 小程序教程

      • 小程序指南
        • 代码构成
          • 宿主环境
            • 配置

              • 配置
                • 全局配置文档
                  • 页面配置
                    • 小程序内索引
                    • 框架

                      • 框架
                        • 场景值
                          • 小程序的运行环境
                            • 小程序运行机制
                              • 小程序更新机制
                              • 逻辑层

                                • 逻辑层
                                  • 生命周期 <Badge text="不需要立即掌握" />
                                    • 页面路由
                                      • 注册
                                        • App
                                          • Page
                                            • 小程序运行机制
                                              • 模块化
                                                • API

                                                  • API <Badge text="重要" type="error" />
                                                    • 路由 API
                                                      • 数据缓存 API
                                                        • 页面交互 API
                                                          • 网络 API
                                                            • 系统相关 API
                                                          • 视图层

                                                            • 视图层 View
                                                              • WXSS
                                                                • 事件
                                                                  • 基础组件
                                                                    • 动画
                                                                      • 界面动画的常见方式
                                                                        • 关键帧动画
                                                                          • animate
                                                                            • clearAnimation
                                                                            • 滚动驱动的动画
                                                                              • ScrollTimeline 中对象的结构
                                                                              • 高级的动画方式
                                                                              • WXS
                                                                                • WXS 事件
                                                                                  • 简易双向绑定
                                                                                    • 获取界面上的节点信息
                                                                                      • 初始渲染缓存
                                                                                      • 能力

                                                                                        • 小程序能力
                                                                                          • 网络
                                                                                            • 存储
                                                                                              • 文件系统
                                                                                                • 调试
                                                                                              • 开发者工具

                                                                                                • 工具使用
                                                                                                  • 界面
                                                                                                    • 调试
                                                                                                      • npm 支持
                                                                                                        • 体验评分
                                                                                                        • 小程序框架

                                                                                                          • 小程序框架说明
                                                                                                            • 小程序简易开发指南
                                                                                                              • 小程序页面参数表
                                                                                                                • Page 插件
                                                                                                                  • YAML 文件案例
                                                                                                                  • 小程序分享

                                                                                                                    动画

                                                                                                                    Mr.Hope2020年11月8日
                                                                                                                    • 小程序
                                                                                                                    大约 6 分钟

                                                                                                                    此页内容
                                                                                                                    • 界面动画的常见方式
                                                                                                                    • 关键帧动画
                                                                                                                      • animate
                                                                                                                      • clearAnimation
                                                                                                                    • 滚动驱动的动画
                                                                                                                      • ScrollTimeline 中对象的结构
                                                                                                                    • 高级的动画方式

                                                                                                                    提示

                                                                                                                    此部分在初步学习小程序的时候直接略过即可。

                                                                                                                    # 界面动画的常见方式

                                                                                                                    在小程序中,通常可以使用 CSS 渐变open in new window 和 CSS 动画open in new window 来创建简易的界面动画。(这也是 Mr.Hope 主要使用的动画方式)

                                                                                                                    在开发者工具中预览效果open in new window

                                                                                                                    同时,还可以使用 wx.createAnimationopen in new window 接口来动态创建简易的动画效果。

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

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

                                                                                                                    注意

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

                                                                                                                    Mr.Hope 强烈建议优先使用 CSS 动画。只有 CSS 动画 无法满足要求时,才应该考虑 wx.createAnimation。

                                                                                                                    # 关键帧动画

                                                                                                                    基础库 2.9.0 开始支持

                                                                                                                    关键帧动画用于代替旧的 wx.createAnimationopen in new window 。它具有更好的性能和更可控的接口。

                                                                                                                    # animate

                                                                                                                    在页面或自定义组件中,当需要进行关键帧动画时,可以使用 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
                                                                                                                    代码示例

                                                                                                                    在开发者工具中预览效果open in new window

                                                                                                                    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)
                                                                                                                    );
                                                                                                                    

                                                                                                                    # clearAnimation

                                                                                                                    调用 animate API 后会在节点上新增一些样式属性覆盖掉原有的对应样式。如果需要清除这些样式,可在该节点上的动画全部执行完毕后使用 this.clearAnimation 清除这些属性。

                                                                                                                    this.clearAnimation(selector, options, callback);
                                                                                                                    

                                                                                                                    参数说明

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

                                                                                                                    # 滚动驱动的动画

                                                                                                                    基础库 2.9.0 开始支持

                                                                                                                    根据滚动位置而不断改变动画的进度是一种比较常见的场景,这类动画可以让人感觉到界面交互很连贯自然,体验更好,目前支持一种由滚动驱动的动画机制。

                                                                                                                    基于上述的关键帧动画接口,新增一个 ScrollTimeline 的参数,用来绑定滚动元素(目前只支持 scroll-view)。接口定义如下:

                                                                                                                    this.animate(selector, keyframes, duration, ScrollTimeline);
                                                                                                                    

                                                                                                                    # ScrollTimeline 中对象的结构

                                                                                                                    属性类型默认值必填说明
                                                                                                                    scrollSourceString是指定滚动元素的选择器(只支持 scroll-view),该元素滚动时会驱动动画的进度
                                                                                                                    orientationStringvertical否指定滚动的方向。有效值为 horizontal 或 vertical
                                                                                                                    startScrollOffsetNumber是指定开始驱动动画进度的滚动偏移量,单位 px
                                                                                                                    endScrollOffsetNumber是指定停止驱动动画进度的滚动偏移量,单位 px
                                                                                                                    timeRangeNumber是起始和结束的滚动范围映射的时间长度,该时间可用于与关键帧动画里的时间 (duration) 相匹配,单位 ms
                                                                                                                    代码示例

                                                                                                                    在开发者工具中预览效果open in new window

                                                                                                                    this.animate(
                                                                                                                      ".avatar",
                                                                                                                      [
                                                                                                                        {
                                                                                                                          borderRadius: "0",
                                                                                                                          borderColor: "red",
                                                                                                                          transform: "scale(1) translateY(-20px)",
                                                                                                                          offset: 0,
                                                                                                                        },
                                                                                                                        {
                                                                                                                          borderRadius: "25%",
                                                                                                                          borderColor: "blue",
                                                                                                                          transform: "scale(.65) translateY(-20px)",
                                                                                                                          offset: 0.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,
                                                                                                                      }
                                                                                                                    );
                                                                                                                    

                                                                                                                    # 高级的动画方式 初学者无需掌握

                                                                                                                    在一些复杂场景下,上述的动画方法可能并不适用。所以这个时候就需要一些高级的动画方式。

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

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

                                                                                                                      在开发者工具中预览效果open in new window

                                                                                                                    编辑此页open in new window
                                                                                                                    上次编辑于: 2021/3/21 10:12:13
                                                                                                                    贡献者: Mr.Hope
                                                                                                                    上一页
                                                                                                                    基础组件
                                                                                                                    下一页
                                                                                                                    WXS

                                                                                                                    预览:

                                                                                                                    0  字
                                                                                                                    评论
                                                                                                                    Powered by Waline v2.5.1
                                                                                                                    Copyright © 2019-present Mr.Hope