<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. MYSQL查询前30条数据

    , LIMIT 接受一个或两个数字参数. 参数必须是一个整数常量. 如果给定两个参数,第一个参数指定第一个返回记录行的偏移量, 第二个参数指定返回记录行的最大数目. 初始记录行的偏移量是 (而不是 )

  2. webdriver 执行完毕关闭chromedriver进程

    RT 背景:一个网站的登录部分用到了selenium,但是在多次登录之后,发现进程里残留了很多的chromedriver.exe进程.项目打成jar包之后放到另外的机器上跑,发现不久之后就开始卡顿,甚 ...

  3. C# 使用XPath解析网页

    1.需要安装库HtmlAgilityPack ,官网http://htmlagilitypack.codeplex.com/ // From File var doc = new HtmlDocume ...

  4. 【转】【Android】Android Studio打包全攻略

    项目写完了,现在需要把应用上传到市场,问题出现—怎么把代码变成.apk(Android的可安装文件).1. 创建签名文件2. 填写好签名参数3. 生成APK注意:签名的密码和密匙的密码注意保管,不要忘 ...

  5. e826. 获得和设置JSplitPane分开的位置

    The location of a divider is measured in pixels from either the left edge (in the case of a horizont ...

  6. C# HttpClient请求

    using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System ...

  7. Java注解Annotation学习笔记

    一.自定义注解 1. 使用关键字 @interface 2. 默认情况下,注解可以修饰 类.方法.接口等. 3. 如下为一个基本的注解例子: //注解中的成员变量非常像定义接口 public @int ...

  8. Ubuntu下从外网上北邮人BT

    首先你需要有北邮的VPN账号和密码,只要是北邮的学生都有 账号和密码不懂的请查看 VPN账号密码说明 接下来登录 https://sslvpn.bupt.edu.cn,输入账号和密码 已经登录好了 但 ...

  9. eclipse 安装图形插件(图形化编程)

    打开eclipse 查看什么版本 ,我的是Oxygen help --> install newsoftware 打开地址 http://www.eclipse.org/windowbuilde ...

  10. 阿里云centos7安装桌面环境

    centos7. 1.安装X11.yum groupinstall "X Window System". 2.安装gnome. 全安装:yum groupinstall -y &q ...