微信小程序动画循环执行
微信小程序提供了动画API,但是属性有限,并没有css3中动画循环播放等属性。
所以要在微信小程序里实现动画的循环执行,就需要借助定时器来完成。
moreToDetailAnim(){const animation = wx.createAnimation({duration: 300,timingFunction: 'linear'});//动画循环执行 通过next值来控制动画的两种状态轮流执行var next=true;var that=this;setInterval(function(){if(next){animation.translateX(3).step();next=!next;}else{animation.translateX(-3).step();next=!next;}that.setData({moreToDetailData: animation.export()})}.bind(this),300)},
上述代码即可实现动画循环执行的效果,如果不当,欢迎指正。
微信小程序动画循环执行相关推荐
- 微信小程序动画执行一次问题
微信小程序动画执行一次解决方法 简单总结一下微信动画的实现及执行步骤(更新data使用的方式和vue一样直接this.data=""). const anim = wx.creat ...
- 微信小程序动画(七):让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式 微信小程序动画(二):旋转 微信小程序动画(三):缩放 微信小程序动画(四):平移 微信小程序 ...
- 微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题 想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容 开发文档API–动画Animation 创建动 ...
- 微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用 二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放 一. 获 ...
- 微信小程序动画之圆形进度条
微信小程序动画之圆形进度条 上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
- 微信小程序-for循环
微信小程序-for循环 通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下: <view wx:for="{{arr}}">索引是:{{index ...
- 微信小程序动画效果,小程序animation动画
微信小程序动画效果 最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡 闲来无事写了一个小demo <!--wxml代码-- ...
- php 微信小程序 循环 多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
- 微信小程序for循环里面添加input事件
1,在微信小程序for循环里面添加input事件,并把input输入值添加到列表里面 2.wxml <view class="item" wx:for="{{lis ...
最新文章
- 腾讯UED 漂亮的提示信息
- 演示:标准ACL的配置、及使用技巧、和相关局限
- 636 起投资事件,吸金 574 亿
- Python的Linux的入门,学习摘要。
- BeetleX实现MessagePack和Protobuf消息控制器调用websocket服务详解
- web csrf java_在Java Web应用程序中阻止CSRF
- int?id与id??1 的意思
- freecodecamp_freeCodeCamp的服务条款
- 第二课 每天努力一点点【Linux培训实录】
- Outlook验证服务器证书,OUTLOOK2019 解决 无法验证您连接到的服务器使用的安全证书...
- win7计算机锁频图片怎么设置,Win7系统怎么使用注册表设置锁屏壁纸的图文教程...
- 获取163邮箱的邮件 并下载附件
- 小程序码(getUnlimited,createQRCode)
- 【紫书】UVA714 抄书 Copying Books
- 再讲卷积的本质及物理意义,解释的真幽默!
- AI时代,与其恐惧,不如拥抱。
- 菜刀php后门,关于菜刀后门排查
- 华为USG6000系统进入诊断视图调节风扇转速配置
- canvas 实现绘画板
- 为高考加油的html作品,为高考加油的作文
热门文章
- 接口自动化测试用例设计方法
- 洛谷 P3111 [USACO14DEC]牛慢跑Cow Jog_Sliver
- 如何使用OpenCV-Python将连续的图片制作成一个视频(附源码、【绝对可用】)
- MessageBeep - Play a System sound
- 微信公众号上的一次爬虫
- 十大经典预测算法(八)---adboost
- vivo搜索广告推广和vivo信息流广告推广哪个效果好?
- jq设置select下拉框默认选中
- swiper插件在响应式下不同宽度显示不同个数
- 刺激战场显示手机用服务器,绝地求生刺激战场提示使用模拟器登陆怎么办? 绝地求生刺激战场手机登陆显示模拟器登陆解决方法是什么?...