微信小程序开发animation心跳动画效果

微信小程序开发animation心跳动画效果

本文实例为大家分享了微信小程序开发animation心跳动画，供大家参考，具体内容如下

1、微信小程序开发animation心跳动画

wxml文件中：

投票

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://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文件中：

{{countDownDay}}天

{{countDownHour}}时

{{countDownMinute}}分

{{countDownSecond}}秒

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

});

}

})

效果图：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。