微信小程序开发animation心跳的动画效果代码实例详解

<view>   <view>    <view>    <!-- 心跳 -->    <view>     <image></image>    </view>    <!-- 投票文字 -->    <view>投票</view>    </view>   </view>  </view>

// 页面渲染完成  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);  },

<!--倒计时 -->  <view>  <view>{{countDownDay}}天</view>  <view>{{countDownHour}}时</view>  <view>{{countDownMinute}}分</view>  <view>{{countDownSecond}}秒</view>  </view>

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 <p style="text-align: left">效果图：</p><p style="text-align: center;"><img id="theimg" src="https://img.php.cn/upload/article/000/000/194/bd45c618a9fd79293f570fad26b13f92-0.jpg" alt=""></p>