<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. OpenGL 阴影之Shadow Mapping和Shadow Volumes

    先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只 ...

  2. Form 表单验证

    #!/usr/bin/env python # -*- coding:utf- -*- import tornado.ioloop import tornado.web import re class ...

  3. vscode 自定义快捷键

    vscode 自定义快捷键 这两天用vscode写了下Python,感觉很舒服,只是快捷键不如人意,略作修改,放上来作为备份.smile~ 主要更改: 代码格式化 ctrl+alt+l 执行代码 ct ...

  4. e811. 创建具有嵌套菜单的弹出式菜单

    See e810 创建弹出菜单 for an example on how to display a popup menu. final JPopupMenu popupMenu = new JPop ...

  5. e614. Setting the Initial Focused Component in a Window

    There is no straightforward way to set the initial focused component in a window. The typical method ...

  6. Xianfeng轻量级Java中间件平台:流水号管理、组织机构管理

    流水号管理:现实中,经常都会和流水号打交道,至于什么是流水号,简而言之,就是按照特定格式要求产生的一个号码,并且总是按照递增的规则生成的,对于要求比较高的业务,需要流水号是连续的,比如移动营业厅排号小 ...

  7. erlang的erl文件的编码方式

    在数据源头的文件第一行加上%%coding: latin-1

  8. #define中的特殊符号

    (关于#define的用法,看这里 http://www.cppblog.com/kenny/archive/2011/04/26/145087.html) #define Conn(x,y) x## ...

  9. 安装PHP5 PHP7

    安装 PHP5 PHP官网www.php.net • 当前主流版本为5./7.1 • cd /usr/local/src/ • wget http://cn2.php.net/distribution ...

  10. 【LFM】隐语义模型

    模型解释: http://blog.csdn.net/harryhuang1990/article/details/9924377