微场景 之 swiper 进场动画和出场动画插件

2015-7-1 奇Yu WEB开发

微场景 现在是如火如茶,在线创作平台比比皆是。

如果是自己手动创建使用swiper创建场景切换是最快的。

swiper对手机触屏支持也比较好。甚至不用任何第三方插件。

swiper中文网提供了一个快速创建 动画的插件。

但是有一个问题。这个插件只有入场动画没有出场动画。

工作上正好用上。用了半天时间写的。

现在放到博客里。

swiper使用方法 参考http://www.swiper.com.cn/usage/index.html

在头部引入

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
    <link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
    <script src="path/to/swiper.animate.min.js"></script>
</body>
</html>


然后初始化SWIPER 和插件


<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
  })        
  </script>
</body>


呵呵这和 swiper中文网的一样,岂止是抄袭啊。就是在原来的思路上扩展的。。

重点在这里。。这里的写法和以前不一样。


<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide a">

            <div class="ani big-green"
                 data-slide-in="at 500 from bounceInDown use swing during 500"
                 data-slide-out="at 0 to fadeOutRight use swing during 1500 force"
                 style="top: 50px; left: 20px; width: auto; height: auto;">内容1
            </div>
            <div class="ani big-green"
                 data-slide-in="at 500 from fadeInUpBig use swing during 1500"
                 data-slide-out="at 1000 to fadeOutUp use swing during 500 force"
                 style="top: 172.8px; left: 120.8px; width: auto; height: auto;">内容2
            </div>
        </div>
        <div class="swiper-slide b">
            <div class="ani big-green"
                 data-slide-in="at 500 from bounceInRight use swing during 500"
                 data-slide-out="at 1000 to bounceOutLeft use swing during 500 force"
                 style="top: 50px; left: 100px; width: auto; height: auto;">内容3
            </div>
            <div class="ani big-green"
                 data-slide-in="at 100 from zoomInLeft use swing during 500"
                 data-slide-out="at 2000 to zoomOutUp use swing during 500 force"
                 style="top: 150px; left: 50px; width: auto; height: auto;">内容4
            </div>
        </div>

    </div>
</div>


在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画

参数是一致的。

 at         500        from  bounceInRight use     swing       during     500

在   多少时间开始   以   什么动画         使用    什么速度 动画用时  多少  (force 是否使用 只在出场的时候判断)

at        后面跟的是     动画延迟时间

from     后面跟的是    动画样式

use       后面跟的是    动画力度

during   后面跟的是    动画持续时间

force     后面跟的是    是否使用 只有在出场动画的时候使用。进场动画无效。。


需要说明的是  

出场动画执行时间 =进场等待时间(at)+进场动画执行时间(during)+出场等待时间(at)



标签: wap 微场景

评论(9) 浏览(14924)

Powered by emlog 豫ICP备14014990号-1 sitemap