feat: animation + 菜单位置页面

app.json

@@ -50,7 +50,9 @@
     "pages/API/load-font-face/load-font-face",
     "pages/API/video/video",
     "pages/API/audio/audio",
-    "pages/API/storage/storage"
+    "pages/API/storage/storage",
+    "pages/API/animation/animation",
+    "pages/API/menu-info/menu-info"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/API/animation/animation.js

@@ -0,0 +1,87 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: '动画',
+      path: 'page/API/pages/animation/animation',
+      containerStyle1: '',
+
+    }
+  },
+
+  onReady() {
+    this.animation = wx.createAnimation()
+  },
+  rotate() {
+    this.animation.rotate(Math.random() * 720 - 360).step()
+    this.setData({animation: this.animation.export()})
+  },
+  scale() {
+    this.animation.scale(Math.random() * 2).step()
+    this.setData({animation: this.animation.export()})
+  },
+  translate() {
+    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
+    this.setData({animation: this.animation.export()})
+  },
+  skew() {
+    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
+    this.setData({animation: this.animation.export()})
+  },
+  rotateAndScale() {
+    this.animation.rotate(Math.random() * 720 - 360)
+      .scale(Math.random() * 2)
+      .step()
+    this.setData({animation: this.animation.export()})
+  },
+  rotateThenScale() {
+    this.animation.rotate(Math.random() * 720 - 360).step()
+      .scale(Math.random() * 2).step()
+    this.setData({animation: this.animation.export()})
+  },
+  all() {
+    this.animation.rotate(Math.random() * 720 - 360)
+      .scale(Math.random() * 2)
+      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
+      .skew(Math.random() * 90, Math.random() * 90)
+      .step()
+    this.setData({animation: this.animation.export()})
+  },
+  allInQueue() {
+    this.animation.rotate(Math.random() * 720 - 360).step()
+      .scale(Math.random() * 2).step()
+      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
+      .step()
+      .skew(Math.random() * 90, Math.random() * 90)
+      .step()
+    this.setData({animation: this.animation.export()})
+  },
+  reset() {
+    this.animation.rotate(0, 0)
+      .scale(1)
+      .translate(0, 0)
+      .skew(0, 0)
+      .step({duration: 0})
+    this.setData({animation: this.animation.export()})
+  },
+  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))
+    this.animate('.block1', [
+      { 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('.block1', { scale: true, rotate: true}, function () {
+        console.log("清除了.block1上的动画属性")
+      })
+    }.bind(this)
+    )
+  },
+})

pages/API/animation/animation.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "动画"
+}

pages/API/animation/animation.wxml

@@ -0,0 +1,46 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'createAnimation'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+
+      <view class="animation-element-wrapper">
+        <view class="animation-element" animation="{{animation}}"></view>
+      </view>
+      <view class="btn-row">
+        <button class="animation-button" bindtap="rotate">旋转</button>
+        <button class="animation-button" bindtap="scale">缩放</button>
+      </view>
+      <view class="btn-row">
+        <button class="animation-button" bindtap="translate">移动</button>
+        <button class="animation-button" bindtap="skew">倾斜</button>
+      </view>
+      <view class="btn-row">
+        <button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
+        <button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
+      </view>
+      <view class="btn-row">
+        <button class="animation-button" bindtap="all">同时展示全部</button>
+      <button class="animation-button" bindtap="allInQueue">顺序展示全部</button>
+      </view>
+      <view class="btn-row">
+        <button class="animation-button animation-button-reset" bindtap="reset">还原</button>
+      </view>
+    </view>
+  </view>
+  <view class="page-section">
+    <view class="page-section-title">
+      <text>关键帧动画\n\n从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation</text>
+    </view>  
+    <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 type="primary" bindtap="change">开启动画</button>
+  </view>
+  <template is="foot" />
+</view>

pages/API/animation/animation.wxss

@@ -0,0 +1,35 @@
+.animation-element-wrapper {
+  display: flex;
+  width: 100%;
+  padding-top: 150rpx;
+  padding-bottom: 150rpx;
+  justify-content: center;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.animation-element {
+  width: 200rpx;
+  height: 200rpx;
+  background-color: #1AAD19;
+}
+.animation-buttons {
+  padding: 30rpx 50rpx 10rpx;
+  width: 100%;
+  height: 360rpx;
+  box-sizing: border-box;
+}
+.animation-button {
+  float: left;
+  line-height: 2;
+  width: 300rpx;
+  margin: 15rpx 12rpx;
+}
+
+.animation-button-reset {
+  width: 620rpx;
+}
+
+.btn-row {
+  display: flex;
+  justify-content: space-between;
+}

pages/API/app-level-event/app-level-event.wxml

@@ -1,5 +1,5 @@
-<import src="../../../common/head.wxml" />
+<import src="../../common/head.wxml" />
-<import src="../../../common/foot.wxml" />
+<import src="../../common/foot.wxml" />
 
 <view class="container">
   <template is="head" data="{{title: 'getLaunchOptionsSync'}}"/>

pages/API/index/index.js

@@ -54,6 +54,14 @@ Page({
             zh: '页面滚动',
             url: 'page-scroll/page-scroll'
           },
+          {
+            zh: '动画',
+            url: 'animation/animation'
+          },
+          {
+            zh: '菜单位置信息',
+            url: 'menu-info/menu-info'
+          },
         ]
       }, {
         id: 'device',

pages/API/menu-info/menu-info.js

@@ -0,0 +1,26 @@
+Page({
+  data: {
+    launchOptions: {},
+    items: [
+      'width', 'height', 'top', 'bottom', 'left',
+    ],
+  },
+  getLaunchOptions() {
+    const that = this
+    const result = wx.getMenuButtonBoundingClientRect()
+    console.log('wx.getMenuButtonBoundingClientRect', result);
+    for(const key in result) {
+      if(typeof result[key] === 'object') {
+        result[key] = JSON.stringify(result[key])
+      }
+    }
+    that.setData({
+      launchOptions: result
+    })
+  },
+  clear() {
+    this.setData({
+      launchOptions: {}
+    })
+  }
+})

pages/API/menu-info/menu-info.json

@@ -0,0 +1,3 @@
+{
+    "launchOptions": "获取小程序启动时的参数"
+}

pages/API/menu-info/menu-info.wxml

@@ -0,0 +1,25 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'getMenuButtonBoundingClientRect'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+      <view class="page-body-info">
+        <view class="page-body-title">菜单按钮（右上角胶囊按钮）的布局位置信息</view>
+        <block>
+          <view wx:for="{{items}}">
+            <text class="page-body-text">{{item}}: {{launchOptions[item]}}</text>
+          </view>
+        </block>
+      </view>
+      <view class="btn-area">
+        <button type="primary" bindtap="getLaunchOptions">菜单位置</button>
+        <button bindtap="clear">清空</button>
+      </view>
+    </view> 
+  </view>
+
+  <template is="foot" />
+</view>

pages/API/menu-info/menu-info.wxss

@@ -0,0 +1,7 @@
+.page-body-info {
+  height: 180px;
+}
+
+.btn-area {
+  width: 100%;
+}