<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. 关于Unity中的世界坐标和局部坐标

    1.物体的局部坐标的方向(物体自身的方向) transform.forward. transform.right. transform.up 2.物体的世界坐标的方向 Vector3.forward. ...

  2. 安装Cocos2d-x3.0步骤

    一.在Windows环境下安装 二.在Mac环境下安装 首先,安装brew工具,参照官方网:http://brew.sh/index_zh-cn.html Cocos2d-x3.0需要安装NDK,SD ...

  3. MySQL导入数据错误error: 13 及解决办法

    先说解决办法 将sql文件放到你的账号能够访问的地方!!! 因为我用的grid账号,所以只需要将sql放到 ~grid/ 或者 /tmp等grid能够访问的地方即可. Don't place the ...

  4. 转换基于Maven的Web应用程序支持Eclipse IDE

    在上一节教程中,使用Maven创建了一个Web应用程序.这里有一个指南,告诉你如何转换Web应用程序到Eclipse IDE支持的形式. 注意,通过WTP工具Eclipse IDE支持Web应用程序, ...

  5. 让你的MyEclipse像Visual Studio 2008一样拥有强大功能智能感知功能

    Windows→Preferences→Java→Editor→Content Assist 我们看到其中的AutoActivation Delay默认值为200(单位是毫秒)也就是说在打“.”之后停 ...

  6. 模式识别之knn---KNN(k-nearest neighbor algorithm)--从原理到实现

    用官方的话来说,所谓K近邻算法,即是给定一个训练数据集,对新的输入实例,在训练数据集中找到与该实例最邻近的K个实例(也就是上面所说的K个邻居),这K个实例的多数属于某个类,就把该输入实例分类到这个类中 ...

  7. webstorm 重置所有设置

    我的是win10的,删除如下路径的文件夹C:\Users\XXX(你自己电脑用户名)\.IntelliJIdeaxxxx(版本号) 这是最快捷的方法

  8. C# 校验给定的ip地址是否合法

    函数用于检测ip地址格式是否合法,包括ip的组成格式,每隔段是否不超过255等,但这个函数不能验证这个ip地址是否可以ping通. /// <summary> /// 验证IP地址是否合法 ...

  9. chrome浏览器表单自动填充默认样式(背景变黄)-autofill

    之所以出现这样的样式, 是因为Chrome会自动为input增加如下样式. 这个样式的优先级也比较高. 无法通过important覆盖(这就比较恶心了). 解决方案(3种): 1. 关闭自动保存账号密 ...

  10. 机器学习——利用PCA来简化数据

    降维技术的好处: 1.使得数据集更易使用 2.降低很多算法的计算开销 3.取出噪声 4.使得结果易懂 在已标注和未标注的数据上都有降维技术,降维的方法: 1.主成分分析(Principal Compo ...