一、.js中封装旋转动画方法

  添加animation属性

    data:{
animation:''"
}

  改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转)

      onShow: function() {
console.log('index---------onShow()')
this.animation = wx.createAnimation({
duration: 1400,
timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delay: 0,
transformOrigin: '50% 50% 0',
success: function(res) {
console.log("res")
}
})
},
rotateAni: function (n) {
console.log("rotate=="+n)
this.animation.rotate(180*(n)).step()
this.setData({
animation: this.animation.export()
})
},

二、在.wxml中需要的控件上添加animation属性

  <view class="show-iconView">
<image src="{{src}}" class="show-iconImage" animation="{{animation}}" mode="scaleToFill"></image>
</view>

三、连续动画需要添加定时器

  this.interval = setInterval所传参数每次++i就行!

微信小程序连续旋转动画this.animation.rotate的更多相关文章

  1. 微信小程序(7)--微信小程序连续旋转动画

    微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...

  2. 微信小程序开发心得--动画机制

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...

  3. 微信小程序连续动画

    <view animation="{{animationData}}" style="background:red;height:100rpx;width:100r ...

  4. “完美”解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来。

    最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点 ...

  5. 微信小程序底部弹窗动画

    第一步,在组件里编写弹窗的代码 <!-- 活动类型弹框 --> <view class='bottomModel' wx:if="{{modelFlag}}" c ...

  6. 微信小程序样式旋转

    相关文档:http://www.w3school.com.cn/cssref/pr_transform.asp index.wxss文件 注意:如果是web前端,要注意浏览器的兼容性 .x1{ wid ...

  7. 微信小程序animation有趣的自定义动画

    这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例 ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. .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 ...

随机推荐

  1. Deep Dive into Neo4j 3.5 Full Text Search

    In this blog we will go over the Full Text Search capabilities available in the latest major release ...

  2. Ajax加载数据的使用

    需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来.具体效果如最下面的图. 1.前台页面 <h1 " onclick="GetData(1)&quo ...

  3. 【noi.ac-CSP-S全国模拟赛第三场】#705. mmt

    给定数组a[],b[] 求$$c_i=\sum_{j=1}^{i} a_{\left \lfloor \frac{n}{j} \right \rfloor}·b_{i \bmod j}$$ 大概就是对 ...

  4. FIN_WAIT_2

    来自转载:http://blog.sina.com.cn/s/blog_8e5d24890102w9yi.html 上图对排除和定位网络或系统故障时大有帮助,但是怎样牢牢地将这张图刻在脑中呢?那么你就 ...

  5. Python学习笔记(一)——输入与输出

    输出:——print() Python中的输出使用print()完成 >>> 在屏幕中输出Hello World >>> print('Hello World') ...

  6. [转]Nginx配置详解

    Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也可作为 ...

  7. css悬浮在页面顶端

    .header{ position:fixed; margin-top:; width:%; z-index:; } .body{ position:relative; padding-top:119 ...

  8. js字符串去重复

    var str="fdafdasfdasfdsfdseeeu"; function te(str){ var hash=[]; var arr=new Array(); var s ...

  9. JQuery Ajax 向后台传参方式

    在jquery的ajax函数中,可以传入3种类型的数据 文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" jso ...

  10. Windows start

    启动一个单独的窗口以运行指定的程序或命令. START ["title"] [/D path] [/I] [/MIN] [/MAX] [/SEPARATE | /SHARED]   ...