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