微场景 之 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 微场景

以下为全部代码:
Plugins by ewCEO.com

评论:

依旧已久
2017-05-03 21:38
楼主我想问一下   在相同位置的一段文字就是需要第一段文字消失后第二段文字进入这个改真名实现
奇Yu
2017-07-25 08:57
@依旧已久:只要位置一样 两次动画时间不一样不就可以了
阿旭
2017-02-18 19:16
你好,我有一个场景,多个出场动画,但是出场的顺序与我设置的时间不一致

出场时间我是根据下面公式计算的

out = in_delay + in_duration + out_delay
ls
2016-08-03 09:43
这个支持loop么
奇Yu
2017-07-25 09:11
@ls:需要看你怎么写的
Zero
2016-07-28 10:38
你好,请问怎么实现,淡出然后抖动一会儿再消失呢?我只能实现淡出然后消失,中间的那个动画不知道怎么加进去,请指点,非常感谢~
奇Yu
2016-07-28 19:19
@Zero:一样的 要从CSS动画下手,控制动画时长,和动画内容
范某某
2015-10-16 18:37
你好,我在使用这个框架的时候,在一个slide里设置多个图片进场动画,只能成功执行第一个图片。文字没有任何问题。 期待你的回复
奇Yu
2015-10-25 14:42
@范某某:已经发邮件给你解决,你CSS样式问题

发表评论:

Powered by emlog 豫ICP备14014990号-1 sitemap