微信小程序：如何制作一个带动画效果的按钮

App制作者希望有一些按钮，引导用户去操作，那么带动画会起到一定的引流作用吧！

本主编就在此分享一款。效果如下，如果是你需要的，请继续往下看代码。不是需要的朋友就不用看了。

WXML

</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

微信小程序：如何制作一个带动画效果的按钮相关推荐

基于微信小程序+爬虫制作一个表情包小程序
跟朋友聊天斗图失败气急败坏的我选择直接制作一个爬虫表情包小程序,从源头解决问题,从此再也不用担心在斗图中落入下风精彩专栏持续更新↓↓↓ 微信小程序实战开发专栏一.API 1.1 项目创建 1.2 ...
微信小程序-从零开始制作一个跑步微信小程序
首发地址一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册. 2.注册过程中需要很多认证,有很多认证,比较繁琐,如果暂时只是开发测试,不进行提审.发布的话,只要完成营业执照号填写 ...
微信小程序-从零开始制作一个跑步微信小程序 1
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言我已经把全部代码 ...
微信小程序点击卡片切换动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: html <view class='aa'><image animation=&qu ...
[微信小程序]点击切换卡片动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图, GIF:  <! ...
微信小程序傻瓜制作_傻瓜式教程：做一个带优惠券的微信小程序
优惠券一直是电商零售商家们常用的营销手段之一,如今在各种微信小程序商城中,我们也常常能见到优惠券.为什么商家这么喜欢使用优惠券呢?当然是因为它确实能有效地刺激客户消费.商家发放优惠券,利用一种对比效应 ...
python制作桌面小程序_微信小程序在线制作：快速生成一个餐饮小程序
相信很多餐饮行业的商家都遇到过这类问题:一到用餐高峰期,餐厅内就拥挤不堪,工作人员也忙得不可开交,前厅后厨来回跑,时间长了顾客也等得不耐烦.此外,外卖平台的高额抽成也让普通餐饮商家生存越来越艰难.本来 ...
微信小程序傻瓜制作_微信小程序模板制作：手把手教你做一个生鲜小程序
传统线下生鲜水果类商家如今正面临诸多问题,包括服务范围有限.客户源不稳定.缺少订单导致新鲜食材过期等等.新零售概念的提出,很多商家虽然懂得要打通线上渠道,但通常都是仅仅局限于普通O2O外卖平台,其实这 ...
微信小程序｜基于小程序+C#制作一个考试答题小程序
基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题,使考试不用再局限与某个统一的场所,只要有设备,哪里都能考试. 一.小程序

微信小程序：如何制作一个带动画效果的按钮

微信小程序：如何制作一个带动画效果的按钮相关推荐

最新文章

热门文章