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

本文实例为大家分享了微信小程序开发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="https://www.gxlcms.com/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 
 }); 
 } 
}) 

效果图：