co-animation v1.0.0
文档说明
所有的co-animation的api方法调用都是基于animation.css的Classes类来实现的, 我们通过调用这些模拟的api来实现动画效果.
使用
co-animation能做什么？使用co-animation能帮助你快速制作H5宣传页的动画效果; 采用链式的方法一键操作H5动画功能, 欢迎大家参与讨论.
基本使用
首先，你要在<head>里面引入stylesheets和script.
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="../co-animation.js"></script>
</head>api
co-animation调用的api方法为animation.css的类名. 具体参考Class Name.
或者你可以查看如下api方法：
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
新增api
- delay
延迟执行当前节点的动画
- stop
当前节点的结束
- render
渲染当前的节点动画
使用
<script type="text/javascript">
coanimation('div').delay(3500).fadeIn().bounce().fadeInLeft().stop();
coanimation('p').delay(300).bounce().fadeInLeft().stop();
coanimation.render()
</script>功能
- 延迟执行动画效果
- 控制重复动画次数
- 支持链式调用api
版本改变
依赖
基于jquery和animation.css实现的H5动画插件co-animation。
可优化事项
- 外部建议实例一次 coanimation 方法
var coanimation = new coanimation();; - 重复运动偶尔会出现调用api方法失效;
- 控制每一次动画的加速和减速的实现;
- 添加其他类库的兼容(比如滚动当前页面监听重新渲染一次);
- 添加music绑定库功能;
- 可扩展项...;
- 高级扩展下;
6 years ago