本文实例为大家分享了微信小程序开发animation心跳动画，供大家参考，具体内容如下
1、微信小程序开发animation心跳动画
wxml文件中：
我要评论
<view class="bottomviewitem">
<view class="bottommiddleheaderview" bindtap="voteclick" data-id="value">
<view class="bottommiddleheaderitem" animation="{{animationmiddleheaderitem}}">
<!-- 心跳 -->
<view class="bottommiddleheaderitemsubview">
<image src="/images/detail_vote_heart.png" style="width:32rpx; height:32rpx;" animation="{{animationmiddleheaderitem}}"></image>
</view>
<!-- 投票文字 -->
<view class="bottommiddleheaderitemsubview">投票</view>
</view>
</view>
</view>
js文件中：
// 页面渲染完成
onready: function () {
var circlecount = 0;
// 心跳的外框动画
this.animationmiddleheaderitem = wx.createanimation({
duration:1000, // 以毫秒为单位
/**
* http://cubic-bezier.com/#0,0,.58,1
* linear 动画一直较为均匀
* ease 从匀速到加速在到匀速
* ease-in 缓慢到匀速
* ease-in-out 从缓慢到匀速再到缓慢
*
* http://www.tuicool.com/articles/neqmvr
* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
*/
timingfunction: 'linear',
delay: 100,
transformorigin: '50% 50%',
success: function (res) {
}
});
setinterval(function() {
if (circlecount % 2 == 0) {
this.animationmiddleheaderitem.scale(1.15).step();
} else {
this.animationmiddleheaderitem.scale(1.0).step();
}
this.setdata({
animationmiddleheaderitem: this.animationmiddleheaderitem.export()
});
circlecount++;
if (circlecount == 1000) {
circlecount = 0;
}
}.bind(this), 1000);
},
2、微信显示倒计时
wxml文件中：
<!--倒计时 -->
<view class="countdowntimeview countdownallview" >
<view class="votetext countdowntimetext">{{countdownday}}天</view>
<view class="votetext countdowntimetext">{{countdownhour}}时</view>
<view class="votetext countdowntimetext">{{countdownminute}}分</view>
<view class="votetext countdowntimetext">{{countdownsecond}}秒</view>
</view>
js文件中：
page( {
data: {
windowheight: 654,
maxtime: "",
ishiddenloading: true,
ishiddentoast: true,
datalist: {},
countdownday: 0,
countdownhour: 0,
countdownminute: 0,
countdownsecond: 0,
},
//事件处理函数
bindviewtap: function() {
wx.navigateto( {
url: '../logs/logs'
})
},
onload: function() {
this.setdata( {
windowheight: wx.getstoragesync( 'windowheight' )
});
},
// 页面渲染完成后 调用
onready: function () {
var totalsecond = 1505540080 - date.parse(new date())/1000;
var interval = setinterval(function () {
// 秒数
var second = totalsecond;
// 天数位
var day = math.floor(second / 3600 / 24);
var daystr = day.tostring();
if (daystr.length == 1) daystr = '0' + daystr;
// 小时位
var hr = math.floor((second - day * 3600 * 24) / 3600);
var hrstr = hr.tostring();
if (hrstr.length == 1) hrstr = '0' + hrstr;
// 分钟位
var min = math.floor((second - day * 3600 *24 - hr * 3600) / 60);
var minstr = min.tostring();
if (minstr.length == 1) minstr = '0' + minstr;
// 秒位
var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
var secstr = sec.tostring();
if (secstr.length == 1) secstr = '0' + secstr;
this.setdata({
countdownday: daystr,
countdownhour: hrstr,
countdownminute: minstr,
countdownsecond: secstr,
});
totalsecond--;
if (totalsecond < 0) {
clearinterval(interval);
wx.showtoast({
title: '活动已结束',
});
this.setdata({
countdownday: '00',
countdownhour: '00',
countdownminute: '00',
countdownsecond: '00',
});
}
}.bind(this), 1000);
},
//cell事件处理函数
bindcellviewtap: function (e) {
var id = e.currenttarget.dataset.id;
wx.navigateto({
url: '../babydetail/babydetail?id=' + id
});
}
})
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论