微信小程序如何開發(fā)animation心跳的動畫效果

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何開發(fā)animation心跳的動畫效果，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

10年的漣水網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整漣水建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“漣水網(wǎng)站設(shè)計”,“漣水網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實(shí)執(zhí)行。

1、微信小程序開發(fā)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% 直到動畫持續(xù)時間結(jié)束 一閃而過 
  * step-end 保持 0% 的樣式直到動畫持續(xù)時間結(jié)束  一閃而過 
  */ 
  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文件中：

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

js文件中：

Page( { 
 data: { 
 windowHeight: 654, 
 maxtime: "", 
 isHiddenLoading: true, 
 isHiddenToast: true, 
 dataList: {}, 
 countDownDay: 0, 
 countDownHour: 0, 
 countDownMinute: 0, 
 countDownSecond: 0, 
 }, 
 //事件處理函數(shù) 
 bindViewTap: function() { 
 wx.navigateTo( { 
  url: '../logs/logs' 
 }) 
 }, 
 onLoad: function() { 
 this.setData( { 
  windowHeight: wx.getStorageSync( 'windowHeight' ) 
 }); 
 }, 
 // 頁面渲染完成后 調(diào)用 
 onReady: function () { 
 var totalSecond = 1505540080 - Date.parse(new Date())/1000; 
 var interval = setInterval(function () { 
  // 秒數(shù) 
  var second = totalSecond; 
  // 天數(shù)位 
  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: '活動已結(jié)束', 
  }); 
  this.setData({ 
   countDownDay: '00', 
   countDownHour: '00', 
   countDownMinute: '00', 
   countDownSecond: '00', 
  }); 
  } 
 }.bind(this), 1000); 
 }, 
 //cell事件處理函數(shù) 
 bindCellViewTap: function (e) { 
 var id = e.currentTarget.dataset.id; 
 wx.navigateTo({ 
  url: '../babyDetail/babyDetail?id=' + id 
 }); 
 } 
})

效果圖：

關(guān)于“微信小程序如何開發(fā)animation心跳的動畫效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：微信小程序如何開發(fā)animation心跳的動畫效果
本文URL：http://m.jiaotiyi.com/article/gpiigg.html