App制作者希望有一些按钮，引导用户去操作，那么带动画会起到一定的引流作用吧！
本主编就在此分享一款。效果如下，如果是你需要的，请继续往下看代码。不是需要的朋友就不用看了。
WXML
<view class="bottomViewItem">
<button class="bottomMiddleHeaderView" open-type="share">
<view class="bottomMiddleHeaderItem" animation="{{animationMiddleHeaderItem}}">
<!-- 心跳 -->
<view class="bottomMiddleHeaderItemSubView">
<image src="/image/wx.jpg" style="width:50rpx; height:50rpx;" animation="{{animationMiddleHeaderItem}}"></image>
</view>
<!-- 分享文字 -->
<view class="bottomMiddleHeaderItemSubView">分享好友</view>
</view>
</button>
</view>
css.
.bottomMiddleHeaderView{
font-size:24rpx;
position: fixed;
top: 300rpx;
right: 0px;
}
button::after {
border: none;
}
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);
},
拿走不谢。可以添加我的小程序查看效果（扫描下方二维码），如果小程序中哪些技术点大家感兴趣，可以直接私信我。
微信号：cleversoft
