<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx; bottom:10px;position: absolute;"></view>

  

Page({
data: {
animationData: {}
},
onShow: function () {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
}) this.animation = animation // animation.scale(2, 2).rotate(45).step() this.setData({
animationData: animation.export()
})
var n = 0;
//连续动画需要添加定时器,所传参数每次+1就行
setInterval(function () {
// animation.translateY(-60).step()
n=n+1;
console.log(n);
this.animation.rotate(180 * (n)).step()
this.setData({
animationData: this.animation.export()
})
}.bind(this), 1000)
}, })

  如果想喝数据加载联系起来的话,这里的n应当设置成page里面data的一个数值

微信小程序连续动画的更多相关文章

  1. 微信小程序(7)--微信小程序连续旋转动画

    微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...

  2. .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转

    .net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...

  3. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

  4. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  5. 微信小程序Animation动画的使用

    目录 1,前言 2,属性 3,使用 1,前言 和css3动画不同,小程序中动画是主要是通过js控制的,简单来说就是创建一个动画实例animation.调用实例的方法来定义动画效果.最后通过动画实例的e ...

  6. 微信小程序连续旋转动画this.animation.rotate

    一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...

  7. 微信小程序:动画(Animation)

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

  8. 微信小程序——实现动画循环播放

    今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...

  9. [微信小程序] 当动画(animation)遇上延时执行函数(setTimeout)出现的问题

    小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错.本文先告诉解决方法,后分析报错原因 1.解决方法: 在 setTimeout() ...

随机推荐

  1. (笔记)Linux内核中ioremap映射的透彻理解

    几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器.状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址.根据CPU体系结构的不同,CPU对IO端口的编址方式有两种: (1)I ...

  2. Tomcat 的 DefaultServlet

    问题描述: 群里有人测试 Spring MVC,没有配置任何Controller,只配置了一个view resolver,指定了前缀后缀. 然后,他问的是 当访问 localhost:8080/tes ...

  3. 使用3ds Max制作简单卧室

    一.介绍 学习目标:熟练使用“标准基本体”和“扩展基本体”内的按钮来创建对象. 软件环境:3ds Max2015 二.实验步骤 1,启动3ds Max,使用“长方体”工具在场景中创建一个长方体作为空间 ...

  4. Java如何以不同国家的格式显示时间?

    在Java中,如何以不同国家的格式显示时间? 以下示例使用Locale类和DateFormat类来显示不同国家格式的日期. package com.yiibai; import java.text.D ...

  5. TPshop表结构

    tp_account_log -- 账户表 字段名 字段类型 默认值 描述 log_id mediumint(8) unsigned   日志id user_id mediumint(8) unsig ...

  6. (原)linux下利用cmake来编译jthread开源库

    其实上次在用hisi3531平台的时候,就已经编译过一次这个库了,这次换了平台环境,交叉编译器变成了arm-hisiv100-linux-工具链,所以,没办法只能重新来过. 因为之前编译过,所以这次还 ...

  7. Linux下设置SSH Server设置时间链接限制

    OpenSSH基于安全的理由,如果用户连线到SSH Server后闲置一段时间,SSH Server会在超过特定时间后自动终止SSH连线.本人习惯长时间连接,需要做如下修改: 1.打开ssh配置文件: ...

  8. 让 Oracle 11g 32位运作在64位 Windows 上

    并非不能运行. 本人安装版未曾尝试,但绿色版倒是运行成功了. 很简单:注册表的位置发生了变化而已! 默认(32位.64位),oracle会读取以下注册表的位置:      [HKEY_LOCAL_MA ...

  9. Array常用函数收藏

    1.isArray 语法:Array.isArray(obj) 说明:判断一个对象是否是数组. 例如: Array.isArray([]); Array.isArray([1]); Array.isA ...

  10. vs2010如何安装qt插件

    Qt默认使用mingw编译,不支持VS编译器,因此,如果需要用VS开发,需要将Qt重新编译.前提:Qt已安装(http://qt.nokia.com/downloads-cn),VS已安装. 1.下载 ...