手机微信小程序流程完成可即时更改转速的css3转

2021-03-17 17:11 jianzhan

序言

本文关键详细介绍的是有关手机微信小程序流程完成可即时更改转速的css3转动动漫的有关內容,共享出来供大伙儿参照学习培训,下面话很少说了,来1起看看详尽的详细介绍吧。

先上实际效果图

最上面那1行便是个简易的换色调实际效果,极为简答就很少说了,立即上编码。

WXML

<view class='box' style='background-color:{{backgroundcolor}}'>
</view>
<view class='viewBox'>
  <button bindtap='changeColor' data-color='black' class='box'>黑</button>
  <button bindtap='changeColor' data-color='violet' class='box'>紫</button>
  <button bindtap='changeColor' data-color='orange' class='box'>橙</button>
  <button bindtap='changeColor' data-color='blue' class='box'>蓝</button>
  <button bindtap='changeColor' data-color='green' class='box'>绿</button>
</view>

JS

  data: {
    backgroundcolor:'red'
  },
  changeColor:function(e){
    this.setData({
      backgroundcolor: e.currentTarget.dataset.color
    })
  }

那末下面我们说1说这个转动的动漫。小程序流程里呢,有自身的动漫api,可是用起来觉得极为不便,并且非常容易造成倒转,对机器设备的特性耗费也多,动漫多了之后就会极为卡顿,因此還是css3的动漫较为好。

最先来写这个css3动漫

css3转动动漫

<view class='animationSlow'></view>
.animationSlow {
   width: 100rpx;
  height: 100rpx;
  background-color: orange;
  animation-name: myfirst; /*动漫的名字 */
  animation-duration: 2000ms; /*动漫从刚开始到完毕的時间*/
  animation-timing-function: linear; /*动漫实行快慢的主要参数*/
  animation-iteration-count: infinite; /*动漫实行是多少次的主要参数*//*下列是适配ios所需,主要参数实际意义与上同样*/
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
@keyframes myfirst {
  /*刚开始转的角度*/
  from {
    transform: rotate(0deg);
  }/*完毕的角度*/
  to {
    transform: rotate(360deg);
  }
}
/*适配ios*/
@-webkit-keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

实际效果图

假如只是1个1次性的动漫实际效果,如今这些编码就OK了。

假如要想即时能够更改转动的转速,大家还得再加点物品。

完成能够即时改动转速

手机微信小程序流程里涉及到到即时数据信息就防止不上Page.data这个物品。

手机微信小程序流程中的Page

Page()界定在js文档中,Page() 涵数用来申请注册1个网页页面。

Page()涵数接纳1个 object 主要参数,其特定网页页面的原始数据信息、性命周期涵数、恶性事件解决涵数等。

object主要参数为:

1.大家必须将操纵动漫時间的css特性放到内联款式中去

<view class='animationSlow' style='animation-duration: 2000ms;-webkit-animation-duration: 2000ms;'></view>

2.在网页页面对应的js中,设定操控時间的Page.data特性,将wxml里内联特性的時间改成Page.data的特性。

  data: {
    animationTime:'2000ms'
  },
<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};'></view>

3.接下来大家写几个按钮,关联上改动这个時间的方式,进而来更改转速。这1步全是基础编码,我就不贴编码了。放个实际效果图吧。


实际效果图

那末接下来关键来了:实际上这里有个bug,这个实际效果呢在安卓系统机上是1点点难题都沒有的。可是在iPhone机上,动漫1旦刚开始,再根据这个方式去改动转速,就不可以起效了。

处理IOS系统软件的BUG

上面说了,IOS系统软件上呢,动漫1旦刚开始,这个方式就不可以用了。那末咱是否能够先把这个动漫停下来,随后再改转速呢?这个方法可不能以呢?回答是毫无疑问的,可是并不是去把动漫時间改成0,而是选用了css3动漫的1个特性。CSS3 动漫实例教程

animation-play-state: paused|running;

简而言之便是先用这个特性把动漫中止,改动转速,随后再让它跑起来。这1切都得再js里开展。

1.必须在标识的内联款式里再加这个特性,在Page.data里再界定1个特性操纵刚开始中止。

<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};animation-play-state:{{status}};-webkit-animation-play-state:{{status}};'></view>
 data: {
    animationTime:'2000ms',
    status: 'running'//paused
  },

2.随后大家去改动更改转速的方式。中止>(改动>跑起来),实际效果上略微一些延迟时间。

 changeTime:function(e){
    this.setData({
      status: 'paused'
    })
    this.setData({
      timeAnimation: e.currentTarget.dataset.time,
      status: 'running'
    })
  },

3.来上实际效果图了。


实际效果图

将会动图上觉得不出来,但是你们能够去真机试1下,便可以呈现出来了。

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。