当前位置:首页 > 日记 > 正文

微信小程序 连续旋转动画(this.animation.rotate)详解

微信小程序 连续旋转动画(this.animation.rotate)详解

微信小程序 连续旋转动画

一、.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就行!

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

Excel中图表坐标轴的数值怎么修改

Excel中图表坐标轴的数值怎么修改

图表,修改,坐标轴,数值,电脑软件,  在制作Excel表格时,通常会图表结合,帮助我们更清晰的理解,也能更精确的分析。但有时候需要改变坐标轴的数值时,应该用什么办法更好修改呢?以下是小编为您带来的关于Excel中图表坐标轴的数值修改,希望对您有…

excel代入公式的详细图解教程

excel代入公式的详细图解教程

代入,方法,教程,公式,详细,  Excel中经常需要使用到代入公式的技巧,这样更方便我们进行计算操作。代入公式其实并不难,还没有掌握这一方法的小伙伴,可以看看以下关于excel代入公式的方法,希望阅读过后对你有所启发!excel代入公式的方法代入公…

Bootstrap modal只加载一次数据的

Bootstrap modal只加载一次数据的

加载,推荐,数据,解决办法,电脑软件,1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>…

怎样对Excel2007表格中的值作出评

怎样对Excel2007表格中的值作出评

评价,表格,电脑软件,Excel,  对Excel中的值作出评价,简单地说,评价就是让数值变成汉字。还是不懂?没关系,以下是小编为您带来的关于对Excel表格中的值作出评价,希望对您有所帮助。对Excel表格中的值作出评价1 用Excel2007打开一篇工作表,并选…

WPS演示怎样制作倒计时效果WPS制作

WPS演示怎样制作倒计时效果WPS制作

方法,倒计时,效果,演示,电脑软件,  利用WPS演示制作一个提醒同学们上课的倒计时效果。下面是小编为大家整理的WPS演示制作倒计时效果的方法,希望大家能够从中有所收获!WPS演示制作倒计时效果的方法WPS演示制作倒计时效果的步骤1:启动WPS演…

20行JS代码实现网页刮刮乐效果

20行JS代码实现网页刮刮乐效果

代码实现,网页,效果,电脑软件,JS,分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下盖伦.jpg刮刮乐.gifHTML部分<body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </bo…

最新下雨天心情一句话表达心情说说

最新下雨天心情一句话表达心情说说

下雨天,心情,句话,最新,雨天,  下雨天,心情也跟着惆怅,用一句话来表达下雨天的心情.今天小编带来精选下雨天心情个性签名 下雨天心情说说、下雨天心情好、心情不好的说说&hellip;&hellip; 欢迎大家阅读。===更多热门的下雨天说说、下雨天图…

微信小程序遇到修改数据后页面不渲

微信小程序遇到修改数据后页面不渲

数据,修改,页面,程序,电脑软件,微信小程序遇到修改数据后页面不渲染的问题解决前言:去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的…

JavaScript你不知道的一些数组方法

JavaScript你不知道的一些数组方法

数组方法,你不知道,电脑软件,JavaScript,concatvar a = [1,2,3];a.concat([4,5,6],7,8);//[1,2,3,4,5,6,7,8]注意,a数组并没有改变,只是返回了一个新数组。copyWithin它接受三个参数。target (必需):从该位置开始替换数据。start (可选):从该位置开…

Excel中2010版进行导入网站数据的

Excel中2010版进行导入网站数据的

网站,数据,操作技巧,操作步骤,电脑软件,  在Excel中,可以利用&ldquo;获取外部数据&rdquo;功能导入网页中的数据。今天,小编就教大家在Excel中2010版进行导入网站数据的操作技巧。Excel中2010版进行导入网站数据的操作步骤单击&ldquo;自网站…

JS实现匀加速与匀减速运动的方法示

JS实现匀加速与匀减速运动的方法示

方法,减速运动,示例,电脑软件,JS,本文实例讲述了JS实现匀加速与匀减速运动的方法。分享给大家供大家参考,具体如下:/* * 动画帧函数 * * */ var requestFrame=function(){ var prefixList=['webkit','moz','ms']; var func; for(va…

PPT2007怎么将视频格式转换图文教

PPT2007怎么将视频格式转换图文教

教程,格式转换,图文教程,转换成,视频,  怎样把PPT转换成视频?通过将PPT输出为视频格式,可以实现更广泛的观看PPT操作。下面小编马上就告诉大家将ppt输出为视频的方法吧。PPT2007转换成视频放映教程打开要转换成视频的PPT。02选择幻灯片放…