评论

制作带心跳动画按钮

为按钮添加动画

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

点赞 1
收藏
评论
登录 后发表内容