欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-25 10:11:05
本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1、微信小程序开发animation心跳动画 wxml文件中:...

本文实例为大家分享了微信小程序开发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 
 }); 
 } 
}) 

效果图:

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

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