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

2024-11-29 10:28:51

微信小程序连续旋转动画

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

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

微信小程序的动画效果详解

前言由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ
微信小程序实现登录页云层漂浮的动画效果

前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GIF动态图) 当我看到这张背景图的时候,强迫症立马来了,这云朵为什么不动,于是开始了一波折腾. 知识点认识animation animation 属性是一个简写属性,用于设置六个动画属性: 值描述 animation-name 规定需要绑定到选择器的 keyframe 名称 animation-duration 规定完成动画所花费的
微信小程序动画的简单实例

微信小程序--简易动画案例 wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js:
微信小程序开发之麦克风动画帧动画放大淡出

想做个录音机,第一步就卡在麦克风动画这里了. 先上gif.再吐槽. ① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在微信小程序文档动画最下面找到这么一行字.这个锅是不是可以甩出去了? ps:如果有同学能实现动画循环,一定告诉我. ② 麦克风里面是个帧动画.没有前端的基础,只能用非主流的办法凑合了. 用wx:if{{}}判断js中定义的值是不是等于图片对应的数字来控制图片的显示和隐藏.
微信小程序开发animation心跳动画效果

本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1.微信小程序开发animation心跳动画 wxml文件中: <view class="bottomViewItem"> <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> <view class="bo
微信小程序开发之录音机音频播放动画实例 (真机可用)

趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,
微信小程序小程序制作及动画（animation样式）详解

微信小程序制作实现效果图: 微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 在看到上图,小伙伴
微信小程序开发之animation循环动画实现的让云朵飘效果

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所
微信小程序连续旋转动画（this.animation.rotate）详解

微信小程序连续旋转动画一..js中封装旋转动画方法添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear'
微信小程序有旋转动画效果的音乐组件实例代码

在微信开发中,写过的一个简单的音乐播放组件,记录下. music 音乐播放组件. 属性属性名类型默认值说明 music String 传入的音乐资源地址 musicStyle String (随便写了个) 音乐组件的样式 rotate Boolean true 播放时是否有旋转效果 iconOn String (随便写了个) 音乐播放时的icon地址 iconOff String (随便写了个) 音乐暂停时的icon地址代码 properties: { // 音乐路径 music:
微信小程序canvas开发水果老虎机的思路详解

在这个超长假期中,无聊...,所以动手做一个早就计划要做的小玩意, 水果老虎机 ,嗯,这是一个小程序而不是小游戏... 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据.但,问题是动画性能过于孱弱,如图构建一个 7x7 的水果盘,动画性能估计会惨不忍睹,而且纯粹模板结构无论使用 animation 动画方法还是 css 的
微信小程序之网络请求简单封装实例详解

微信小程序之网络请求简单封装实例详解在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request
微信小程序本作用域下调用全局JS详解及实例

微信小程序本作用域下调用全局JS详解本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"
微信小程序利用css实现遮罩效果实例详解

微信小程序利用css实现遮罩效果实例详解实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi
Thinkphp5微信小程序获取用户信息接口的实例详解

Thinkphp5微信小程序获取用户信息接口的实例详解首先在官网下载示例代码, 选php的, 这里有个坑官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le
微信小程序图片自适应支持多图实例详解

微信小程序图片自适应支持多图实例详解微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名类型默认值说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE
微信小程序开发MAP（地图）实例详解

微信小程序开发MAP(地图)实例详解在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo
微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content">  <view class="author-date"> &

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

相关推荐

随机推荐

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