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

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

 

1.wxml文件中： 2.[html] view plain copy 3.<view class="bottomViewItem">  4.<view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value">  5.<view class="bottomMiddleHeaderItem" animation="{{animationMiddleHeaderItem}}">  6.<!-- 心跳 -->  7.<view class="bottomMiddleHeaderItemSubView">  8.<image src="/images/detail_vote_heart.png" style="width:32rpx; height:32rpx;" animation="{{animationMiddleHeaderItem}}"></image>  9.</view>  10.<!-- 投票文字 -->  11.<view class="bottomMiddleHeaderItemSubView">投票</view>  12.</view>  13.</view>  14.</view> 

js文件中：

1.[javascript] view plain copy 2.// 页面渲染完成  3.onReady: function () {  4.var circleCount = 0;  5.// 心跳的外框动画  6.this.animationMiddleHeaderItem = wx.createAnimation({  7.duration:1000, // 以毫秒为单位  8./**  9.* http://cubic-bezier.com/#0,0,.58,1  10* linear 动画一直较为均匀  11.* ease 从匀速到加速在到匀速  12.* ease-in 缓慢到匀速  13.* ease-in-out 从缓慢到匀速再到缓慢  14.*  15.* http://www.tuicool.com/articles/neqMVr  16.* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过  17.* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过  18.*/  19.timingFunction: 'linear',  20.delay: 100,  21.transformOrigin: '50% 50%',  22.success: function (res) {  23.}  24.});  25.setInterval(function() {  26.if (circleCount % 2 == 0) {  27.this.animationMiddleHeaderItem.scale(1.15).step();  28.} else {  29.this.animationMiddleHeaderItem.scale(1.0).step();  30.} ​​​​​​​ 31.this.setData({  32.animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()  33.}); ​​​​​​​ 34.circleCount++;  35.if (circleCount == 1000) {  36.circleCount = 0;  37.}  38.}.bind(this), 1000); ​​​​​​​ 39.}, 

2、微信显示倒计时

wxml文件中：

1.[html] view plain copy 2.<!--倒计时 -->  3.<view class="countDownTimeView countDownAllView" >  4.<view class="voteText countDownTimeText">{{countDownDay}}天</view>  5.<view class="voteText countDownTimeText">{{countDownHour}}时</view>  6.<view class="voteText countDownTimeText">{{countDownMinute}}分</view>  7.<view class="voteText countDownTimeText">{{countDownSecond}}秒</view>  8.</view> 

js文件中：

1.[javascript] view plain copy 2.Page( {  3.data: {  4.windowHeight: 654,  5.maxtime: "",  6.isHiddenLoading: true,  7.isHiddenToast: true,  8.dataList: {},  9.countDownDay: 0,  10.countDownHour: 0,  11.countDownMinute: 0,  12.countDownSecond: 0,  13.},  14.//事件处理函数  15.bindViewTap: function() {  16.wx.navigateTo( {  17.url: '../logs/logs'  18.})  19.}, 20.onLoad: function() {  21.this.setData( {  22.windowHeight: wx.getStorageSync( 'windowHeight' )  23.});  24.}, ​​​​​​​ 25.// 页面渲染完成后 调用  26.onReady: function () {  27.var totalSecond = 1505540080 - Date.parse(new Date())/1000; ​​​​​​​ 28.var interval = setInterval(function () {  29.// 秒数  30.var second = totalSecond; ​​​​​​​ 31.// 天数位  32.var day = Math.floor(second / 3600 / 24);  33.var dayStr = day.toString();  34.if (dayStr.length == 1) dayStr = '0' + dayStr; ​​​​​​​ 35.// 小时位  36.var hr = Math.floor((second - day * 3600 * 24) / 3600);  37.var hrStr = hr.toString();  38.if (hrStr.length == 1) hrStr = '0' + hrStr; ​​​​​​​ 39.// 分钟位  40.var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);  41.var minStr = min.toString();  42.if (minStr.length == 1) minStr = '0' + minStr; ​​​​​​​ 43.// 秒位  44.var sec = second - day * 3600 * 24 - hr * 3600 - min*60;  45.var secStr = sec.toString();  46.if (secStr.length == 1) secStr = '0' + secStr; ​​​​​​​ 47.this.setData({  48.countDownDay: dayStr,  49.countDownHour: hrStr,  50.countDownMinute: minStr,  51.countDownSecond: secStr,  52.});  53.totalSecond--;  54.if (totalSecond < 0) {  55.clearInterval(interval);  56.wx.showToast({  57.title: '活动已结束',  58.});  59.this.setData({  60.countDownDay: '00',  61.countDownHour: '00',  62.countDownMinute: '00',  63.countDownSecond: '00',  64.});  65.}  66.}.bind(this), 1000);  67.}, ​​​​​​​ 68.//cell事件处理函数  69.bindCellViewTap: function (e) {  70.var id = e.currentTarget.dataset.id;  71.wx.navigateTo({  72.url: '../babyDetail/babyDetail?id=' + id  73.});  74.}  75.}) 

效果图：