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

文章来源：http://www.wxapp-union.com/portal.php?mod=view&aid=2856

1、微信小程序开发animation心跳动画

wxml文件中：
[html] view plain copy
<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文件中：

[javascript] view plain copy
// 页面渲染完成  
    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文件中：

[html] view plain copy
<!--倒计时  -->  
  <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文件中：

[javascript] view plain copy
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  
    });  
  }  
})  

效果图：