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

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

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

wxml文件中：

 
   
    
    
    
     
    
    
   投票 
    
   
 

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文件中：

 
  
 {{countDownDay}}天 
 {{countDownHour}}时 
 {{countDownMinute}}分 
 {{countDownSecond}}秒 
 

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心跳的动画效果代码实例详解的详细内容，更多请关注其它相关文章！