From 5a2f9cd8aaadb99e55460bbfbd3909e5fb765964 Mon Sep 17 00:00:00 2001
From: luqianyu <lqygo1234@qq.com>
Date: Tue, 8 Dec 2020 17:25:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20animation=20+=20=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.json                                      |  4 +-
 pages/API/animation/animation.js              | 87 +++++++++++++++++++
 pages/API/animation/animation.json            |  3 +
 pages/API/animation/animation.wxml            | 46 ++++++++++
 pages/API/animation/animation.wxss            | 35 ++++++++
 .../API/app-level-event/app-level-event.wxml  |  4 +-
 pages/API/index/index.js                      |  8 ++
 pages/API/menu-info/menu-info.js              | 26 ++++++
 pages/API/menu-info/menu-info.json            |  3 +
 pages/API/menu-info/menu-info.wxml            | 25 ++++++
 pages/API/menu-info/menu-info.wxss            |  7 ++
 11 files changed, 245 insertions(+), 3 deletions(-)
 create mode 100644 pages/API/animation/animation.js
 create mode 100644 pages/API/animation/animation.json
 create mode 100644 pages/API/animation/animation.wxml
 create mode 100644 pages/API/animation/animation.wxss
 create mode 100644 pages/API/menu-info/menu-info.js
 create mode 100644 pages/API/menu-info/menu-info.json
 create mode 100644 pages/API/menu-info/menu-info.wxml
 create mode 100644 pages/API/menu-info/menu-info.wxss

diff --git a/app.json b/app.json
index 9f78913..d0b9bd5 100644
--- a/app.json
+++ b/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",
diff --git a/pages/API/animation/animation.js b/pages/API/animation/animation.js
new file mode 100644
index 0000000..5891d8f
--- /dev/null
+++ b/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)
+    )
+  },
+})
\ No newline at end of file
diff --git a/pages/API/animation/animation.json b/pages/API/animation/animation.json
new file mode 100644
index 0000000..1351e16
--- /dev/null
+++ b/pages/API/animation/animation.json
@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "动画"
+}
diff --git a/pages/API/animation/animation.wxml b/pages/API/animation/animation.wxml
new file mode 100644
index 0000000..9cce474
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/pages/API/animation/animation.wxss b/pages/API/animation/animation.wxss
new file mode 100644
index 0000000..2a5052d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/pages/API/app-level-event/app-level-event.wxml b/pages/API/app-level-event/app-level-event.wxml
index 6bd620b..a6e73a0 100644
--- a/pages/API/app-level-event/app-level-event.wxml
+++ b/pages/API/app-level-event/app-level-event.wxml
@@ -1,5 +1,5 @@
-<import src="../../../common/head.wxml" />
-<import src="../../../common/foot.wxml" />
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
 
 <view class="container">
   <template is="head" data="{{title: 'getLaunchOptionsSync'}}"/>
diff --git a/pages/API/index/index.js b/pages/API/index/index.js
index b43c8c1..c3f3494 100644
--- a/pages/API/index/index.js
+++ b/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',
diff --git a/pages/API/menu-info/menu-info.js b/pages/API/menu-info/menu-info.js
new file mode 100644
index 0000000..f066829
--- /dev/null
+++ b/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: {}
+    })
+  }
+})
diff --git a/pages/API/menu-info/menu-info.json b/pages/API/menu-info/menu-info.json
new file mode 100644
index 0000000..507e012
--- /dev/null
+++ b/pages/API/menu-info/menu-info.json
@@ -0,0 +1,3 @@
+{
+    "launchOptions": "获取小程序启动时的参数"
+}
diff --git a/pages/API/menu-info/menu-info.wxml b/pages/API/menu-info/menu-info.wxml
new file mode 100644
index 0000000..4436d51
--- /dev/null
+++ b/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>
diff --git a/pages/API/menu-info/menu-info.wxss b/pages/API/menu-info/menu-info.wxss
new file mode 100644
index 0000000..2860688
--- /dev/null
+++ b/pages/API/menu-info/menu-info.wxss
@@ -0,0 +1,7 @@
+.page-body-info {
+  height: 180px;
+}
+
+.btn-area {
+  width: 100%;
+}