微信小程序开发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="/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 
 }); 
 } 
}) 

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。