摘要：
步骤1：配置animation.xml文件（相当于html中显示的页面）˂templateis=”header“data=”｛｛t
第一步：配置animation.wxml文件（相当于html显示的页面）
<import src="http://t.zoukankan.com/common/header.wxml" /> <import src="http://t.zoukankan.com/common/footer.wxml" /> <view class="container"> <template is="header" data="{{title: 'createAnimation'}}"/> <view class="page-body"> <view class="page-body-wrapper"> <view class="animation-element-wrapper"> <view class="animation-element" animation="{{animation}}"></view> </view> <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-reset" bindtap="reset">还原</button> </view> </view> </view> <template is="footer" /> </view>
第二步：配置animation.wxss文件（相当于html的css文件）
.page-body-wrapper { flex-grow: 1; } .animation-element-wrapper { display: block; margin-bottom: 20rpx; } .animation-element { 200rpx; height: 200rpx; background-color: #1AAD19; } .animation-buttons { padding: 50rpx 50rpx 10rpx; border-top: 1px solid #ccc; display: flex; flex-grow: 1; overflow-y: scroll; flex-direction: row; flex-wrap: wrap; 100%; height: 400rpx; box-sizing: border-box; } .animation-button { 290rpx; margin: 20rpx auto; background-color:bisque; } .animation-button-reset { 610rpx; margin: 20rpx auto; background-color:bisque; } page { background-color: #fbf9fe; height: 100%; } .container { display: flex; flex-direction: column; min-height: 100%; justify-content: space-between; } .page-header { display: flex; font-size: 32rpx; color: #aaa; margin-top: 50rpx; flex-direction: column; align-items: center; } .page-header-text { padding: 20rpx 40rpx; } .page-header-line { 150rpx; height: 1px; border-bottom: 1px solid #ccc; } .page-body { 100%; display: flex; flex-direction: column; align-items: center; flex-grow: 1; overflow-x: hidden; } .page-body-wrapper { margin-top: 50rpx; display: flex; flex-direction: column; align-items: center; 100%; } .page-body-wrapper form { 100%; } .page-body-wording { text-align: center; padding: 200rpx 100rpx; } .page-body-info { display: flex; flex-direction: column; align-items: center; background-color: #fff; margin-bottom: 50rpx; 100%; padding: 50rpx 0 150rpx 0; } .page-body-title { margin-bottom: 100rpx; font-size: 32rpx; } .page-body-text { font-size: 30rpx; line-height: 26px; color: #ccc; } .page-body-text-small { font-size: 24rpx; color: #000; margin-bottom: 100rpx; } .page-body-form { 100%; background-color: #fff; display: flex; flex-direction: column; 100%; border: 1px solid #eee; } .page-body-form-item { display: flex; align-items: center; margin-left: 30rpx; border-bottom: 1px solid #eee; height: 88rpx; font-size: 34rpx; } .page-body-form-key { 180rpx; color: #000; } .page-body-form-value { flex-grow: 1; } .page-body-form-value .input-placeholder { color: #b2b2b2; } .page-body-form-picker { display: flex; justify-content: space-between; height: 100rpx; align-items: center; font-size: 36rpx; margin-left: 20rpx; padding-right: 20rpx; border-bottom: 1px solid #eee; } .page-body-form-picker-value { color: #ccc; } .page-body-buttons { 100%; } .page-body-button { margin: 25rpx; } .page-body-button image { 150rpx; height: 150rpx; } .page-footer { text-align: center; color: #1aad19; font-size: 24rpx; margin: 20rpx 0; } .green{ color: #09BB07; } .red{ color: #F76260; } .blue{ color: #10AEFF; } .yellow{ color: #FFBE00; } .gray{ color: #C9C9C9; } .strong{ font-weight: bold; } .bc_green{ background-color: #09BB07; } .bc_red{ background-color: #F76260; } .bc_blue{ background-color: #10AEFF; } .bc_yellow{ background-color: #FFBE00; } .bc_gray{ background-color: #C9C9C9; } .tc{ text-align: center; } .page input{ padding: 20rpx 30rpx; background-color: #fff; } checkbox, radio{ margin-right: 10rpx; } .btn-area{ padding: 0 30px; } .btn-area button{ margin-top: 20rpx; margin-bottom: 20rpx; } .page { min-height: 100%; flex: 1; background-color: #FBF9FE; font-size: 32rpx; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; overflow: hidden; } .page__hd{ padding: 50rpx 50rpx 100rpx 50rpx; text-align: center; } .page__title{ display: inline-block; padding: 20rpx 40rpx; font-size: 32rpx; color: #AAAAAA; border-bottom: 1px solid #CCCCCC; } .page__desc{ display: none; margin-top: 20rpx; font-size: 26rpx; color: #BBBBBB; } .section{ margin-bottom: 80rpx; } .section_gap{ padding: 0 30rpx; } .section__title{ margin-bottom: 16rpx; padding-left: 30rpx; padding-right: 30rpx; } .section_gap .section__title{ padding-left: 0; padding-right: 0; } .section__ctn{ }
第三步：配置animation.json文件（配置页面的标题、导航栏等信息）
{ "navigationBarTitleText": "趣味方块" }
第四步：配置animation.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() }) } })
html的js文件）