• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序连续旋转动画this.animation.rotate

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap