一对一免费咨询: 189-6833-3365

最近小程序(procedure)中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现。首先在wxml中定义imageimage class= quot;bth_image2 quot; mode= quot;aspectFi 。。
最近小程序(procedure)中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现。
首先在wxml中定义image
lt;image mode="aspectFit" animation="{{animation}}" src='。/。/images/***。png' gt; lt;/image gt;
注意其中的animation属性(property),image就由它来实现动画。
而{{animation}}我们在js的data中定义
data: {
  animation: '' },
相关代码(code)
var _animation;var _animationIndexconst _ANIMATION_TIME = 500;pages { 。。 onShow: function () {
  _animation = wx。宁波微信小程序开发其中,通过公众号关联,用户可以实现公众号与小程序之间相互跳转。小程序体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 createAnimation({
   duration: _ANIMATION_TIME,
   timingFunction: 'linear', // "linear","ease","ease-in","ease-in-OUT(出局)","ease-out","step-start","step-end"
   delay: 0,
   transformOrigin: '50% 50% 0'
  }) }, /** * 实现image旋转动画,每次旋转 120*n度 */ rotateAni: function (n) {
  _animation。rotate(120 * (n))。step()
  this。setData({
   animation: _animation。export()
  }) }, /** * 开始旋转 */ startAnimationInterval: function () {
  var that = this;
  that。rotateAni(++_loadImagePathIndex); // 进行一次旋转
  _animationIntervalId = setInterval(function () {
   that。rotateAni(++_loadImagePathIndex);
  }, _ANIMATION_TIME); // 没间隔_ANIMATION_TIME进行一次旋转 }, /** * 停止旋转 */ stopAnimationInterval: function () {
  if (_animationIntervalId gt; 0) {
   clearInterval(_animationIntervalId);
   _animationIntervalId = 0;
  } },}
微信自带的Animation可以实现一次动画,然后可以通过setInterval来达到不断旋转的目的,在使用时,控制startAnimationInterval和stopAnimationInterval即可。
注意:
这里为什么不直接给_animation。rotate(120 * (n))。step()设置一个足够大的值,原因有两点:
1、我们需要便利的控制开始和停止,2、animation在小程序(procedure)进入后台后,会持续运行,占用手机内存和cpu,而小程序依赖于微信,在iphone上会导致微信被终止运行
在使用animation时,会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空,这都是由于rotate的值设置有问题。宁波小程序开发对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。宁波微信小程序开发是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。
1、rotate的值应该是上一次结束时的值,2、如果设置了全局变量(Variable),记得在oncreate时初始化,不然第二次打开同一页面会有问题。


© 2008-2019 浙江东美 ALL RIGHTS RESERVED. XMLBAIDU
浙ICP备08154878号
找网站建设公司就上东美!
189-6833-3365
tel+86-189-6833-3365