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

2019-11-19 15:46:45

字体：大中小

来源：转载

供稿：网友

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

效果图：