小程序使用动画的流程
this.animation = wx.createAnimation({ //初始化创建一个实列
duration: 2000,
timingFunction: 'ease',
delay: 100
})
//进行动画函数的编译
this.animation.translateY(0).translateX(-152 / 750 * wx.getSystemInfoSync().windowWidth).step();
this.setData({
mouserightpo: this.animation.export()
})
看面代码
1 html代码
<view>
<view>
<image class="Airlines" src="./../../images/Activityone/Shenzhen Airlines.png"></image>
</view>
<view>
<image animation="{{scal}}" class="Struggle" src="./../../images/Activityone/Struggle.png"></image>
</view>
<view>
<button plain class="btn" catchtap="toWave">
<image
class="fillet filletAnimation" src="./../../images/Activityone/fillet.png"></image>
</button>
</view>
<view class="laoshu">
<view class="pr">
<view class=" Mousecenterpo" animation="{{mousecenterpo}}">
<image
class="Mousecenter"
src="./../../images/Activityone/Mousecenter.png"></image> </view>
<view class=" Mouserightpo" animation="{{mouserightpo}}"><image
class="Mouseright"
src="./../../images/Activityone/Mouserleft.png"></image> </view>
<view class=" Mouserleftpo" animation="{{mouserleft}}"><image
class="Mouserleft"
src="./../../images/Activityone/Mouseright.png"></image> </view>
<view class="layerpo">
<image
class="layer"
src="./../../images/Activityone/layer.png"></image>
</view>
</view>
</view>
</view>
2 js代码
// pages/ActiveHomePage/ActiveHomePage.js
Page({
/**
* 页面的初始数据
*/
data: {
mousecenterpo:'',//第一个老鼠
},
/**
*
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.animation = wx.createAnimation({ //
duration: 2000,
timingFunction: 'ease',
delay: 100
})
},
/*第一页 第一只老鼠动画*/
usermottoblack() {
this.animation.translateY(-160 / 750 * wx.getSystemInfoSync().windowWidth).step();
this.setData({
mousecenterpo: this.animation.export()
})
},
/*第一页 第二只老鼠动画*/
mouserightpo(){
this.animation.translateY(0).translateX(-152 / 750 * wx.getSystemInfoSync().windowWidth).step();
this.setData({
mouserightpo: this.animation.export()
})
},
/*第一页 第三只老鼠动画*/
mouserleft(){
this.animation.translateY(0).translateX(80 / 750 * wx.getSystemInfoSync().windowWidth).step();
this.setData({
mouserleft: this.animation.export()
})
},
//第一页 点击康康缩放
scal() {
this.animation.translateY(-40).scale(2, 2).step();
this.setData({
scal: this.animation.export()
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.usermottoblack();//第一个老鼠
this.mouserightpo();//第二个老鼠
this.mouserleft();//第三个老鼠
this.scal();//缩放效果
},
//点击康康
toWave() {
wx.reLaunch({
url: '/pages/wave/wave',
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function(){
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (options) {
var shareObj = {
title: "深航商旅人奋斗基因",
path: '/pages/ActiveHomePage/ActiveHomePage',
imageUrl: '',
success: function (res) {
// 转发成功之后的回调
if (res.errMsg == 'shareAppMessage:ok') {
}
}
}
// 来自页面内的按钮的转发
if (options.from == 'button') {
// 此处可以修改 shareObj 中的内容
shareObj.path = '/pages/ActiveHomePage/ActiveHomePage'
}
return shareObj;
}
})
