微信小程序开发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: #39;linear #39;, 
 delay: 100, 
 transformOrigin: #39;50% 50% #39;, 
 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: #39;../logs/logs #39; 
 onLoad: function() { 
 this.setData( { 
 windowHeight: wx.getStorageSync( #39;windowHeight #39; ) 
 }); 
 // 页面渲染完成后 调用 
 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 = #39;0 #39; + dayStr; 
 // 小时位 
 var hr = Math.floor((second - day * 3600 * 24) / 3600); 
 var hrStr = hr.toString(); 
 if (hrStr.length == 1) hrStr = #39;0 #39; + hrStr; 
 // 分钟位 
 var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60); 
 var minStr = min.toString(); 
 if (minStr.length == 1) minStr = #39;0 #39; + minStr; 
 // 秒位 
 var sec = second - day * 3600 * 24 - hr * 3600 - min*60; 
 var secStr = sec.toString(); 
 if (secStr.length == 1) secStr = #39;0 #39; + secStr; 
 this.setData({ 
 countDownDay: dayStr, 
 countDownHour: hrStr, 
 countDownMinute: minStr, 
 countDownSecond: secStr, 
 }); 
 totalSecond--; 
 if (totalSecond 0) { 
 clearInterval(interval); 
 wx.showToast({ 
 title: #39;活动已结束 #39;, 
 }); 
 this.setData({ 
 countDownDay: #39;00 #39;, 
 countDownHour: #39;00 #39;, 
 countDownMinute: #39;00 #39;, 
 countDownSecond: #39;00 #39;, 
 }); 
 }.bind(this), 1000); 
 //cell事件处理函数 
 bindCellViewTap: function (e) { 
 var id = e.currentTarget.dataset.id; 
 wx.navigateTo({ 
 url: #39;../babyDetail/babyDetail?id= #39; + id 
 }); 
})
效果图：
以上就是微信小程序开发animation心跳的动画效果代码实例详解的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！