微信小程序实现循环动画效果


Posted in Javascript onJuly 16, 2018

在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果:

微信小程序实现循环动画效果 

 上图中的“关注公众号”动画就是我们要实现的效果。

 为了实现上文中的效果,我们首先来看一下微信小程序关于动画的官方API

微信官方API学习

wx.createAnimation(OBJECT)

说明:创建一个动画实例animation。调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

属性方法:

微信小程序实现循环动画效果 

主要说明一下:timingFunction

微信小程序实现循环动画效果 

通过上述中的timingFunction值,可以设置动画的执行效果。

动画和动画方法

微信小程序实现循环动画效果 

注:旋转、缩放、偏移、倾斜、矩阵变形等API本文不在介绍,可参考官方API。

效果实现

通过上文的介绍,结合官方API文档,已经对创建动画的方法有了基本了解,接下来,开始实现效果图中的动画效果。

1.wxml文件添加动画属性

在wxml中创建一个布局,添加动画属性:

<view class='pro-attention' bindtap='toAttention' animation='{{attentionAnim}}'>
 <text>关注公众号</text>
</view>

2.JS中动画效果实现

Page({
 data: {
  attentionAnim: '',
  //....其他配置
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
  var attentionAnim = wx.createAnimation({
   duration: 150,
   timingFunction: 'ease',
   delay: 0
  })
  //设置循环动画
  this.attentionAnim = attentionAnim
  var next = true;
  setInterval(function () {
   if (next) {
    //根据需求实现相应的动画
    this.attentionAnim.rotate(3).step()
    next = !next;
   } else {
    this.attentionAnim.rotate(-3).step()
    next = !next;
   }
   this.setData({
    //导出动画到指定控件animation属性
    attentionAnim: attentionAnim.export()
   })
  }.bind(this), 150)
 },
//....

通过wx.createAnimation创建一个动画,setInterval()方法执行循环调用。至此,即可实现效果图中的显示效果。

总结

以上所述是小编给大家介绍的微信小程序循环动画效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
AngularJS中的模块详解
Jan 29 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 #Javascript
Vue实现自定义下拉菜单功能
Jul 16 #Javascript
vue实现城市列表选择功能
Jul 16 #Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 #Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 #Javascript
JS在if中的强制类型转换方式
Jul 15 #Javascript
微信小程序form表单组件示例代码
Jul 15 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
vue--vuex详解
2019/04/15 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python如何对实例属性进行类型检查
2018/03/20 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
2014年小学植树节活动方案
2014/03/02 职场文书
党员公开承诺书范文
2014/03/25 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014年教师工作总结
2014/11/10 职场文书
婚前保证书范文
2015/02/28 职场文书
个人年终总结范文
2015/03/09 职场文书
抢劫罪辩护词
2015/05/21 职场文书
环境卫生标语
2015/08/03 职场文书
会议室管理制度范本
2015/08/06 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers