this.data.animationIbox.translate3d(0, -842,0).step();
this.data.animation2.translate3d(0,50,0).step();
this.data.animationText2.opacity(1).translate3d(0,-100,0).step();
this.setData({
animationIboxData: this.data.animationIbox.export(),
animationData2: this.data.animation2.export(),
animationTextData2: this.data.animationText2.export(),
})
代码很简单,ios流畅,安卓下有些卡顿,机器是华为p30pro,已经是主流机器了,是不是小程序性能不太行,不适合加动画
能做个代码片段吗
//index.js
//获取应用实例
const app = getApp();
Page({
data: {
animationIbox: null,
animation2: null,
animationTextData2:null,
animationText2:null,
animationIboxData:null,
animationData2: null
},
createAnimationAndRun(dur,ease){
let _this = this;
this.data.animationIbox.translate3d(0, '-842rpx',0).step();
this.data.animation2.translate3d(0, '50rpx',0).step();
this.data.animationText2.opacity(1).translate3d(0, '-100rpx',0).step();
this.setData({
animationIboxData: this.data.animationIbox.export(),
animationData2: this.data.animation2.export(),
animationTextData2: this.data.animationText2.export(),
})
},
maintouchend(event) {
this.createAnimationAndRun(500, 'ease-out');
},
onLoad: function () {
let _this = this;
var _dur = 500, _ease = 'ease-out';
_this.data.animationIbox = wx.createAnimation({ duration: _dur, timingFunction: _ease})
_this.data.animation1 = wx.createAnimation({ duration: _dur, timingFunction: _ease})
_this.data.animation2 = wx.createAnimation({ duration: _dur, timingFunction: _ease})
_this.data.animationText2 = wx.createAnimation({ duration: _dur, timingFunction: _ease})
}
})
<view class="iwrap" bindtouchend="maintouchend">
<view class="iboxinner" animation="{{animationIboxData}}">
<view class="imageshow im1" style="z-index:2;" animation="{{animationData1}}">
<image src="../../image/1.jpg" mode="widthFix" style="width:100%;">image>
<view class="textview" bindtap="showlinkdetailview" data-linkid="1">
<text class="txt1">t1text>
<text class="txt2">t2text>
<text class="button">moretext>
view>
view>
<view class="imageshow im2" style="margin-top:-50rpx;" animation="{{animationData2}}" bindtap="moveToClip" data-clip="1">
<image src="../../image/2.jpg" mode="widthFix" style="width:100%;">image>
<view class="textview" animation="{{animationTextData2}}" bindtap="showlinkdetailview" data-linkid="2">
<text class="txt1">t1text>
<text class="txt2">t2text>
<text class="button">moretext>
view>
view>
view>
view>
data: {
麻烦帮看看