小程序——添加动画，让图标原地旋转

让更新资料旁边的图标在原地进行旋转

WXML文件

<view class="update" bindtap="upDate">更新资料<image class=" " animation='{{animationData}}' style="width:23rpx;height:23rpx; margin-left:5rpx;  margin-top:2rpx;"  src="http://dodui.oss-cn-shenzhen.aliyuncs.com/20201106RegDoduiDoshop_xcx/updata.png"></image></view>

JS文件

//更新资料upDate: function () { // 顺时针旋转实例var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'})// 逆时针旋转实例var animation1 = wx.createAnimation({duration: 10,timingFunction: 'ease'})animation.rotate(450).step()this.setData({animationData: animation.export()})setTimeout(function () {animation1.rotate(0).step()this.setData({animationData: animation1.export()})}.bind(this), 1300);getUserInfo().then(res => {console.log("个人资料： ", res)this.setData({userInfo: res.data,});wx.showToast({title: '更新成功',icon: 'success',duration: 1000,mask: true})});}

小程序——添加动画，让图标原地旋转相关推荐

小程序添加动画效果--遇到的问题
今天我在做小程序动画的时候,发现一个问题,不能有 wx:if ,也就是不能bool类型的数据绑定,有了这个动画效果就没有效果; <view class="add-norm-box&q ...
添加图标_图标变化、小程序添加到桌面...微信电脑版这些功能更新！
乐清资讯全掌握! 打开"看乐清"微信公众号,点击右上角"-", 设为星标即可~ 全文字数:444 阅读时间:约2分钟微信PC版更新啦!新版本有很多变化可以在通 ...
[微信小程序系列] 动画案例之圆点沿着圆圈运动
作者:滴滴公共前端团队 - Tawnia 滴滴作为第一批的小程序开发者,我们也大量地用到了动画,积累了一些经验,由于市面上的小程序动画案例很少,我们也分享一部分我们做过的案例: 首先用 wx.crea ...
微信小程序-如何使用icon图标
原微信小程序使用字体图标 2017年07月03日 19:29:09 阅读数:24209 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图 ...
微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）
问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片下面就介绍一下如何 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
解决支付宝小程序安卓手机字体图标（iconfont）不显示问题
解决支付宝小程序安卓手机字体图标(iconfont)不显示问题问题:支付宝小程序部分安卓手机(真机)不显示字体图标,ios真机和模拟器都显示正常,如下图: 解决方法:iconfont默认下载下来的是 ...
css卷轴动画小程序,CSS动画｜JavaScript动画｜小程序动画
(1)CSS3 animation 动画 // 定义动画的关键帧 @keyframes xhf { from { transform:scale(0.5, 0.5); opacity:0.5; } t ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...

小程序——添加动画，让图标原地旋转

WXML文件

JS文件

小程序——添加动画，让图标原地旋转相关推荐

最新文章

热门文章