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


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 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
javascript实现行拖动的方法
May 27 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
一篇文章带你浅入webpack的DLL优化打包
Feb 20 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
php 时间计算问题小结
2009/01/04 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
javascript 获取函数形参个数
2014/07/31 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python基本语法经典教程
2016/03/11 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
公司股东合作协议书
2014/09/14 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
婚宴新郎致辞
2015/07/28 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL