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

效果图：

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