微信小程序开发animation心跳的动画效果代码实例详解

这篇文章主要为大家详细介绍了微信小程序开发animation心跳动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

wxml文件中：<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>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});} })效果图：

以上就是微信小程序开发animation心跳的动画效果代码实例详解的详细内容，更多请关注小潘博客其它相关文章！