小程序云开发技术训练在微信小程序中使用animate.css动画效果

刺骨的言语ヽ痛彻心扉 2023-08-17 16:33 38阅读 0赞

# 在微信小程序中使用animate.css动画效果 #

### 一.在自已的app.wxss文件中引入animate.css: ###

**@import /style/animate.wxss**

![20190929025853775.png][]

从[https://github.com/daneden/animate.css][https_github.com_daneden_animate.css]下载animate.css文件之后,有两件事可做:

第1,改文件名,把animate.css改名为animate.wxss,再引入.我的文件路径是根目录下的style文件夹里.这个改名要做,不做的话会报错.

第2,可以把animate文件里的用于浏览器的部分删除,就是带有-webkit-的内容,以减少空间占用,小程序对空间大小有限制.这个也可以不做.注意,如果做的话,删除-webkit-相关内容的时候,要把窗口最大化,在用sublime text打开animate文件的时候,使用了快捷键ctrl+x来删除整行,由于没最大化,自动换行的部分没删除干净,导致返工.如果能编程自动删除可能会方便些,以后升级不用手工删除费事,也许以后的版本会有直接用于小程序的.好了,这些类似废话,可以不看.这一步重点是**改名,引入.**

### 二.在自己的两个文件里搭配使用animate ###

**1.在.wxml文件中,给做动画的内容,加个class,起个类名**,名字可以和动画效果的名字一样(好处是便于查找理解),也可以不一样.无关紧要,关键是在下面2步.wxss里要绑定的动画名称要和animate.wxss里的名称一致.animate里的动画效果名称可以从[https://daneden.github.io/animate.css/][https_daneden.github.io_animate.css]网站上对照效果查看,也可以在[https://github.com/daneden/animate.css/blob/master/README.md][https_github.com_daneden_animate.css_blob_master_README.md]上查看名称列表.

**<view class="shishi">中学信息技术教学研发中心</view>**

![20190929031951643.png][]

用于<view>组件,

实际在使用时发现<text>不起效果,不知是不是我没找到正确方法.

**2.在.wxss文件里,借助animation:把类和动画关联起来.即指定(或称为绑定)动画名称**,注意这时所指定的动画名称一定要和animate的名称一致才有效果.

**.shishi\{**

**animation:** **zoomInUp****5s infinite****;**

**\}**

![20190929033148492.png][]

说明:这里给.shishi这个类指定了一个动画效果zooInUp, 时长5s(这个时间参数要有,如果没有,你试试看),infinite无限,表示循环不停.

![20190929033848153.png][]这样写是循环2次.

在使用**animation:****的时候,有6个属性:**

**可以用下面的方式写:**

**.shishi\{**

animation-name:

animation-duration:

animation-timing-function:

animation-delay:

animation-iteration-count:

animation-direction:

**\}**   (上面冒号后面对应属性的值)

也可以不写属性名,直接把属性值写在一行上,以空格分开.这样简写方便,上面的截图就是简写的形式.

**animation:** 动画名 持续时长 速度曲线 开始时延迟的时长 播放次数 轮流反向播放

**这部分重点是:起名,绑定.**

总结:1引用,2绑定

--------------------

# 另外,参考官方说明,较正宗方法: #

另外参考[https://github.com/daneden/animate.css/blob/master/README.md][https_github.com_daneden_animate.css_blob_master_README.md]文档,在第一步引用相同,第二步,可以不绑定,只需要在.wxml文件中引用动画类名附带部分参数即可.例:

<view class="animated rotateInDownLeft infinite slower">中学信息技术教学研发中心</view>![20190929104646679.png][]

效果:

![20190929110030280.gif][]

rotateInDownLeft是animate.wxss文件里定义好了的动画名,前面的animated按照官方提示似是应该带上,实验表明有的动画需要带上有的不带也行,还没找到规律原因.也就是说要把"animated+动画名"一起写上.

后面是参数,infinite 表示无限次循环,如果要控制次数,似乎还必须要在.wxss文件里再设置一下.

solower表示慢速运动.同类的参数还有slow  fast  faster等表示完成运动时间的长短不同.从而控制速度.

<table> 
 <thead> 
  <tr> 
   <th>Class Name</th> 
   <th>Speed Time</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>slow</code></td> 
   <td><code>2s</code></td> 
  </tr> 
  <tr> 
   <td><code>slower</code></td> 
   <td><code>3s</code></td> 
  </tr> 
  <tr> 
   <td><code>fast</code></td> 
   <td><code>800ms</code></td> 
  </tr> 
  <tr> 
   <td><code>faster</code></td> 
   <td><code>500ms</code></td> 
  </tr> 
 </tbody> 
</table>

还有控制延迟的参数,可以附加在里面,参数位置顺序好像没有区别:![20190929112052593.png][]

延迟参数还有:(默认1s)

<table> 
 <thead> 
  <tr> 
   <th>Class Name</th> 
   <th>Delay Time</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>delay-2s</code></td> 
   <td><code>2s</code></td> 
  </tr> 
  <tr> 
   <td><code>delay-3s</code></td> 
   <td><code>3s</code></td> 
  </tr> 
  <tr> 
   <td><code>delay-4s</code></td> 
   <td><code>4s</code></td> 
  </tr> 
  <tr> 
   <td><code>delay-5s</code></td> 
   <td><code>5s</code></td> 
  </tr> 
 </tbody> 
</table>

想进一步控制的话,则需要在自己的.wxss里加料:

.yourElement {
      animation-duration: 3s;
      animation-delay: 2s;
      animation-iteration-count: infinite;
    }

![2019092911335671.png][]

这个动画库的使用,说明还有些内容看不懂,暂不说了.接着学会再说.

想要多一点控制,那就多一点代码.网友能推荐哪有好的教程,由简到繁,由易到难,以一个好例子起点,扩展开去,精讲透一个例子,举一反三,学习效率高.

[20190929025853775.png]: /images/20230810/3846dc428b6847939a654287186cb6c8.png
[https_github.com_daneden_animate.css]: https://github.com/daneden/animate.css
[https_daneden.github.io_animate.css]: https://daneden.github.io/animate.css/
[https_github.com_daneden_animate.css_blob_master_README.md]: https://github.com/daneden/animate.css/blob/master/README.md
[20190929031951643.png]: /images/20230810/288680a71e004b9596522eca42c96611.png
[20190929033148492.png]: /images/20230810/55fd4f2cf3264e41b750ba574da9d322.png
[20190929033848153.png]: /images/20230810/73ed0ef69c744131aed3c36381c718a4.png
[20190929104646679.png]: /images/20230810/c81371d580dd44a29b59932eaa4005b0.png
[20190929110030280.gif]: /images/20230810/4b8faac490354519b5ff328b5e12730f.png
[20190929112052593.png]: /images/20230810/a12ef2f01dac4b49b8ead0bac4f26532.png
[2019092911335671.png]: /images/20230810/7404484bec024852934e876054473324.png