回答

两种方式

第一、css3实现

wxm代码

 <view class="test"  >动画</view>

wxss代码

.test{
  margin: 150px auto;
  color: white;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size:22px;
  background-color: red;
  text-align: center;
  -webkit-animation-name: 'ripple';
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

@keyframes ripple {
  0% {

font-size:22px;
      line-height: 40px;
      width: 200px;
      height: 40px;
  }
  100% {
font-size:26px;
      line-height: 50px;
      width: 250px;
      height: 50px;
  }
}

第二、js

wxml的代码

 <view animation="testani"  >动画</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var circleCount = 0; 
  // 心跳的外框动画 
  this.animationMiddleHeaderItem = wx.createAnimation({ 
  duration:1000, // 以毫秒为单位 

  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({ 
   testani: this.animationMiddleHeaderItem.export() 
  }); 
  circleCount++; 
  if (circleCount == 1000) { 
   circleCount = 0; 
  } 
  }.bind(this), 1000); 
  },


})