关闭

微信小程序_实现动画旋转的多种方式

时间: 2018-06-26阅读: 5130标签: 小程序

前端一定离不开一个东西,动画,无论是游戏还是app还是网页,都一定有动画效果,微信小游戏,小程序也有动画效果,这里有三种办法实现小程序的动画效果。   


1、每帧setData()

onReady: function () {
    var that = this;
    setInterval(function(){
      that.onUpdate();
    },1000/60);
  },

  onUpdate: function() {
    this.setData ({
      angle: this.data.angle + 1,
    })
  }

data中的angle数据是用来设置上面图片的角度的,所以可以通过这种方法实现旋转效果,首先在启动页面的时候模拟一个update效果,每一帧执行一次。 
该种方法非常耗费性能,不推荐使用。


2、使用Animation实现旋转效果

onReady: function () {
    var animation = wx.createAnimation({
      duration: 3000,
      timingFunction: "linear",
    });  
    this.animation = animation;

    animation.rotate(45).step();
    this.setData({
      animationData: animation.export()
    })

    this.interval = setInterval(function () {
      animation.translate(30).step();
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 3000)
  },

Animation不但可以实现旋转,也可以实现放大缩小,移动等动画。 
该种方法可以使用,但是不推荐,因为我自己在使用的时候总遇到各种问题,显示有问题,旋转有问题等等,可能是我用的方法不对吧。而且通过定时器去做也是挺耗费性能的事情,微信小程序本来就性能低下。


3、使用keyfreams

.question .desc .image-rotate {
  position: absolute;
  z-index: 2;
  margin-left: 20rpx;
  margin-top: 20rpx;
  height: 280rpx;
  width: 280rpx;
  border-radius: 140rpx;
  animation: headRotate 6s linear infinite
}

/* 头像旋转效果  */
@keyframes headRotate{
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多,而且很简单。 css可以实现很多的效果,多看看css对于我们实现前端效果有很大帮助。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/895

小程序组件开发_小程序实现自定义组件的多种方式

在小程序中,目前也支持简单的组件化编程,可以把页面通用功能模块抽象成自定义组件,以以便在不同的页面中复用,提供代码可读性,降低维护成本,这篇文章主要讲解小程序实现组件开发的多种方式

Remax:使用真正的 React 构建小程序

Remax 是基于真正 React 的小程序构建工具,本文由 Ant Design 团队的 Mack 执笔,让我们跟随作者一起了解 Remax。因为 React 是我们最熟悉的技术。小程序糟糕的 API 设计已经有很多文章吐槽

微信小程序通过保存图片分享到朋友圈

小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面

微信小程序-自动定位并将经纬度解析为具体地址

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)

微信小程序遇到的坑

微信小程序开发之路上遇到的那些坑,微信小程序开发常见之坑总结,在开发过程中碰到的问题和解决:小程序textarea组件字数限制问题 、scroll-view 中不能使用 textarea 组件 、input组件的问题、关于数据绑定的问题、关于生命周期的问题、关于picker组件

微信小程序推广方式_最有效的小程序推广模式

当小程序开发完成后,就需要进行推广操作。当然推广的前提是核心功能是否能够满足用户需求,下面总结一些具体的运作方式。和大多数APP的搜索个性一样,用户搜索小程序名称就能进入小程序界面。我们需要做好关键词优化,通过搜索-微信指数

小程序跨页面交互的作用与方法

微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限,另一方面也说明了对于某些小程序 8M 的大小已经不够用了

小程序开发注意事项_我的第一个小程序

业余时间学习了下小程序开发,整理一篇关于小程序开发需要注意的事项:后端接口域名必须使用https、不能直接进行dom节点操作、尽量使用es6的箭头函数、原生的组件层级是最高的等

微信小程序版本自动更新

当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间

小程序如何改变onLoad 的执行时机?

也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!