微信小程序连续动画
<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的一个数值
微信小程序连续动画的更多相关文章
- 微信小程序(7)--微信小程序连续旋转动画
微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...
- .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 ...
- 微信小程序的动画效果
前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...
- 微信小程序滚动动画,点击事件及评分星星制作!
前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...
- 微信小程序Animation动画的使用
目录 1,前言 2,属性 3,使用 1,前言 和css3动画不同,小程序中动画是主要是通过js控制的,简单来说就是创建一个动画实例animation.调用实例的方法来定义动画效果.最后通过动画实例的e ...
- 微信小程序连续旋转动画this.animation.rotate
一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...
- 微信小程序:动画(Animation)
简单总结一下微信动画的实现及执行步骤. 一.实现方式 官方文档是这样说的:①创建一个动画实例 animation.②调用实例的方法来描述动画.③最后通过动画实例的 export 方法导出动画数据传递给 ...
- 微信小程序——实现动画循环播放
今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...
- [微信小程序] 当动画(animation)遇上延时执行函数(setTimeout)出现的问题
小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错.本文先告诉解决方法,后分析报错原因 1.解决方法: 在 setTimeout() ...
随机推荐
- Android Service和Binder、AIDL
1.首先理解service的作用和生命周期 由于activity如果切换,那么他就不再运行,那么我们想在玩游戏的时候听播放器中的音乐,activity就应运而生了,这是最常见的一种场景,同时servi ...
- freetds 移植
移植freetds主要是为了能够在linux下,使用C语言访问微软的sqlserver数据库. 参考连接 http://blog.csdn.net/neighbor1000/article/detai ...
- Linux中的环境变量PATH
一.介绍 在讲环境变量之前,先介绍一下命令which,它用于查找某个命令的绝对路径,示例如下: 在上面的示例中,用which查到rm命令的绝对路径为/usr/bin/rm. 那么问题来了:为什么我们使 ...
- Java如何格式化24小时格式的时间?
在Java中,如何格式化24小时格式的时间?? 此示例使用SimpleDateFormat类的sdf.format(date)方法将时间格式化为24小时格式(00:00-24:00). package ...
- JDBC快速入门教程
JDBC是什么? JDBC API是一个Java API,可以访问任何类型表列数据,特别是存储在关系数据库中的数据.JDBC代表Java数据库连接. JDBC库中所包含的API通常与数据库使用于: 连 ...
- Timeout expired. The timeout period elapsed prior to completion of the operation or the server is not responding.【转】
今天碰到了一个查询异常问题,上网查了一下,感谢原创和译者 如果你使用的数据库连接类是 the Data Access Application Blocks "SqlHelper" ...
- MYSQL之You can't specify target table for update in FROM clause解决办法
mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...
- UITableView 顶部能够放大的图片
UITableView 顶部能够放大的图片 现在有挺多的应用在 UITableView 顶部加入图片,通过拖拽 UITableView 来实现图片的放大. 对比一下腾讯出品的两款App QQ:可展示更 ...
- Java 利用POI操作PPT
解析PPT文件中的图片 import java.io.File; import java.io.FileOutputStream; import org.apache.poi.hslf.HSLFSli ...
- Fedora更改密码
开机进入单用户模式 按e --->进入编辑界面之后,在“rhgb quiet”字符前面,输入“single”加空格,回车-->返回上一步中启动命令行菜单. 按 b ---> pas ...