sannilake
/
miniprogram-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: animation + 菜单位置页面

master
luqianyu 2020-12-08 17:25:54 +08:00 committed by XuPeng
parent b8f7746481
commit 5a2f9cd8aa
11 changed files with 245 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.json
View File

@ -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",

87
pages/API/animation/animation.js 100644
View File

@ -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)
)
},
})

3
pages/API/animation/animation.json 100644
View File

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

46
pages/API/animation/animation.wxml 100644
View File

@ -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>

35
pages/API/animation/animation.wxss 100644
View File

@ -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;
}

4
pages/API/app-level-event/app-level-event.wxml
View File

@ -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'}}"/>

8
pages/API/index/index.js
View File

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

26
pages/API/menu-info/menu-info.js 100644
View File

@ -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: {}
})
}
})

3
pages/API/menu-info/menu-info.json 100644
View File

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

25
pages/API/menu-info/menu-info.wxml 100644
View File

@ -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>

7
pages/API/menu-info/menu-info.wxss 100644
View File

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