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


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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
js原型链原理看图说明
Jul 07 Javascript
js播放wav文件(源码)
Apr 22 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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 URL编码解码函数代码
2009/03/10 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python最小二乘法矩阵
2019/01/02 Python
详解【python】str与json类型转换
2019/04/29 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python程序如何进行保存
2020/07/03 Python
服装公司总经理岗位职责
2013/11/30 职场文书
采购助理岗位职责
2014/02/16 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
超市创业计划书
2014/09/15 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
房租涨价通知
2015/04/23 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript