微信小程序 - 无限循环执行动画（Animation）

蔚落 2022-11-29 12:26 287阅读 0赞

## 效果图 ##

![在这里插入图片描述][20200820193326284.gif_pic_cener]

## wxml ##

<image src="https://img-blog.csdnimg.cn/20200820180305411.png" animation="{ { animationData }}">
    </image>
    
    
    
    <button bindtap="go" style="">动起来</button>

## js ##

Page({ 
    
      /* * 事件处理 */
      data: { 
        animationData: { }
      },
    
      /* * 事件处理 */
      go: function() { 
        
        // 创建动画实例(animation)
        var animation = wx.createAnimation({ 
          duration: 500,//动画持续时间
          timingFunction: 'ease',//动画以低速开始
          //具体配置项请查看文档
        })
       
       // 建立标识(用于循环)
       this.animation = animation
       var next = true;
    
        // 无限循环动画
        setInterval(function(){ 
    
          if(next){ 
            // 你要执行动画链(详见文档)
            this.animation.scale(0.8).step()
            // ----------------------- 
            next = !next;
          }
    
          else
          { 
            // 你要执行动画链(详见文档)
            this.animation.scale(1).step()
            // -----------------------
            next = !next;
          }
    
        // 导出动画
        this.setData({ 
          animationData: animation.export()
        })
          
       }.bind(this),500)
      }
    
    })

[20200820193326284.gif_pic_cener]: /images/20221124/8140e3f310d948ea97c621ffc3c5e5dc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 wepy开发微信小程序使用animate动画插件

animate下载地址：[http://animateforless.com/][http_animateforless.com] 以less为例 1，下载文件夹[http

布满荆棘的人生/ 2023年06月30日 09:05/ 0 赞/ 7 阅读

相关微信小程序 - 无限循环执行动画（Animation）

效果图 ![在这里插入图片描述][20200820193326284.gif_pic_cener] wxml

蔚落/ 2022年11月29日 12:26/ 0 赞/ 288 阅读

相关微信小程序setTimeout实现无限循环倒计时

适用场景: 循环播放视频, 广告,等我这里用一个签到送积分场景广告视频来实现该效果: 我们先来看一下效果: ![watermark_type_ZmFuZ3poZW5n

Bertha 。/ 2022年11月29日 00:49/ 0 赞/ 726 阅读

相关微信小程序 - 动画（Animation）执行过程 / 实现过程 / 实现方式

前言因官方文档描述不清晰，本文主要介绍微信小程序动画实现过程 / 实现方式。实现过程 > 推荐你对照 [官方文档][Link 1] 来看本文章，这样更有利于

傷城~/ 2022年11月28日 10:33/ 0 赞/ 452 阅读

相关微信小程序开发效果：animation心跳动画

1、[微信小程序开发][Link 1]animation心跳动画 1.wxml文件中： 2.[html] view plain copy 3.<

港控/mmm°/ 2022年06月10日 07:55/ 0 赞/ 348 阅读

相关微信小程序循环数据

新建一个页面 ![20180610174428774][] 在JS中写数据 ![20180610174435760][] 然后在wxml文件用wx:for来循环， i

深藏阁楼爱情的钟/ 2022年05月21日 22:08/ 0 赞/ 227 阅读

相关微信小程序开发-76种动画 animate.css

1、微信小程序动画有自己的方法：[官方链接][Link 1] 但需要自己去写动画效果，比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内

女爷i/ 2022年05月13日 13:42/ 0 赞/ 201 阅读

相关 21.微信小程序之动画animation

从学校回来后，已经连上了9天的班。。白天写代码，晚上回家大佬组织在线测试。。。从双休→单休→不休 \[○･｀Д´･ ○\] 好了，说说动画吧。实现一个动画效果以开红包

灰太狼/ 2022年03月25日 09:36/ 0 赞/ 264 阅读

相关微信小程序：动画（Animation）

> 简单总结一下微信动画的实现及执行步骤。官方文档是这样说的：①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动

╰+攻爆jí腚メ/ 2022年03月18日 21:18/ 0 赞/ 408 阅读

相关微信小程序滚动列表（无限滚动）

![20180507132001955][] 效果图1.0 实现方式是利用小程序原声组件swiper，方向设置为纵向：vertical=‘true’设置同时显示的滑块数

我就是我/ 2021年12月11日 14:23/ 0 赞/ 950 阅读