小程序animation动画效果(小程序组件案例)
WXML
<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>
WXSS:
.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; }
JS:
Page({ 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() }) } })