微信小程序连续动画
<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() ...
随机推荐
- 关于Unity的开发思路
我现在的思路大概是这样的,2D游戏 Hierachy视图 有一个总的Canvas节点,挂载一个总的游戏控制脚本game_scene,下面有这样一些子节点 1.game_root:下面存放游戏界面中的物 ...
- Loss is its own Reward: Self-Supervision for Reinforcement Learning
作者用action, reward, state等当做lalbel,进行有监督训练.
- Spring系列(一):Spring的基本概念及其核心
一.Spring是什么 Spring是一种多层的J2EE应用程序框架,其核心就是提供一种新的机制管理业务对象及其依赖关系. 二.为什么要使用Spring 1. 降低组件之间的耦合度,实现软件各层之间的 ...
- e868. 获取和设置本地外观
By default, Swing uses a cross-platform look and feel called Metal. In most cases, it is more desira ...
- Ubuntu -- 安装、卸载程序的命令
通过sudo apt-get install xxxx 安装软件后,总是无法卸载干净,这里以Apache 为例,提供方法:首先sudo apt-get remove apache2再sudo apt- ...
- vs 无法启动iis
visual studio 2013/2015/2017 有时会碰到iis无法启动, 查看系统事件日志发现,缺少 aspnetcore.dll 文件 . 下载此文件,并复制到缺少的目录中,重启visu ...
- VMware安装与VMware下安装CentOS系统
1.下载安装VMware,我安装的是VMware 12.VMware从11开始不再支持32位系统,32位系统请安装VMware10. VMware官方功能特性介绍http://www.vmware.c ...
- IDEA添加非空Getter方法模板
#if($field.modifierStatic) static ## #end $field.type ## #set($name = $StringUtil.capitalizeWithJava ...
- eclipse启动genymotion插件reg启动visual box 虚拟机
Exception (VBoxManage): java.io.IOException: Cannot run program "D:\SoftwareInstall\Genymotion\ ...
- java多线程入门学习(一)
java多线程入门学习(一) 一.java多线程之前 进程:每一个进程都有独立的代码和数据空间(进程上下文),进程间的切换会有较大的开销.一个进程包括1--n个线程. 线程:同一类线程共享代码 ...