Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.animation = wx.createAnimation()
},
rotate: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
this.setData({ animation: this.animation.export() })
},
scale: function () {
this.animation.scale(Math.random() * 2).step()
this.setData({ animation: this.animation.export() })
},
translate: function () {
this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
this.setData({ animation: this.animation.export() })
},
skew: function () {
this.animation.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({ animation: this.animation.export() })
},
rotateAndScale: function () {
this.animation.rotate(Math.random() * 720 - 360)
.scale(Math.random() * 2)
.step()
this.setData({ animation: this.animation.export() })
},
rotateThenScale: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
.scale(Math.random() * 2).step()
this.setData({ animation: this.animation.export() })
},
all: function () {
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: function () {
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: function () {
this.animation.rotate(0, 0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 })
this.setData({ animation: this.animation.export() })
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<view class="container">
<view class="page-body">
<view class="page-section">
<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<scroll-view class="animation-buttons" scroll-y="true">
<button class="animation-button" bindtap="rotate">旋转</button>
<button class="animation-button" bindtap="scale">缩放</button>
<button class="animation-button" bindtap="translate">移动</button>
<button class="animation-button" bindtap="skew">倾斜</button>
<button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
<button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
<button class="animation-button" bindtap="all">同时展示全部</button>
<button class="animation-button" bindtap="allInQueue">顺序展示全部</button>
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</scroll-view>
</view>
</view>
</view>
.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: 600rpx;
box-sizing: border-box;
}
.animation-button {
float: left;
line-height: 2;
width: 300rpx;
margin: 15rpx 12rpx;
}
.animation-button-reset {
width: 620rpx;
}