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

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

前端一定离不开一个东西,动画,无论是游戏还是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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

在小程序中实现 Mixins 方案

在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码

微信小程序picker组件两列关联使用方式

在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变

如何探测小程序返回到webview页面?

项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的收藏状态,做了修改后, 用户点击返回按钮回到上一个页面

微信小程序分包加载

开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必须包含一个主包,所谓的主包,即放置默认启动页/TabBar 页面

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

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

小程序获取用户信息

其实获取用户信息,一种是获取权限的,一种是不用获取权限,前者获取到的信息更多,包含一些敏感信息,包括给getaccessToken接口需要传的参数,后者就是简单获取一些头像、昵称等信息

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

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

微信小程序非跳转式组件授权登录

大致逻辑:授权 -> 发送code到服务器获取session_key - > 保存在小程序缓存内 -> 调用wx.getUserInfo和session_key获取用户信息 -> 登录成功返回访问token -> 记录登录状态 -> 执行登录成功监听(失败则不监听)

支付宝小程序个人开发者,但暂未开放支付接口

支付宝小程序今日正式面向个人开发者开放公测。这是继微信之后,业内第2家面向个人开发者开放的小程序平台。有开发能力的个人用户可访问支付宝小程序平台,扫码验证个人身份以后即可开始支付宝小程序账号申请并进行代码开发。

小程序的节流与防抖

在屏幕滚动与拖拽的时候,经常会用到一些持续触发的事件,而这类事件不可控触发频率非常高,大大影响了性能,而我们想要让其变得可控,就可以用到节流和防抖两种方案。

点击更多...

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