微信小程序开发之——动画-帧动画(2)

发表于 2021-09-30 分类于开发， F-跨平台，微信小程序阅读时长 ≈ 1 分钟

一概述

通过this.animate(selector, keyframes, duration, callback)实现关键帧动画
selector：要执行动画的组件id
keyframes：关键帧信息集合

二参数说明

属性	类型	说明
selector	String	选择器（同 SelectorQuery.select 的选择器格式）
keyframes	Array	关键帧信息
duration	Number	动画持续时长（毫秒为单位）
callback	function	动画完成后的回调函数

三示例

3.1 布局文件(index.wxml)

<view id="container1" style="{{containerStyle1}}">
  <button class="block1" style="width: 300rpx; margin: 100rpx auto;">示例按钮</button>
  <a class="block1" style="display: block; margin: 100rpx auto; width: 300rpx; text-align: center;">示例超链接</a>
  <text class="block1" style="display: block; margin: 100rpx auto; width: 300rpx; text-align: center;">示例文本</text>
</view>

<button bindtap = "change">开启动画</button>

3.2 逻辑文件(index.js)

Page({
  data: {
    containerStyle1: '',
  },
  change: function () {
    this.animate('#container1', [
      { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
      { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00', offset: 0.9},
      { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
      ], 5000, function () {
        this.clearAnimation('#container1', { opacity: true, rotate: true }, function () {
          console.log("清除了#container上的动画属性")
        })
    }.bind(this))
  },
})

四参考

界面动画的常见方式

0%