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

2024-11-29 17:03:00

在微信小程序的交互效果中，通常通过各种动画效果来增强用户体验，本文通过微信小程序原生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()方法执行循环调用。至此，即可实现效果图中的显示效果。

总结

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

微信小程序循环及嵌套循环的使用总结

微信小程序循环及嵌套循环的使用总结关于微信小程序,最近被安排做微信小程序,首次接触,总体来说上手不是太困难. 对于小程序的循环问题颇有感触,因为自己绑定数据到界面无数次用到循环和嵌套循环. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中定义的对象中: //首页话题列表 wx.request({ url: 'https://*******************', method: 'POST', data: { pageNum: 1, pageSize: 10 },
微信小程序开发之animation循环动画实现的让云朵飘效果

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所
微信小程序实现给循环列表添加点击样式实例

微信小程序实现给循环列表添加点击样式实例微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie
微信小程序的动画效果详解

前言由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ
微信小程序小程序制作及动画（animation样式）详解

微信小程序制作实现效果图: 微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 在看到上图,小伙伴
微信小程序 for 循环详解

1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu
微信小程序获取循环元素id以及wx.login登录操作

微信小程序获取循环元素id以及wx.login登录操作通过点击方法获取循环数据元素的id例: wxml里: <view id="list" wx:for="{{txt}}" > <text id="L_name">{{item.name}}</text> <text id="L_price">￥{{item.price}}/{{item.unit}}</text>
微信小程序中页面FOR循环和嵌套循环

微信小程序中页面FOR循环和嵌套循环单个循环 <view wx:for="{{pinpaiTishi}}" wx:key="{{xxx}}"> <view wx:if="{{item.name!=null}}" wx:key="{{xxxx}}"> //判断name是否为null <view class="tr"> <view class="td-lef
微信小程序实现循环动画效果

在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果: 上图中的"关注公众号"动画就是我们要实现的效果. 为了实现上文中的效果,我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明:创建一个动画实例animation.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画
微信小程序有旋转动画效果的音乐组件实例代码

在微信开发中,写过的一个简单的音乐播放组件,记录下. music 音乐播放组件. 属性属性名类型默认值说明 music String 传入的音乐资源地址 musicStyle String (随便写了个) 音乐组件的样式 rotate Boolean true 播放时是否有旋转效果 iconOn String (随便写了个) 音乐播放时的icon地址 iconOff String (随便写了个) 音乐暂停时的icon地址代码 properties: { // 音乐路径 music:
微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&
微信小程序实现animation动画

微信小程序实现animation动画,具体内容如下 1. 创建动画实例 wx.createAnimation(OBJECT) 创建一个动画实例animation.调用实例的方法来描述动画.最后通过动画实例的export方法导出动画数据传递给组件的animation属性. 注意: export 方法每次调用后会清掉之前的动画操作动画队列调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动
微信小程序顶部可滚动导航效果

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序实现星星评价效果

本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下代码实现 wxml文件  <view class='container'> <view class='evaluate_contant'>  <block wx:for='{{evaluate_contant}}' wx:key='' wx:f
微信小程序下拉菜单效果的实例代码

//wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te
微信小程序实现弹框效果

本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo
微信小程序实现自定义动画弹框/提示框的方法实例

目录前言 css3 实现动画小程序动画 API-实现动画结语相关文档前言在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画如下是wxml代码 <view> <view class="click-btn" catcht
微信小程序实现循环嵌套数据选择

本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码,供大家参考,具体内容如下一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常循环,内层循环需要利用wx:for-item将item重新命名. <scroll-view scroll-y class="scrollTime"> <view class="dateItem

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

相关推荐

随机推荐