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

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

 

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

@import /style/animate.wxss

    从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://github.com/daneden/animate.css/blob/master/README.md上查看名称列表.

中学信息技术教学研发中心

用于组件,

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

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

.shishi{

animation: zoomInUp 5s infinite;

}

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

这样写是循环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文档,在第一步引用相同,第二步,可以不绑定,只需要在.wxml文件中引用动画类名附带部分参数即可.例:

中学信息技术教学研发中心

效果:

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

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

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

Class Name	Speed Time
slow	2s
slower	3s
fast	800ms
faster	500ms

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

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

Class Name	Delay Time
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s

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

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

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

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