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

2019独角兽企业重金招聘Python工程师标准>>>

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 

 }); 

 } 

}) 

效果图：

转载于:https://my.oschina.net/dreawercn/blog/3032505